8

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 ?

Ashraf Bashir
  • 9,686
  • 15
  • 57
  • 82

2 Answers2

5

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"});
Ashraf Bashir
  • 9,686
  • 15
  • 57
  • 82
  • 1
    filename isn't honored by neither firefox on ubunto or firefox on win8 – Nir O. Jan 29 '13 at 14:27
  • 1
    Does not work in IE10. `$.browser.webkit` is not true, so `window.location` is set, and IE displays 'Webpage cannot be displayed'. – David Ching Aug 29 '13 at 15:43
3

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.

Wilfred
  • 79
  • 3