Anchor's Download Property is not working on some pages (Gmail)?

问题

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 ?

回答1:

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.com/");
    $('<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"});

回答2:

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.

来源：https://stackoverflow.com/questions/13912198/anchors-download-property-is-not-working-on-some-pages-gmail

标签

javascript

html

csv

download

anchor