How to specify URI resource file name in anchor tag?

Question

I want to implement a client-side downloadable file using javascript, and use the UATA URI to dynamically create the client-side file using the following method:

<a href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Download CSV</a>

However, the downloaded file does not have a name. I saw some solutions in stackoverflow where the download attribute can be used, but I need to support older browsers, so I cannot use this.

Answer 1

You can easily adapt this piece of code to your needs:

//Generate a file name
    var fileName = "List_";
    //this will remove the blank-spaces from the title and replace it with an underscore
    fileName += ReportTitle.replace(/ /g,"_");   

    //Initialize file format you want csv or xls
    var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

    // Now the little tricky part.
    // you can use either>> window.open(uri);
    // but this will not work in some browsers
    // or you will not get the correct file extension    

    //this trick will generate a temp <a /> tag
    var link = document.createElement("a");    
    link.href = uri;

    //set the visibility hidden so it will not effect on your web-layout
    link.style = "visibility:hidden";
    link.download = fileName + ".csv";

    //this part will append the anchor tag and remove it after automatic click
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

Answer 2

downloadthe tag attribute anow indicates the name of the downloaded file:

https://html.spec.whatwg.org/multipage/semantics.html#attr-hyperlink-download

Answer 3

See the following link. It looks like you can download data from the client side and specify the file name.

https://code.google.com/p/download-data-uri/