Create CSV and open with JS not working in IE, Chrome

Question

I am creating a CSV file from a js object by supplying a filename, comma separated headers, and a data key-value object. However, when I go to download the file, I am facing the following issues:

Chrome: File downloads, but the file is unnamed and has no file extension
IE: File doesn't even download.

Here is my JS code:

function createCSV(filename, headers, data) {

    var csvContent = "data:text/csv;charset=utf-8," + headers;
    data.forEach(function(d, index) {

        var dataString = "";
        var i = 0;

        for ( var key in d) {

            if (d[key] == 'null')
                dataString += '\"\"';
            else
                dataString += "\"=\"\"" + d[key] + "\"\"\"";

            if (i < Object.keys(d).length - 1)
                dataString += ",";

            i++;
        }

        if (index < data.length)
        csvContent += "\n";

        csvContent += dataString;
    });

    var filename = filename + ".csv"

    var link = document.createElement("a");
    link.setAttribute("href", encodeURI(csvContent));
    link.setAttribute("download", filename);
    actuateLink(link);
}

function actuateLink(link)
{
   var allowDefaultAction = true;

   if (link.click)
   {
      link.click();
      return;
   }
   else if (document.createEvent)
   {
      var e = document.createEvent('MouseEvents');
      e.initEvent('click', true, true);
      allowDefaultAction = link.dispatchEvent(e);           
   }

   if (allowDefaultAction)       
   {
      var f = document.createElement('form');
      f.action = link.href;
      document.body.appendChild(f);
      f.submit();
   }
}

score 2 · Accepted Answer · edited Feb 01 '19 at 07:44

See fixes for specific browsers below:

function downloadFile(filename, csvContent) {
var blob = new Blob([csvContent]);
var needsClick = true;
var browser = "";
if ( window.webkitURL ) {
    browser = "CHROME";
    var link = document.createElement("a");
    link.setAttribute("href", "data:text/csv;charset=utf-8," + encodeURI(csvContent));
    link.setAttribute("target", "_blank");
    link.setAttribute("download", filename);
    link.click();
} else {
    if (document.createEvent) {
        browser = "FIREFOX";
        var link = document.createElement("a");
        link.setAttribute("href", encodeURI("data:text/csv;charset=utf-8," + csvContent));
        link.setAttribute("download", filename);
        var e = document.createEvent('MouseEvents');
        e.initEvent('click', true, true);
        needsClick = link.dispatchEvent(e);
    }
    if(needsClick) {
        if(window.navigator.msSaveBlob != undefined){
            browser = "IE";
            window.navigator.msSaveBlob(blob, filename);
        }
    }
}
console.log(browser); }

function under Chrome doesn't work and Firefox will get window.navigator.msSaveBlob undefined error. So update a little bit to make all works. — Wen, Feb 01 '19 at 05:22

score 1 · Answer 2 · edited May 23 '17 at 12:17

1

You can fix this problem, at least for Chrome, with the proposed answers to this question.

I do not know an answer for Internet Explorer or any other browser, however.

edited May 23 '17 at 12:17

Community

1
1

answered Jun 18 '14 at 20:16

StrubT

998
5
18

Create CSV and open with JS not working in IE, Chrome

2 Answers2