vue總結_下載流文件

vue項目中接受后台傳過來的流文件會出現亂碼

后台response的內容如下：

在參考各位大大資料的基礎下，做了點總結。

具體處理方法如下

1、方法一：通過插件https://github.com/kennethjiang/js-file-download

      在需要使用接受文件的地方

//  需要安裝cnpm install js-file-download --save     var fileDownload = require("js-file-download");

然后在接口部分

// 導出文件流
  fetchExportBill(url, data = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url,data,{ responseType: 'arraybuffer'}).then(res => {
      //resolve(res)
      //以下fileName是取后台的文件名,如果沒有'content-disposition',可以直接略過這一步,自己定：如fileName="xxx.xlsx"。
 　　  let fileName = res.headers['content-disposition'].match(/fushun(\S*)xls/)[0];
　　　 fileDownload(res.data,fileName);
      }).catch(error => {
        if (data.Vue) {
          data.Vue.$message.error('系統異常');
        }
        reject(null, e);
      })
    })
  },

2、方法二:通過Blob實現

// 導出文件流
  fetchExportBill(url, data = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url,data,{ responseType: 'arraybuffer'}).then(res => {
      //resolve(res)
      let blob = new Blob([res], {type: "application/vnd.ms-excel"}); 
　　let objectUrl = URL.createObjectURL(blob); 
　　 window.location.href = objectUrl; 
      }).catch(error => {
        if (data.Vue) {
          data.Vue.$message.error('系統異常');
        }
        reject(null, e);
      })
    })
  },

 注：Blob對象的type為MIME類型，具體參考 vue總結_MIME

        Blob具體使用方式參考 :MDN的Blo 

Filedownload     詳細 X

網絡釋義

Filedownload: 資料下載

ForumImages - FileDownload - Emoticons: 下載頁面

 

 

blob   [blɒb]   blob&type=1 詳細 X

基本翻譯

n. 一滴；一抹；難以名狀的一團

vt. 弄臟；把…做錯

vi. 得零分；弄錯

網絡釋義

BLOB: 二進制大對象

blob volume: 油滴體積

Key BLOB: 密鑰塊