【问题标题】:Anchor's Download Property is not working on some pages (Gmail)?Anchor 的下载属性在某些页面(Gmail)上不起作用?
【发布时间】:2012-12-17 10:19:30
【问题描述】:

我想在某些页面中插入这个 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 中,效果很好!
但是,如果我在 Gmail 页面中执行相同操作,生成的文件不会命名为“somedata.csv”并且扩展名会丢失“csv”!

我在本地文件、上传到本地主机的文件以及许多外部网站页面中都试过这个,除了 Gmail 页面之外,它都适用。

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

【问题讨论】:

  • 根据此页面,扩展位于 href 的末尾,不在下载属性内:davidwalsh.name/download-attribute
  • 但在我的情况下,href 的值是数据而不是文件。
  • Facebook页面也是同样的问题,下载文件名属性被忽略了

标签: javascript html csv download anchor


【解决方案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"});

【讨论】:

  • ubunto 上的 firefox 或 win8 上的 firefox 都不支持文件名
  • 在 IE10 中不起作用。 $.browser.webkit不正确,所以设置了window.location,IE显示'网页无法显示'。
【解决方案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();

我创建了一个临时链接并在其上触发点击事件。 但不确定其他浏览器是否可以正常工作。

【讨论】:

猜你喜欢
  • 2013-04-03
  • 2018-06-14
  • 1970-01-01
  • 2014-08-09
  • 2019-06-14
  • 2015-06-04
  • 1970-01-01
  • 2012-04-13
  • 2016-12-04
相关资源
最近更新 更多