blob 請求後臺，後臺返回檔案流，利用ajax或者axios請求返回下載檔案

1.問題描述：

首先描述一下遇到的問題，可能大家對於ajax,axios或者一些其他的請求後臺的工具的應用都是，後臺返回資料一般都是物件或者是其他的資料型別。但是對於一些下載檔案顯的很難應對，不知道該怎麼處理。

2.解決方案：

後臺返回的是檔案流：我們利用 Blob 解決這個問題

首先簡單介紹一下什麼是blob。

Blob

Blob 物件表示一個不可變、原始資料的類檔案物件。它的資料可以按文字或二進位制的格式進行讀取，也可以轉換成 ReadableStream 來用於資料操作。 

Blob 表示的不一定是JavaScript原生格式的資料。

參考文獻： https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

話不多說直接上正題： 

大家都關心的問題，知道了用Blob這個東西解決，那麼我們應該怎麼寫程式碼呢。

直接附上vue 框架中的axios寫法，有興趣的同學可以自己探索別的技術中的寫法。

axios({
          method: 'post',
          url: process.env.VUE_APP_BASE_API + '/system/eventWord/ExportEvent',
          headers: {
            
 
'Content-type': 'application/json;charset:utf-8;',
            'accessToken': getToken() //認證或授權
          },
          data: {strGuid: this.eventId},
          responseType: 'blob'
        }).then((res) => {
          const blob = new Blob([res.data]);
          const fileName = '事件詳情.docx';
          
 
if ('download' in document.createElement('a')) { // 非IE下載
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href);// 釋放URL 物件
            document.body.removeChild(elink);
            this.loading = false;
          } else { // IE10+下載
            navigator.msSaveBlob(blob, fileName);
            this.loading = false;
          }
        }).catch((err) => {
          console.log(err);
          this.loading = false;
        });

程式碼說明：

responseType: 'blob'

這個東西必須加，否則可能會導致下載的內容亂碼。

具體這個代表什麼：

參考文獻：http://www.axios-js.com/zh-cn/docs/index.html

表示伺服器響應的資料型別，可以是

'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

當然裡面的東西，請大家自己參考實際當中自行修改。