快捷導(dǎo)航

vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式

更新時間：2024年05月29日 09:42:45 作者：myl0808

這篇文章主要介紹了vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue axios利用blob實(shí)現(xiàn)文件瀏覽器下載

在vue中，使用axios向后臺請求數(shù)據(jù)，但只接收返回的response并不能實(shí)現(xiàn)瀏覽器下載，所以需要借助于blob實(shí)現(xiàn)文件的瀏覽器下載，分為兩種情況，一種是get請求，使用params，另一種使用post請求，參數(shù)使用formdata傳參

情景1：get請求，params傳參

url與參數(shù)部分代碼：

this.axios.get('/api/downloadConfig', {
   params:{oid:oid},
   responseType:'blob',
 })

blob具體下載實(shí)現(xiàn)代碼

 if(res.status === 200){
  const content = res.data;
  const blob = new Blob([content]);
  if('download' in document.createElement('a')){
    //非IE下載
    const a = document.createElement('a');
    a.download = fileName;
    a.style.display = 'none';
    a.href = window.URL.createObjectURL(blob);
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(a.href);
    document.body.removeChild(a);
  }else{
    //IE10+下載
    if(typeof window.navigator.msSaveBlob !== 'undefined'){
      window.navigator.msSaveBlob(blob, _this.selected);
    }else{
      let URL = window.URL || window.webkitURL;
      let downloadUrl = URL.createObjectURL(blob);
      window.location = downloadUrl;
  }
 }

情景2：post請求，formdata傳參

url與參數(shù)部分代碼：

this.axios.post('/api/downloadConfig', form, {responseType:'blob'})

blob具體下載實(shí)現(xiàn)代碼與上文get請求一致

vue axios實(shí)現(xiàn)下載文件及responseType:blob注意事項(xiàng)

需要使用axios和js-file-download組件

npm install js-file-download --save
npm install axios --save

import fileDownload from 'fileDownload'; // 引入fileDownload
import axios from 'axios'; // 引入axios 
 
axios({
    method: 'get',
    url: 'xxxxxxx',
    responseType: 'blob'
}).then(res => {
    if(res.status == 200){
      // res.headers['content-disposition'].substring(20)表示從響應(yīng)頭中獲取文件名
      fileDownload(res.data,res.headers['content-disposition'].substring(20));
    }else { // 下載文件失敗，解析json格式信息
      let that = this;
      var fileReader = new FileReader();
      fileReader.readAsText(res.data); // 按字節(jié)讀取文件內(nèi)容，結(jié)果為文件的二進(jìn)制串
      fileReader.onload = ()=>{
          that.$notify.error(fileReader.result);
      }
    } 
})

注意事項(xiàng)：

responseType:blob表示服務(wù)器返回的響應(yīng)類型是二進(jìn)制流，一般用于文件、視頻下載等場景。

正常情況下后端返回二進(jìn)制數(shù)據(jù)，當(dāng)后端服務(wù)器出錯時，往往會以json形式返回錯誤信息，例如{"code":500,"msg":"未知異常"}。

因?yàn)樵O(shè)置了blob類型，axios會強(qiáng)制把數(shù)據(jù)轉(zhuǎn)為blob，導(dǎo)致json格式的響應(yīng)沒辦法正常解析，需要使用FileReader對象來處理，F(xiàn)ileReader是一種異步讀取文件機(jī)制。

FileReader提供了如下方法，大家根據(jù)需要自行選擇。