Downloading a Dynamic CSV in Internet Explorer

Question

The following code works in both FireFox and Chrome, but not IE. Essentially, I have a JSON object which gets converted into an array and then to a csv format, when I click the button in FF or Chrome the file gets downloaded or the Save As window opens, but in IE a new tab opens up. In a perfect world IE would not exists, but in the real world we have to make it work, lol.

$("#csvbtn").click(function(e){
    e.preventDefault();
    var  json_obj= JSON.parse(result);
    var csv = JSON2CSV(json_obj);
    window.open("data:text/csv;charset=utf-8," + escape(csv));
});

BTW, I am using IE 11 in windows 8 to test this, if that makes a difference.

Thanks all!

Answer 1

This is my solution in case someone else is looking for a solution. now it works with FF, Chrome , and IE

var csv = JSON2CSV(json_obj);            
var blob = new Blob([csv],{type: "text/csv;charset=utf-8;"});

if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, "csvname.csv")
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", "csvname.csv");
            link.style = "visibility:hidden";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }           
    }

Now I just need to figure out if there is a way to have the save as screen pop up instead of automatically saving the file. If anybody knows the answer to that please share. For now my users will have to use this functionality.

Thanks all for all the great answers, you guys are awesome.

Answer 2

Internet Explorer does not permit data URIs as navigable content, for security purposes. To understand why, I would encourage you to read Henning Klevjer's short white-paper on the topic, Phishing by data URI. In summary, this has been demonstrated to open up avenues by which the end-user could be tricked into giving up sensitive information.

Also, from the data Protocol documentation on MSDN:

For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.

To be honest, passing a data URI to window.open feels a bit hacky. Instead, you should use an API to handle the process (provided one exists). If you'd like to download a file to the user's machine in Internet Explorer, consider using navigator.msSaveBlob or navigator.msSaveOrOpenBlob.

As an example, consider the following:

if ( window.navigator.msSaveOrOpenBlob && window.Blob ) {
    var blob = new Blob( [ "A,B\nC,D" ], { type: "text/csv" } );
    navigator.msSaveOrOpenBlob( blob, "strings.csv" );
}