原始代碼，是先創(chuàng)建一個(gè)a標(biāo)簽，然后在生成一個(gè)url地址，在設(shè)置下載屬性，添加到DOM節(jié)點(diǎn)中，操作點(diǎn)擊事件，完了之后在移除a標(biāo)簽節(jié)點(diǎn)。

核心代碼如下：

   const blob = new Blob([res.data]);
   const a = document.createElement('a');
   a.href = window.URL.createObjectURL(blob);
   a.download = fileName;
   document.body.appendChild(a);
   a.click();
   document.body.removeChild(a);

使用IE11瀏覽器導(dǎo)出報(bào)錯(cuò)拒絕訪問(wèn)如下

image.png

在控制臺(tái)看了一下生成的節(jié)點(diǎn)，發(fā)現(xiàn)a標(biāo)簽已經(jīng)生成了，卻發(fā)現(xiàn)a標(biāo)簽的下載屬性未添加, 未實(shí)現(xiàn)點(diǎn)擊這一動(dòng)作。

<a href="blob:5567C153-E677-4F45-9DB8-18C407E00880"></a>

使用 window.navigator.msSaveBlob(blob, defaultName) 代碼，去保存下載文件。

解決兼容性處理代碼如下

        exportTable () {
            this.loading = true;
            let qusMethod = this.method == 'get' ? 'getDownAjax' : 'postAjax';  // 請(qǐng)求方式判斷(只考慮get和post兩種方式)
            http[qusMethod](
                this.url,
                this.params,
                { responseType: 'blob'}
            ).then(res => {
                if(res.status === 200) {
                    this.loading = false;
                    const blob = new Blob([res.data]);
                    let ext = this.ext  || 'xlsx';
                    let fileName = `${this.filename}-${moment().format('YYYYMMDDHHmmss')}.${ext}`;
                    // ie兼容處理
                    if (window.navigator.msSaveBlob) {
                        window.navigator.msSaveBlob(blob, fileName);
                    } else {
                        const a = document.createElement('a');
                        a.href = window.URL.createObjectURL(blob);
                        a.download = fileName;
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                    }
                } else {
                    this.$message.error("請(qǐng)刷新頁(yè)面重試！");
                }

            }).catch(error => {
                console.log(error);
            })
        }