vue+axios 下載后端返回的文件流

blob 請求后台，后台返回文件流，利用ajax或者axios請求返回下載文件

 

1.問題描述：

首先描述一下遇到的問題，可能大家對於ajax,axios或者一些其他的請求后台的工具的應用都是，后台返回數據一般都是對象或者是其他的數據類型。但是對於一些下載文件顯的很難應對，不知道該怎么處理。

2.解決方案：

后台返回的是文件流：我們利用 Blob 解決這個問題

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

 

Blob

 

Blob 對象表示一個不可變、原始數據的類文件對象。它的數據可以按文本或二進制的格式進行讀取，也可以轉換成 ReadableStream 來用於數據操作。 

 

Blob 表示的不一定是JavaScript原生格式的數據。File 接口基於Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。

 

參考文獻： 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'

 

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