I want to insert this HTML element in some pages:

<a download="somedata.csv"
   id="downloadLink"
   href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"
>
    Click Me
</a>

In all pages, when I change the dom via plugin or manually in elements inspector, to include this element to page's dom, it works great !
But, if I do the same in Gmail pages, the file generated is not named "somedata.csv" and the extension is lost "csv" !

I tried this in local file, in file uploaded to localhost, and in many external website pages, it works in all except for Gmail pages.

Why it doesn't work in Gmail pages ? And how to fix this ?

I want to insert this HTML element in some pages:

<a download="somedata.csv"
   id="downloadLink"
   href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"
>
    Click Me
</a>

In all pages, when I change the dom via plugin or manually in elements inspector, to include this element to page's dom, it works great !
But, if I do the same in Gmail pages, the file generated is not named "somedata.csv" and the extension is lost "csv" !

I tried this in local file, in file uploaded to localhost, and in many external website pages, it works in all except for Gmail pages.

Why it doesn't work in Gmail pages ? And how to fix this ?

• javascript
• html
• csv
• download
• anchor

• According to this page the extenstion goes on the end of the href not within the download property: davidwalsh.name/download-attribute – Billy Moat Commented Dec 17, 2012 at 10:42
• But the href's value, in my case, is data not a file. – Ashraf Bashir Commented Dec 17, 2012 at 11:25
• it's the same problem on Facebook pages too, the download filename attribute is ignored – user280109 Commented Feb 24, 2016 at 2:25

2 Answers 2

For those who are interested, I solved it using Javascript/Ajax, here's the solution:

Here's the function:

var downloadDataURI = function($, options) {
    if(!options)
        return;
    $.isPlainObject(options) || (options = {data: options});
    if(!$.browser.webkit) 
        window.location = options.data;
    options.filename || (options.filename = "download." + options.data.split(",")[0].split(";")[0].substring(5).split("/")[1]);
    options.url || (options.url = "http://download-data-uri.appspot./");
    $('<form method="post" action="'+options.url+'" style="display:none"><input type="hidden" name="filename" value="'+options.filename+'"/><input type="hidden" name="data" value="'+options.data+'"/></form>').submit().remove();
}

And here's how to call it:

downloadDataURI($, {filename: "test.csv",data:"data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"});

In Chrome with JQuery, I try this approach:

var dataUri = "data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"
var filename = "somedata.csv"

$("<a download='" + filename + "' href='" + dataUri + "'></a>")[0].click();

I created a temp link and trigger click event on it. but not sure if other browsers work or not.