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

我在尝试在<a>标记中使用download属性时遇到各种浏览器中的奇怪行为，当href为dataUrl时。具有下载属性和dataUrl href的<a>标签的不同行为？

代码片断：

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：什么都没有发生。没有显示控制台警告/错误。
EDGE：
- 控制台消息：导航发生。 data：image/png; base64，iVBORw ...
- 控制台警告： DOCTYPE预计。考虑添加一个有效的HTML5文档类型：“”。
IE11：控制台：无;尝试在当前窗口中“打开数据：image/png; base64，iVBORw ...”url。

generated dataUrl经过了双重检查，并且很好，Chrome浏览器的行为也显示了这一点。

我认为<a href="data:[mime][;base64],[encoded data] ></a>" download="filename.ext"到目前为止是一个标准的东西。

问：

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

来源

2017-08-24 bocko

看一看[FileSaver.js（https://github.com/eligrey/FileSaver.js/） – Satpal

是，使用FileSaver。或者阅读关于下载方法的说明：https：//developer.mozilla.org/en-US/docs/Web/HTML/Element/a – WaldemarIce

对于受支持的标签，请使用：https：// caniuse.com /＃search = download' 。这非常有用。也适用于JavaScript标记'https：// caniuse.com /＃search = createElement' – pr0cz

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

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

来源

2017-08-24 13:03:17

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

回答

相关问题