FileSaver.js icon indicating copy to clipboard operation
FileSaver.js copied to clipboard

saveAs not working in chrome with iPad and iPhone

Open sbpat123 opened this issue 3 years ago • 5 comments

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.

sbpat123 avatar Nov 25 '21 12:11 sbpat123

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 avatar Nov 29 '21 12:11 hunterlan

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.

hunterlan avatar Nov 30 '21 07:11 hunterlan

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

LukeGarrigan avatar Dec 03 '21 13:12 LukeGarrigan

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.

tbunique avatar Jan 06 '22 16:01 tbunique

Any work around? i'm facing this with a a file PDF that i turned into a blob, that are not opening on a new tab, only overriding current tab with the pdf file. :(

Bonfims avatar Jul 25 '24 13:07 Bonfims