我們先來(lái)看一份代碼

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);
}; 復(fù)制代碼

上面的代碼的意思是先用blob把字符串內(nèi)容轉(zhuǎn)變成blob鏈接，然后利用a標(biāo)簽自帶的下載功能把內(nèi)容下載下來(lái)。

以上代碼在Chrome、Firefox、Safari、360、EdgeHtml瀏覽器中，均可以成功下載文件，但是在Edge中，會(huì)報(bào)錯(cuò)。如下：

造成以上原因是在Edge中使用Blob生成的是不帶域名的blob鏈接，如下：

而chrome等瀏覽器生成的是帶域名的，如下：

所以在edge下通過(guò)a標(biāo)簽的href來(lái)下載是不行的。

解決方法

使用 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);
};