Question

我想在某些页面中插入此HTML元素：

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

在所有页面中，当我通过插件更改dom或在元素检查器中手动更改dom时，要将此元素包含在页面的dom中，它的效果非常好！
但是，如果我在Gmail页面中执行相同操作，则生成的文件不会命名为“somedata.csv”，并且扩展程序会丢失“csv”！

我在本地文件中尝试了这个，在上传到localhost的文件中，在许多外部网页中，除了Gmail页面之外，它都适用。

为什么它在Gmail页面中不起作用？以及如何解决这个问题？

Answer 1

对于那些感兴趣的人，我使用Javascript / Ajax解决了它，这是解决方案：

这是功能：

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();
}

以下是如何称呼它：

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

Answer 2

在使用JQuery的Chrome中，我尝试了这种方法：

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();

我创建了一个临时链接并触发了点击事件。但不确定其他浏览器是否有效。

Anchor的下载属性在某些页面（Gmail）上无效？

2 个答案: