快捷導(dǎo)航

Vue如何實現(xiàn)將后端返回二進制文件在瀏覽器自動下載

更新時間：2024年11月22日 11:45:28 作者：前端白袍

Vue項目開發(fā)中,遇到界面下載功能時,前端如何實現(xiàn)將后端返回二進制文件在瀏覽器自動下載呢,本文就來和大家聊聊具體的解決方法吧

一、關(guān)鍵代碼

export function downloadFile(fileName) {
  axios({
    method: 'post',
    url: process.env.VUE_APP_BASE_API + '/cgi-bin/file',
    data: {
      'X-Token': getToken(),
      method: 'download',
      data: {
        filename: fileName
      }
    },
    responseType: 'blob'
  }).then((res) => {
    const blob = new Blob([res.data], { type: 'application/octet-stream;charset=utf-8' }); // 將二進制流轉(zhuǎn)為blob
    const a = document.createElement('a');
    const url = window.URL.createObjectURL(blob); // 創(chuàng)建新的url并指向file對象或blob對象的地址
    a.href = url;
    a.download = fileName; // 設(shè)置下載文件名
    a.style.display = 'none'; //避免數(shù)據(jù)量過大,下載時間長，看到a標(biāo)簽
    document.body.appendChild(a);
    a.click();//關(guān)鍵；調(diào)用點擊事件，(模擬a標(biāo)簽的點擊下載效果)
    document.body.removeChild(a); // 下載完成移除元素
    window.URL.revokeObjectURL(url); // 釋放內(nèi)存
  });
}

二、實現(xiàn)邏輯

首先，整個下載邏輯執(zhí)行有以下幾步：

1.前端發(fā)起請求拿到后端返回的二進制格式的數(shù)據(jù)；

2.將請求響應(yīng)體中的二進制目標(biāo)數(shù)據(jù)轉(zhuǎn)行為blob類型的數(shù)據(jù)；

3.創(chuàng)建一個a標(biāo)簽，后續(xù)的自動下載的關(guān)鍵功能就是利用a.click()實現(xiàn)；

4.利用window.URL.createObjectURL(blob)方法，利用第二步轉(zhuǎn)換的blob數(shù)據(jù)創(chuàng)建出一個url，并賦值給第三步創(chuàng)建的a標(biāo)簽的href屬性；

5.利用document.body.appendChild(a)將a標(biāo)簽添加到body標(biāo)簽中，后執(zhí)行a.click()實現(xiàn)文件下載；

6.下載完成后，要移除a標(biāo)簽，使用代碼document.body.removeChild(a)實現(xiàn)；

7.釋放第四步創(chuàng)建的url地址內(nèi)存；

8.整個下載流程結(jié)束。

三、代碼解讀

如上圖，封裝了下載文件的函數(shù)，其中axios網(wǎng)絡(luò)請求的編寫根據(jù)你實際后端定的接口來寫，主要目的就是拿到后端返回的二進制數(shù)據(jù)。其中fileName，是當(dāng)前請求一個參數(shù)，同時也作為后續(xù)要用到的文件名。需要注意的是，請求的responseType:"blob"。

二進制格式數(shù)據(jù)轉(zhuǎn)行blob數(shù)據(jù)類型的代碼；

 const blob = new Blob([res.data], { type: 'application/octet-stream;charset=utf-8' }); // 將二進制流轉(zhuǎn)為blob

創(chuàng)建a標(biāo)簽；創(chuàng)建url地址；給a標(biāo)簽href屬性賦值url地址；執(zhí)行點擊操作；最后移除a標(biāo)簽釋放url內(nèi)容。

 const a = document.createElement('a');
 const url = window.URL.createObjectURL(blob); // 創(chuàng)建新的url并指向file對象或blob對象的地址
 a.href = url;
 a.download = fileName; // 設(shè)置下載文件名
 a.style.display = 'none'; //避免數(shù)據(jù)量過大,下載時間長，看到a標(biāo)簽
 document.body.appendChild(a);
 a.click(); //關(guān)鍵；調(diào)用點擊事件，(模擬a標(biāo)簽的點擊下載效果)
 document.body.removeChild(a); // 下載完成移除元素
 window.URL.revokeObjectURL(url); // 釋放內(nèi)存

以上就是Vue如何實現(xiàn)將后端返回二進制文件在瀏覽器自動下載的詳細內(nèi)容，更多關(guān)于Vue瀏覽器自動下載的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: