Vue導(dǎo)出Excel,后端返回的文件流,前端接收后無法打開文件的解決
更新時間：2025年12月03日 15:05:05 作者：Z獸獸
在使用Vue導(dǎo)出Excel時,如果后端返回文件流,前端接收后無法打開文件,通常是由于響應(yīng)類型設(shè)置不正確導(dǎo)致的,通過設(shè)置axios請求接口時的響應(yīng)類型為`blob`,并使用blob轉(zhuǎn)換文件流,可以解決文件損壞無法打開的問題
Vue導(dǎo)出Excel,后端返回的文件流,前端接收后無法打開文件
在項目中導(dǎo)出excel時，提示文件損壞無法打開，但后端測試接口是沒問題的，那么就前端看問題了。
1. axios請求接口時設(shè)置響應(yīng)類型字段
responseType: 'blob'
2. 使用blob轉(zhuǎn)換文件流
axios({
method: 'post',
url: '/download',
params: {id}, // URL 參數(shù)
data: JSON.stringify(bodyData), //body請求體
headers: {
'Authorization': userinfo.token,
"Content-Type":"application/json",
},
responseType: "blob", //設(shè)置為blob，不然導(dǎo)出的Excel無法打開
timeout: 60000, // 超時時間(毫秒)
baseURL: `${VITE_JAVASERVER_HOST}` //基礎(chǔ)URL
})
.then(async(response) => {
const fileName = 'xxx';
const blob = await new Blob([response.data])
// 創(chuàng)建下載鏈接
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = fileName; // 設(shè)置下載文件名（可自定義）
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url); // 釋放內(nèi)存
})
.catch((error) => {
console.error("Error:", error);
});總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Node實現(xiàn)商品列表的分頁、排序、篩選，添加購物車功能詳解
這篇文章主要介紹了Vue+Node實現(xiàn)商品列表的分頁、排序、篩選，添加購物車功能,結(jié)合實例形式分析了vue.js前臺商品分頁、排序、篩選等功能及后臺node.js處理技巧,需要的朋友可以參考下2019-12-12
在iview+vue項目中使用自定義icon圖標(biāo)方式
這篇文章主要介紹了在iview+vue項目中使用自定義icon圖標(biāo)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3+elementPlus項目支持生成、設(shè)置默認(rèn)附件方式
這篇文章主要介紹了vue3+elementPlus項目支持生成、設(shè)置默認(rèn)附件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了vue與django集成打包的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了Vue.js仿微信聊天窗口展示組件功能,需要的朋友可以參考下2017-08-08
在vue3中,?提供了一個?useAttrs?的方法它接收到的參數(shù)一?prop中可以接收到的數(shù)據(jù)是基本一樣的如果我們想自已寫一個組件,?把?elementPlus?中的期中一個組件封裝一下,這篇文章主要介紹了vue3中的useAttrs和props的區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
詳解關(guān)于element el-button使用$attrs的一個注意要點
這篇文章主要介紹了詳解關(guān)于element el-button使用$attrs的一個注意要點,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
下面小編就為大家分享一篇vue實現(xiàn)在表格里,取每行的id的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03