vue 解決 post請求下載文件，下載的文件損壞打不開，結果亂碼

axios.post('xxx', {
    responseType: 'blob' //指定返回數據的格式為blob
})
.then(response => {
    console.log(response);//把response打出來，看下圖
    let url = window.URL.createObjectURL(response.data);
    console.log(url)
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.href = url;
            a.download = '2.xls';
            a.click();
            window.URL.revokeObjectURL(url);
})
.catch(err => {
    console.log(`接口調用失敗`);
    
    console.log(err);
})

 

現象：

1。postman請求下載文件正常

2。js代碼在別的項目中下載正常

3。js代碼在本項目中下載的excel打開提示文件損壞。

原因：

　　項目中前期引入了 mockjs 進行模擬數據請求。導致請求結果被mock攔截，修改了返回數據類型。

 

下面是mock攔截修改后的返回對象，data變成string類型，顯示為亂碼。返回的請求為MockXMLHttpRequest類型

 

注釋到 mockjs的引用后，data類型為正常的blob類型

 

 

結果發現，
1.谷歌瀏覽器下載，office打不開。
2.QQ瀏覽器谷歌內核下載，postman下載，office打開提示修復，點擊確定，正常顯示數據。
3.谷歌瀏覽器下載，wps正常打開，也沒有修復提示。

經過分析，是后台返回的數據流里面帶有接口請求狀態等信息，讓后台去掉后就正常了。

 

 

 

希望看見這個隨筆的人能解決問題，