具有下载属性和dataUrl href的<a>标签的不同行为？

Question

当href 是dataUrl 时尝试在<a> 标记中使用download 属性时，我在各种浏览器中遇到了奇怪的行为。

代码 sn-p：

var a = document.createElement('a');
a.href = [generated dataUrl];
a.download = filename;
console.log(a.outerHTML);
a.click();

生成的标记的示例内容（来自上面的 console.log 行）：

<a href="data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBAoA...Qwwe=" download="testfile.xlsx" ></a>
<a href="data:image/png;base64,iVBORw...ElFTkSuQmCC" download="testfile.png"></a>

控制台输出/行为：

• Chrome：文件按预期下载，png和xls都可以使用。
• FireFox：没有任何反应。未显示控制台警告/错误。

• 边缘：

  • 控制台消息：发生导航。数据：图像/png；base64，iVBORw...

  • 控制台警告： 需要 DOCTYPE。考虑添加一个有效的 HTML5 文档类型：“”。

• IE11：控制台：没有；尝试在当前窗口中“打开 data:image/png;base64,iVBORw...” url。

generated dataUrl 已经过双重检查并且没问题，Chrome 的行为也显示了这一点。

我认为<a href="data:[mime][;base64],[encoded data] ></a>" download="filename.ext" 现在几乎是一个标准的东西了。

问题：

是否有更好的（即跨浏览器兼容）方法来调用 JavaScript 生成文件的下载？

Answer 1

部分浏览器不支持 html5 下载属性。
在这种情况下，您可以使用 filesaver.js

if(typeof link.download !== 'undefined'){
  //use <a> download
}
else{
  blob = toBlob(imageURIData);
  saveAs(blob, name);//use filesaver.js
}