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

11,714

Solution 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"});

Solution 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.

Share:
11,714
Ashraf Bashir
Author by

Ashraf Bashir

Senior Full Stack Software Developer, and Tech Team Lead in Booking.com

Updated on June 19, 2022

Comments

  • Ashraf Bashir
    Ashraf Bashir almost 2 years

    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 ?