我們先來看一份代碼
function download(content, filename) {
// 字符內(nèi)容轉(zhuǎn)變成blob地址
var blob = new Blob([content]);
var eleLink = document.createElement('a');
eleLink.download = filename;
$(eleLink).css('display', 'none');
eleLink.href = URL.createObjectURL(blob);
document.body.appendChild(eleLink);
eleLink.click();
document.body.removeChild(eleLink);
};
上面的代碼的意思是先用blob把字符串內(nèi)容轉(zhuǎn)變成blob鏈接，然后利用a標(biāo)簽自帶的下載功能把內(nèi)容下載下來。
以上代碼在Chrome、Firefox、Safari、360、EdgeHtml瀏覽器中，均可以成功下載文件，但是在Edge中，會報(bào)錯。如下：
<center style="color:red">SCRIPT: 拒絕訪問</center>
造成以上原因是在Edge中使用Blob生成的是不帶域名的blob鏈接，如下：
<center style="color:red">blob:00F0B45-DD4E-4F4F-9B15-000368F15E20</center>
而chrome等瀏覽器生成的是帶域名的，如下：
<center style="color:red">http://xxx.xxx.biz/86e01467-6654-4b74-98b3-ca25f396bc2f</center>
所以在edge下通過a標(biāo)簽的href來下載是不行的。
解決方法
使用 window.navigator.msSaveOrOpenBlob(blob, filename)，代替 window.URL.createObjectURL。
上代碼：
function download(content, filename) {
// 字符內(nèi)容轉(zhuǎn)變成blob地址
var blob = new Blob([content]);
if('msSaveOrOpenBlob' in navigator){
window.navigator.msSaveOrOpenBlob(blob, filename);
return;
}
var eleLink = document.createElement('a');
eleLink.download = filename;
$(eleLink).css('display', 'none');
eleLink.href = URL.createObjectURL(blob);
document.body.appendChild(eleLink);
eleLink.click();
document.body.removeChild(eleLink);
};
