Filesaver.js: Is IOS Safari working with FileSaver.js?

[dodomui]

Hi,
From the demo website it was failed to download by pressing the save button with IOS safari.
It just open in a new tab and showing blob url.

Following the documentation, tried using on-click, but seem doesn't work as well.

Anyone could advise?
Thanks a lot.

[dhoffmann]

This is explained in the documentation:

Due to restrictions in iOS saveAs opens in a new window instead of downloading, if you want this fixed please tell Apple how this bug is affecting you.

[idleberg]

Saving itself works for me, but the argument for the file-name is ignored – a file is always saved as untitled(+ correct extension)

[lacroixdavid1]

Issue was resolved for me. My problem was that my API was not returning correct MIME for my file. Chrome for Android and Windows was adjusting it by it self, but safari is not able to do so. Everything is now working as expected even with an old iPad running on iOS 7.

[undefinederror]

hi @lacroixdavid1
What do you mean that it is working for you? Are you able to trigger a download? I have tried with multiple IOS devices and all I ever get is the new tab. Do you get a download dialog on the sample page ?

[g3n1us]

I can confirm that the sample page does not work on Safari iOS 11.2.

[lacroixdavid1]

@undefinederror i am not talking about the sample page. You should make sure your backend returns correct MIME Type for the file, otherwise you will get an empty safari tab with a BLOB Uri. My apps are working as expected after fixing MIME.

[undefinederror]

@lacroixdavid1 thanks for your reply and happy holidays since I am at it,
By "working as expected" do you mean that you get a download dialog or a new tab?

[mattLummus]

Has anyone been able to confirm that this can work on iOS safari? We got bit by this. If it is a hard limitation by Apple I would really would have liked to that in the readme and compatibility table 😕

[undefinederror]

@mattLummus
In my experience this doesn't force download like on other devices, it opens a new tab.

[lacroixdavid1]

Yes, it opens a tab with file displayed correctly. If you don't set Mime type from your server, Safari will open a new tab with a blob URL and display an error.

[mattLummus]

@lacroixdavid1 But to confirm, iOS isn't supported in a client-side only implementation?

[lacroixdavid1]

@mattLummus Yes it is. I am using it in a angular cli project with a totally separated backend written in .net core 2. that runs on another server. I had problems initially with it on safari and iOs, but i fixed it by making sure the file you are downloading is returned by your backend, service or api (in my case .Net Core 2.0) with a correct Mime-type, otherwise, ios safari has trouble deciding what type of file it is and this issue is not related with this library.

[lacroixdavid1]

I wish I could share you both client and service repositories, but those are privates and I'm not allowed to. Where does your download file byte array come from?

[mattLummus]

By "client-side only" I really mean serverless, so no backend. Our downloads were triggered from browser. In our case we were just generating an .ics calendar file in browser using JSON that was there anyways, so touching server for the download was extraneous in theory. We wanted to just trigger a blob download and write the string to it. (.ics files are more or less just a CSV so theres no real heavy lifting other than the download part anyhow)

Thanks for your input! We ended up moving the request to the backend, but this is a great tool if the issue with iOS can ever be sorted

[lacroixdavid1]

@mattLummus I do understand very well what you mean by "client-side only" and that's what Angular is. The most important part is that when you initialize your BLOB ( might be from a server just like in my case or it might be directly from browser like in yours), you need to set a MIME Type so safari can display it properly. Chrome is smart enough to handle it, but Safari isn't. Here's an example of initializing a BLOB and setting it a PDF MIME Type :

const file = new Blob([data], {type: 'application/pdf'});

You can see the same issue documented here, just not talking about safari :
https://stackoverflow.com/questions/21729451/pdf-blob-pop-up-window-not-showing-content

I need to support iOs > 7 and trust me you can make it work this way.

[jimryan]

Thanks @lacroixdavid1! I thought I was SOL getting iOS to correctly add a calendar event via an ICS file being generated client-side until I saw your post - set the MIME type and it works perfectly.

[Ruffio]

So this is an issue with the project that needs to be fixed, or just a matter of implementation?

[jimryan]

I'm very new to the project, but two things should probably happen:

1. Update the README to note that a MIME type needs to be specified for iOS to interpret the file properly.
2. If no MIME type is being set in the demo, one should be set for iOS compatibility.

I think those two things would solve OP's issue and confusion.

[lacroixdavid1]

No changes needs to be made to the library core but @jimryan suggestion should be followed, in my opinion. Glad i helped you

[confiscate]

