FileSaver.js
FileSaver.js copied to clipboard
saveAs not working in chrome with iPad and iPhone
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.
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...
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.
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
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.
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. :(