Filesaver.js: FileSaver opens blank tab on Chrome for iOS

[Faison]

Hi there,

I'm running into an issue while using this on Chrome for iOS: when the FileSaver.js code is called to save the blob from a canvas, a new tab is opened, but it's blank. The code is fairly similar to the project's demo code, except it runs on a 'click' event instead of a 'submit' event.

You can replicate this issue by doing the following:

1. Put the demo code from the project (here: https://github.com/eligrey/FileSaver.js/tree/master/demo) onto a web server (local or other).
2. On an iPhone in Chrome, go to that demo page
3. Tap on the canvas a few times to make some dots
4. Click the "Save" button.

The thing that's strange, though, is that the demo at http://eligrey.com/demos/FileSaver.js/ works for chrome on iOS. So there appears to be something breaking the saving on Chrome for iOS in the version that the demo loads in.

This code is pretty above my head, otherwise I'd help look into this, so I'm hoping you guys can help me figure this out.

Thanks,
Faison

[alferov]

I have the similar issue.
I've uploaded an example on gh-pages: http://alferov.github.io/filesaver-ios-issue/
It uses the latest code from both Filesaver and Blob projects.

[eligrey]

I don't have any Apple devices, so you can submit pullreqs.

[Faison]

Hi @eligrey ,

Understandable. I could take a crack at it, but I'll need some direction. Do you have any initial thoughts of where in the code this issue could stem from? Any starting points would help me greatly.

Thanks,
Faison

[Hypocrite]

Any updates to this problem?

Safari is still opening files in a new tab with blob:// in the address bar.

Plain text files are displayed in the tab but for example .xls files show just a blank tab.

[RedShift1]

Experiencing the same problem here in both my own code and the supplied demo.
Update: used Weinre to remote debug Chrome, but nothing useful there. Console didn't output anything.

[arunxavy]

same issue here, this is what I have done, but not the better way.

if(!navigator.userAgent.match('CriOS')) {
    canvas.toBlob(function (blob) {
        saveAs(blob, "screen.png");
    } );
} else {
    //for chrome in apple devices
    var a = document.createElement('a');
    a.href = canvas.toDataURL();
    a.download = 'screen.png';
    a.target='blank';
    a.click();   
}

[ph4r05]

Notes from my debugging:

• Chrome iOS (CriOS v51.0.2704.64) does not support opening ObjectUrls. It gives empty page. While it uses Safari engine, recent versions of Safari support ObjectUrls.
• This was already discussed on Google Forums without success, just workaround
• Workaround was published on Stack Overlow. Here is slightly modified version that worked for me. It uses datalinks.

var reader = new FileReader();
var blob = new Blob(['Hello world'], {type: 'text/plain'});
reader.onload = function(e){
  window.location.href = reader.result
}
reader.readAsDataURL(blob);

• It is still a workaround, Chrome iOS does not download the file. It opens it in the tab.
• data:attachment/file did not work for me. CriOS shown file for download, but with download error. After pressing download again button, error again.
• I decided to use Blob's type blob.type in datalink. It worked fine in CriOS.
• If datalink type is data:application/octet-stream it worked even if real Blob type was image/png, image was still shown.
• This workaround may have problems with big files. Even files slightly over 1MB take some time to load in the tab.
• I've submitted a pull request #240

UPDATE 01:

• "data:attachment/file" in CriOS using window.open(dataLink, '_blank'); shows empty page, nothing
• "data:attachment/file" in CriOS using window.location.href = dataLink; behaves as described above - shows download error.

UPDATE 02:

• Both datalink types "data:application/octet-stream" and "data:"+blob.type work in the same way for file types: pdf, png, csv, zip. PDF/PNGs are displayed on the page, same as CSV (text file).
• While I have no handler for ZIP application/zip installed on iOS, using both datalink formats, just an empty tab is opened.

UPDATE 03:

• If Blob has empty type i.e., new Blob(["hello world"]), datalink still works, displays "hello world"

UPDATE 04:

• thanks to @jimmywarting for help with improving the PR

UPDATE 05:

• I've tested object links in different setups, still ending up with no action / blank page in CriOS.
• Same results for window.open(object_url, '_blank'); and window.location.href = object_url;
• Tried blobs of types: attachment/file, application/octet-stream, image/png, none of them worked. (During testing I modified the code so it does not fallback to datalink for application/octet-stream)

[jimmywarting]

@ph4r05 nice research

[koop4]

I still face the problem on IOS for pdf file, has it actually been solved?

[Ruffio]

@koop4 If you read the README.md then you will know the answear to your question:

[Timoostrich]

Looks like there is still no good workaround for this, isn't it?