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