具有下載屬性和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>標籤的不同行爲？

回答

相關問題