How to properly download pdf file in iOS with custom name using js?

Question

i'm trying to download pdf file from my server response into the client side using jQuery. My code works fine for Windows, Android, Linux on Chrome & Mozilla - i.e. able to download pdf data file with correct name and able to open it.
But on iOS devices (iphone, ipad, etc) in Safari and Chrome able to get popup for file download with "document" name, not as name specified by me in code. Also the file is saved without any extension and have added this header - Content-Disposition: attachment; filename="MyFileName.ext"

These all stuff happening in iOS only. Below is the code i'm using for downloading pdf document in iOS

                var reader = new FileReader();
                var parsedData = JSON.parse(response);
                var parsedResult = _base64ToArrayBuffer(parsedData[0])
                var blobOutput = new Blob([parsedResult], { type: 'application/pdf' });
                var documentLink = document.createElement('a');
                documentLink.style = "display: none";

                reader.onload = function (e) {
                    documentLink.href = reader.result;
                    documentLink.download = parsedData[2]; // contains file name
                    document.body.appendChild(documentLink);
                    documentLink.click();
                }
                reader.readAsDataURL(blobOutput);

This is the screenshot on iOS 13 device of browserstack.

Also checked that apple has fixed this bug here, but i'm unable to get it work.

Any help on this will be much appreciated. Thanks in advance!

Please check SO ans https://stackoverflow.com/a/8590579/1321167 to look at server side approach. HTTP response header `Content-Disposition: attachment; filename="MyFileName.ext"` will come into picture only and only if file is getting served from server directly and not via `ajax`'s success handler and subsequent `` tag creation. — vijayP, Jun 29 '20 at 15:29
@vijayP thanks, this seems to be the only possible solution if need to make work cross platform — light, Jul 02 '20 at 12:44

light · Accepted Answer · 2020-07-02T13:01:05.690

Finally i removed all my client side code where i was getting response from the server and performing operations on the received response as posted in the question and added server side file downloading with asp.net's FileContentResult.

Below is the code snipet which allows to download file on most of the platorms.
I've personally tested on Windows, Android, Linux, MacOS on Chrome and Firefox browsers and iOS(Safari) browser, it downloads pdf file with correct name and extension passed.

Downloading on iOS Chrome was nightmare, it seems unable to force download. I tried but the popped-up downloadable file with correct name gave me "Couldn't Download" error, hence opened the file which can be printed on iOS Chrome devices.

Used application/octet as it forces the client to download file.

[HttpGet]
        public FileResult ProccessCertificate(string val)
        {
            
            var result = obj.CertificateService(val); //api call to fetch data
            byte[] data = Convert.FromBase64String(result[0]); //this contains pdf data
            string contentType = System.Net.Mime.MediaTypeNames.Application.Octet;

            List<string> iDevices = new List<string> { "iPad", "iPhone", "iPod" };
            var agent = Request.UserAgent;
            //if its an iOS device used with chrome browser - open as pdf, as download fails on iOS Chrome
            if (iDevices.Any(val => agent.IndexOf(val, StringComparison.OrdinalIgnoreCase) > 0) && agent.IndexOf("Crios", StringComparison.OrdinalIgnoreCase) > 0)
            {
                contentType = System.Net.Mime.MediaTypeNames.Application.Pdf;
            }
            return File(data, contentType, result[2]); //last param contain downloadfilename
        }

How to properly download pdf file in iOS with custom name using js?

1 Answers1