2

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).

Community
  • 1
  • 1
Mark
  • 2,058
  • 2
  • 35
  • 64

2 Answers2

1

Try using the following js function.

function download()
{
    window.location = '<<your file name with full path>>';
    //for ex. function download()
    //window.location = 'mobilepayreport.xls';
}
  • I do not have a file, just a string with the data. I am not generating a file. – Mark Sep 08 '15 at 20:33
  • You asked in question that you want to download a file. create a file at desired location and you would be able to download it. You want to write something in that file ?? I am using excelwriter php class in one of my code. I can show you how to work with that if you want to. – Mehta Ankit Sep 08 '15 at 20:58
0

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.