Javascript: set filename to be downloaded

Question

I'm using a plugin to generate a csv file from a table, the file is being downloaded with a "download" filename, how can I change the filename e.g. as dowload.csv

var csv = $("#table").table2CSV({delivery:'download'});
window.location.href = 'data:text/csv;charset=UTF-8,'+ encodeURIComponent(csv);

dandavis · Accepted Answer · 2015-04-14T16:59:05.000

33

i wrote a tool you can use to save a file to the downloads folder of the local machine with a custom filename, if that's possible on the client's machine.

as of this writing, you need chrome, firefox, or IE10 for that specific capability, but this tool falls-back to an un-named download if that's all that's available, since something is better than nothing...

for your use:

download(csv, "dowload.csv", "text/csv");

and the magic code:

function download(strData, strFileName, strMimeType) {
    var D = document,
        a = D.createElement("a");
        strMimeType= strMimeType || "application/octet-stream";


    if (navigator.msSaveBlob) { // IE10
        return navigator.msSaveBlob(new Blob([strData], {type: strMimeType}), strFileName);
    } /* end if(navigator.msSaveBlob) */


    if ('download' in a) { //html5 A[download]
        a.href = "data:" + strMimeType + "," + encodeURIComponent(strData);
        a.setAttribute("download", strFileName);
        a.innerHTML = "downloading...";
        D.body.appendChild(a);
        setTimeout(function() {
            a.click();
            D.body.removeChild(a);
        }, 66);
        return true;
    } /* end if('download' in a) */


    //do iframe dataURL download (old ch+FF):
    var f = D.createElement("iframe");
    D.body.appendChild(f);
    f.src = "data:" +  strMimeType   + "," + encodeURIComponent(strData);

    setTimeout(function() {
        D.body.removeChild(f);
    }, 333);
    return true;
} /* end download() */

update: added future-resistant IE routine

update2: checkout the evolved version on GitHub that includes dataURL and Blob support.

edited Apr 14 '15 at 16:59

answered May 04 '13 at 18:52

dandavis

16,370
5
40
36

1

Looks good but this doesn't support any browser before 2012. I guess that is the best we can do with client side download. – styfle Jun 18 '13 at 19:26
actually, the dataURL fallback works on pretty old copies of firefox and with some work-around-able mime-type issue on older chromes. I used the function for years before i added the IE10 and a[download] capabilities last year... – dandavis Jun 18 '13 at 20:22
1

`BlobBuilder` has been deprecated. Please edit your answer to use the `Blob` constructor instead. – Rob W Dec 30 '13 at 17:53
@RobW: it doesn't use BlobBuild, it uses msBlobBuilder to provide an IE10 branch for that browser, which would otherwise be unsupported by the script... – dandavis Dec 30 '13 at 19:25
2

MSBlobBuilder will be dropped in future versions of IE. It was introduced in a dev build of IE, but since the unprefixed Blob constructor was also added in IE10 (release preview), MSBlobBuilder will always be a bad choice. You should feature-detect `navigator.msSaveBlob` and use the Blob constructor when it's available. – Rob W Dec 30 '13 at 19:58
@dandavis I just came back to this answer. I actually meant to say this does not support an version of IE before IE 10. Unfortunately there are still a lot of IE 9 and 8 users but eventually this will be the magic bullet we all need (as long as the IE team continue to support msSaveBlob). – styfle Apr 02 '14 at 19:34

Javascript: set filename to be downloaded

1 Answers1

Linked