解決在微軟Edge瀏覽器下沒法使用createObjectURL生成的blob連接下載的問題

時間 2019-11-09

標籤解決微軟 edge 瀏覽器沒法使用 createobjecturl 生成 blob 連接下載問題欄目 Microsoft 简体版

原文原文鏈接

咱們先來看一份代碼css

function download(content, filename) {
    // 字符內容轉變成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把字符串內容轉變成blob連接，而後利用a標籤自帶的下載功能把內容下載下來。chrome

以上代碼在Chrome、Firefox、Safari、360、EdgeHtml瀏覽器中，都可以成功下載文件，可是在Edge中，會報錯。以下：瀏覽器

<center style="color:red">SCRIPT: 拒絕訪問</center>app

形成以上緣由是在Edge中使用Blob生成的是不帶域名的blob連接，以下：code

<center style="color:red">blob:00F0B45-DD4E-4F4F-9B15-000368F15E20</center>rem

而chrome等瀏覽器生成的是帶域名的，以下：字符串

<center style="color:red">http://xxx.xxx.biz/86e01467-6...;/center>get

因此在edge下經過a標籤的href來下載是不行的。域名

解決方法

使用 window.navigator.msSaveOrOpenBlob(blob, filename)，代替 window.URL.createObjectURL。io

上代碼：

function download(content, filename) {
    // 字符內容轉變成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);
};