<a> 标签上的下载属性在 Chrome 中不起作用答案

【问题标题】：download attribute on <a> tag doesn't work in Chrome<a> 标签上的下载属性在 Chrome 中不起作用
【发布时间】：2014-05-30 19:40:02
【问题描述】：

当我点击导出按钮时，chrome 将下载一个名为“下载”的文件，其类型为“文档”。如果我手动添加扩展名（.xls），则下载文件的内容是正确的。我想知道下载属性在这种情况下如何工作。这是我的代码：

a = document.createElement("a");
var data_type = 'data:application/vnd.ms-excel,';
var table_div = document.getElementById('table');
var table_html = table_div.outerHTML.replace(/ /g, '%20');
a.download = "excel.xls";
a.href = data_type + table_html;
a.click();

另外，我试过不同的电脑后，有的可以下载正确名称的文件，有的和我的一样。并且此代码不适用于所有机器上的 Firefox。

【问题讨论】：

文件下载应该在服务器端进行管理。您应该调用控制器函数或 php 文件并从该位置管理标头。
感谢@sdespont，但我想知道我是否可以直接从页面生成excel文件，因为所有数据都已经显示在页面上。这是一个正确的方法吗？
很确定“下载”属性是特定于 Chrome 的 - FF 和 IE 不会尊重它。
题外话：我认为你应该使用encodeURIComponent(table_div.outerHTML)，这样你就可以确定所有需要编码的东西都是真正的编码。或者，您可以创建一个 blob 和 blob URL（对于大文件可能更好）。

标签： javascript html google-chrome export-to-excel

【解决方案1】：

这应该可以工作（我之前对页内生成的文件使用了基本相同的代码，并且它已经工作了），但目前在最新版本的 Chrome (https://code.google.com/p/chromium/issues/detail?id=366370) 上存在一个关于“下载" 属性被忽略。根据 W3C 的建议，似乎最新版本的 Chrome 故意忽略了跨域链接上的下载属性（我认为这是一个愚蠢的建议，但仍然是一个建议）。 Chrome 可能将“数据：”URL 视为跨域，因此忽略了您的下载属性；如果是这样，您几乎无能为力。

编辑：看起来目前还有另一个专门针对数据 URI 的错误：https://code.google.com/p/chromium/issues/detail?id=373182

所以，是的，您的代码是正确的；这是 Chrome 中的一个错误。

【讨论】：

非常感谢！ @Logan R. Kearsley 这正是我所怀疑的。所以我会找到其他方法来做到这一点