search

eligrey / FileSaver.js

An HTML5 saveAs() FileSaver implementation
https://eligrey.com/blog/saving-generated-files-on-the-client-side/
Other
21.42k stars 4.38k forks source link

saveAs not working in chrome with iPad and iPhone #735

Open sbpat123 opened 2 years ago

sbpat123 commented 2 years ago

We are using docx npm to generate the word document. To save the generated document we are using below code snippet.

Packer.toBlob(data).then((blob) => { saveAs(blob, filename); });

saveAs is working as expected in chrome browser in windows and safari browser in iPad and iPhone. However, it is not working when we tried it in iPad and iPhone on chrome browser.

hunterlan commented 2 years ago

Same, but also, I figured out, that on some websites for excel files, chrome iOS for iPhone, data which contains in file, opens in new tab...

hunterlan commented 2 years ago

However, it is not working when we tried it in iPad and iPhone on chrome browser.

@sbpat123, I replaced fileSaver to this method:

window.open(URL.createObjectURL(blobFile));

Where blobFile - Blob type, with defined MIME type. But there is another problem: file cannot be saved, only be opened in new tab.

LukeGarrigan commented 2 years ago

We've got this issue in production at the moment too. Our issue is that when the user hits the download button the text gets embedded in the website.

If you open this codepen in chrome on an iPhone, enter some text and a file name and hit save, you'll get what we're seeing:

After clicking save (It overwrites the current UI):

This may be related: https://bugs.chromium.org/p/chromium/issues/detail?id=1252380

tbunique commented 2 years ago

I also had the text directly displayed in window problem and after changing the blob type to application/octet-stream;charset=utf-8, downloading didn't work anymore.

After checking in the code, I'd say the problem begins here : https://github.com/eligrey/FileSaver.js/blob/b5e61ec88969461ce0504658af07c2b56650ee8c/src/FileSaver.js#L80

It then generates an <a> link and clicks on it but Chrome iOS doesn't react at all. What I find weird is there is a Chrome iOS user agent check later in the code, when using the FileReader method. Maybe this part was written when Chrome iOS didn't have 'download' in HTMLAnchorElement.prototype yet and code was expected to directly go to the FileReader part.

Anyway, in my case, I did a dirty fix by checking for Chrome iOS in the first condition but it's not enough for me as FileReader doesn't allow a file name.