Downloading files does not work properly on iOS

[arjanvlek]

Downloading a file does not work properly on iOS 7.1.2 and iOS 9.1. A new window is opened with blob:// in the address bar. In case of a binary file, a blank page is displayed (while an Open with Excel button is present and does work) but no file preview is generated.

Text files (like CSV) are displayed as-is and are not prompted to download. There is also no "Open with" button available for these file types.

Is there a fix available or do I need to bypass this with a user agent check and use another downloading method on iOS?

Versions: Angular-file-saver: 1.0.1 iOS versions 9.1 and 7.1.2 face this issue, I assume all versions between also share this issue.

[alferov]

Unfortunately, it's a known FileSaver.js issue: https://github.com/eligrey/FileSaver.js/issues/179

[arjanvlek]

And what's the solution to the FileSaver.js issue?

[alferov]

There was a large update that affected iOS: https://github.com/eligrey/FileSaver.js/commit/c0c13ccc0e2e7b714e519c1890bec9ecbaaaf75e I'll try to roll back and test it.

[Hypocrite]

Is there any updates about this?

I am trying to export an Excel file and it works fine with Chrome, IE and Firefox. But Safari just opens an empty tab where I cannot for example just save the content.

The demo opens a new tab with blob: in the address bar.

[arjanvlek]

You should use window.open (JavaScript) or <a href... (HTML) on the binary file URL that is generated from your backend. That way it works on all browsers.

Op 25 feb. 2016 om 10:03 heeft Hypocrite [email protected] het volgende geschreven:

Is there any updates about this?

I am trying to export an Excel file and it works fine with Chrome, IE and Firefox. But Safari just opens an empty tab where I cannot for example just save the content.

The demo opens a new tab with blob: in the address bar.

— Reply to this email directly or view it on GitHub.

[Hypocrite]

Could you give an example? I currently have this code which is run with ng-click:

$scope.exportData = function () {
            var table = document.getElementById('exportable');
            var pagination = document.getElementById("results-footer").innerHTML = "";
            var blob = new Blob([table.innerHTML], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
            });
            FileSaver.saveAs(blob, 'Report.xls');
        };

[arjanvlek]

I'm sorry to tell you that window.open or <a href... does not work for this, only for files retrieved using either $http or ngResource. However, as your table needs data from some kind of server / data source, you could implement an exporting feature on the server side. Please be aware that such an exporting feature is not an easy-to-make function. What kind of backend are you using?

[Hypocrite]

We have a node.js and mongodb backend.

[arjanvlek]

There are various Excel export libraries available for the Node.JS environment, so I suggest taking a look at one of these. (https://www.npmjs.com/package/excel-export) To answer your original question: No, there is no improvement on the iOS / Safari situation.

[Hypocrite]

Thanks for the quick replies! We have to investigate the Node.JS solutions.

[alferov]

@Hypocrite, the author's position: https://github.com/eligrey/FileSaver.js/issues/179#issuecomment-157862607

@arjanvlek, thank you for your contribution!

[Hypocrite]

So the author is asking about ideas where the problem might be? Has this worked in previous versions of Filesaver.js or has it been always broken?

[Hypocrite]

Any update with this?

I noticed there has been some development in the FileSaver.js GitHub: https://github.com/eligrey/FileSaver.js/issues/179 https://github.com/eligrey/FileSaver.js/pull/240