vue axios 請求二進制流excel文件，response亂碼

圖片描述問題：當(dāng)axios發(fā)起post請求，后端返回的是二進制流excel文件，前臺獲取response時出現(xiàn)亂碼問題，求解決方法

圖片描述
response返回亂碼數(shù)據(jù)。

 downloadModel(){
        // window.location.href = window.open(axios.defaults.baseURL +'/settlement/payableCheck/download/template');
        // let downLoadModel = window.open();

        // let fileDownload = require('js-file-download');
        this.$post('/settlement/payableCheck/download/template',{params:null},{responseType: 'arraybuffer'}).then(res => {
        // this.$get('/settlement/payableCheck/download/template').then(res => {
          console.log(res);
          // let fileName = res.headers['content-disposition'].match(/fushun(\S*)xls/)[0];
          // fileDownload(res,fileName);

          let blob = new Blob([res], {type: "application/vnd.ms-excel;charset=utf-8"});

          // let objectUrl = URL.createObjectURL(blob);
          // window.location.href = objectUrl;

          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = "對賬模板";
          link.click();

        }).catch((e) => {
          this.$message.warning('下載失敗');
          console.log(e);
        })
      },

圖片描述

強行text打開還是亂碼

回答

編輯回答

萌吟

response亂碼不是很正常嗎？你強行用text打開一下你的excel看看是不是亂碼？你看下載文件就行了，不用管response的文本輸出。

2017年2月12日 20:09

編輯回答

祈歡

最后一次更新：

既然樓主采納了我的答案，但有些問題，我還是要仔細說說，為此我寫了如下一段代碼,為了方便，我是直接下載一個存在在服務(wù)器根目錄下的xls。

axios.get('http://127.0.0.1/1.XLS', {
                responseType: 'blob' //指定返回數(shù)據(jù)的格式為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(`接口調(diào)用失敗`);
               
                console.log(err);
            })

圖片描述
這個圖可以明顯的看到，返回的response在的data 是一個blob Object

createObjectURL 函數(shù)，接受的參數(shù)是blob 類型或者是File 類型

所以說，我想創(chuàng)建的URL 對象只需要如下代碼

 let url = window.URL.createObjectURL(response.data);

因為response.data 已經(jīng)是一個blob Object 了，完全不需要再像樓主在評論在回復(fù)我的解決方案中哪樣，用 let url = window.URL.createObjectURL(new Blob([res.data]))載入，哪為什么這樣的代碼解決了樓主的問題呢，

個人猜想原因：
1.最有可能的原因，樓主請求的服務(wù)端，強制返回的就是二進制流，也就是說 responseType: 'blob' 根本沒有作用，因為設(shè)置responseType也需要服務(wù)端兼容的，并不是你指定什么，服務(wù)端就一定會按照你的指定來返加
2.樓主在axios設(shè)置了攔截器，修改了返回數(shù)據(jù)，但這個可能性應(yīng)該不大

樓主修改問題后第一次編輯如下：