CODEWITHSUNDEEP
javascriptcsvdownloadsafari
Mark
Mark

Reputation: 2158

javascript download csv data in Safari

Is there anyway to download a csv string that I have created in my javascript in Safari?

EDIT: I do not want to (cannot) create a file on the server.

I have the following code, it will work fine on other browsers, but not on safari. The best that I can seem to make it do is open the data in a new window, but that is an awful UI experience for the user.

    $("#csv").click(function(event) {
        event.preventDefault();
        navigator.sayswho = (function() {
            var ua = navigator.userAgent, tem,
            M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
            return M[1];
        })();

        var download = function (content, fileName, mimeType) {
            var a = document.createElement('a');
            mimeType = mimeType || 'application/octet-stream';
            mimeType = 'application/octet-stream';

            if (navigator.msSaveBlob) { // IE10
                return navigator.msSaveBlob(new Blob([content], {
                    type: mimeType
                }), fileName);
            } else if ('download' in a) { //html5 A[download]
                a.href = 'data:' + mimeType + ',' + encodeURIComponent(content);
                a.setAttribute('download', fileName);
                document.body.appendChild(a);
                setTimeout(function () {
                    a.click();
                    document.body.removeChild(a);
                }, 66);
                return true;
            } else { //do iframe dataURL download (old ch+FF):
                if (navigator.sayswho == 'Safari') {
                    var uri = 'data:text/csv;charset=utf-8,' + escape(content);
                    var link = document.createElement("a");
                    link.href = uri;
                    link.target = "_blank";
                    link.style = "visibility: hidden";
                    link.download = fileName;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
                else 
                {
                    var f = document.createElement('iframe');
                    document.body.appendChild(f);
                    f.src = 'data:' + mimeType + ',' + encodeURIComponent(content);

                    setTimeout(function () {
                        document.body.removeChild(f);
                        }, 33333);
                        return true;
                }
            }
        }

        //csv_content is my string that has the csv data in it.
        download(csv_content, moment().format("YYYY_MM_DD_HH_mm") + '.csv', 'text/csv');
    });

In Chrome and in FireFox, it works as expected. I saw some answers using FileSaver.js (https://stackoverflow.com/a/14858315/1758023), but the comments say this is not working (and I couln't make it work either).

Upvotes: 2

Views: 3009

Answers (2)

user3894514
user3894514

Reputation: 41

I also had the issue in safari.You can create and download the csv file in safari.But until your file is not physically stored on any location it does not show the file name and type in download popup(it always shows unknown).So I suggest pass the data as html in server side code using ajax and create a file and and with response of that call create the link of file which you stored from server side code.download the file and then you can delete this file.

Upvotes: 0

Mehta Ankit
Mehta Ankit

Reputation: 49

Try using the following js function.

function download()
{
    window.location = '<<your file name with full path>>';
    //for ex. function download()
    //window.location = 'mobilepayreport.xls';
}

Upvotes: 1

Related Questions