hmm i tried the demo page on my iOS safari version 11 and it doesn't work. It still opens a new tab with the URL "blob:....."

https://eligrey.com/demos/FileSaver.js/

[lacroixdavid1]

I dont think demo page is optimized for safari

[confiscate]

sorry for the comment. Thank you for the update.

for now, i am using indexeddb to bypass this. It seems to store 50mb on even iOS safari. Thanks!

[nharrisanalyst]

is it difficult to optimize the demo page for IOS because after reading this I am still confused on how to use this for IOS

[Ankit-Prajapati]

I am providing the MIME type as below:

const file = new Blob([data], {type: 'text/plain'});

But still, it does not show or popup the Download File dialog on IOS 11.4. I tried Safari, Chrome, and Firefox and all behaves in the same way. All the 3 browsers open the text file content in a new tab generating some weird filename which is visible on the tab title bar as well as in the URL bar.

Any idea of how can I popup a download file dialog to save the Text file in IOS? I am using AngularJS for my App Development.

[lacroixdavid1]

@Ankit-Prajapati see the following from https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types :

application/octet-stream
This is the default value for a binary file. As it really means unknown binary file, browsers usually don't automatically execute it, or even ask if it should be executed. They treat it as if the Content-Disposition header was set with the value attachment and propose a 'Save As' file.

text/plain
This is the default value for textual files. Even if it really means unknown textual file, browsers assume they can display it.

Using text/plain will make your browser try to display it. Try to use application/octet-stream instead or some other MIME type that will prevent the browser from trying to display it and let another application handle it.

[Ankit-Prajapati]

@lacroixdavid1

I tried the following two MIME types:

1. "application/octet-stream"
   This opened a new tab saying "Download failed".

2. "application/pdf"
   This opened a new tab with no data.

I am experiencing this error only on IOS 11.4 (iPad).
No error on Windows and Linux Operating Systems no matter which browser I utilize.
Not sure about Mac. Haven't tested yet.

[CSchulz]

I am trying to get the download working too. In general it is working fine expect the "unnamed" issue with pdf files if you store the file in iBooks.

iOS 10:
"application/octet-stream" opens a new tab saying unknown format choose your application.
"application/pdf" opens a new tab opening the pdf directly.

[melilocacr]

I was able to get my ics file to open on Safari for iOS by bypassing Filesaver's download function and just using build instead, like such:

var openCal = function () { if (isIos()) { window.open("data:text/calendar;charset=utf8," + escape(cal.build())); } else { cal.download(); } }

Still haven't been able to get it working on Chrome and Firefox for iOS, but this works for Safari.

[madakk]

The WebKit issue for supporting the download attribute was recently resolved, so maybe this could work in the future?

[smlee]

The WebKit issue for supporting the download attribute was recently resolved, so maybe this could work in the future?

(In reply to Mauricio Taranto from comment #33)

HI All,

Im still having issues on download for IOS devices. I saw that this bug was
closed bug it was already deployed?

I try the anchor workaround but seems not be working fine, since the file
name is always unknown.

Any one knows if this is already in "prod"?

Thanks,

No, support for the download attribute on iOS is not in production yet, it is not even available in a public beta yet.

The bolded text was the last message

[snahmad]

Is it working now with latest MAC OS.
in MAC Os. it does not work for any browser.

[matt-borgelt]

Having the same problem described here with Excel document/Google Sheet. Will update if I can fix it.

[TixieBorg]

@eligrey Looks like it's gonna be fixed on iOS 13: https://bugs.webkit.org/show_bug.cgi?id=167341

[snahmad]

nice.

[fredflyer]

Hi TixieBorg,
did you exeprience it working recently ?
if yes, can you explain whet to do please, as on my side i'm still having a tab opened with the content of my file, but i'm not able to save it...using blob text/plain...
thank you
Fred

[TixieBorg]

@fredflyer Nope I didn't upgraded to iOS13 yet

[DevJhns]

so, still no way to DOWNLOAD file from blobs?
ipad got ipadOS and actually can download files now like this
https://user-images.githubusercontent.com/6698344/66068025-1f301c80-e54d-11e9-82eb-cbc5b33c8c3a.PNG
but on this picture I see IPHONE does it, how?!?!?
For me only ipad do it in preview popup in current tab without redirect, how to make same effect on iphone?? My tests just show file content in other tab, but for my app it's not what I need, storing file on server and providing link to it also not my way.
Is it even possible or only iphone x and higher got filesystem update(or this img is fake)?