Vue下載Excel后報(bào)錯(cuò),或打不開(kāi)的解決
更新時(shí)間：2024年02月28日 08:44:50 作者：廣州第22號(hào)吳彥祖
這篇文章主要介紹了Vue下載Excel后報(bào)錯(cuò),或打不開(kāi)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
問(wèn)題描述
后端返回excel文件流后, 在Swagger 和 PostMan上進(jìn)行下載測(cè)試均正常
下載及打開(kāi)
但是在項(xiàng)目中下載打開(kāi)卻出現(xiàn): WPS表格在試圖打開(kāi)文件時(shí)遇到錯(cuò)誤.
如圖
問(wèn)題呢，是我們?cè)诎l(fā)送請(qǐng)求時(shí)，沒(méi)有聲明返回的responseType
設(shè)置一下就好了
上代碼：
// 加上responseTape
export function getSiteElectricDataExcel(data) {
return request({
url:apiURL.newDataSite,
method: 'post',
data,
responseType: 'blob'
})
}
接收后的下載邏輯：
download(){
getSiteElectricDataExport(this.params).then(res=>{
let url = window.URL.createObjectURL(new Blob([res]));
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
// 生成時(shí)間戳
let timestamp = name+"_" + new Date().getTime();
link.download = "測(cè)試文檔.xlsx";
document.body.appendChild(link);
link.click();
})
},
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue ECharts直角坐標(biāo)系配置詳細(xì)講解
數(shù)據(jù)的重要性我們大家都知道，就算再小的項(xiàng)目中都可能使用幾個(gè)圖表展示，我最近在做項(xiàng)目的過(guò)程中也是需要用到圖表，最后選擇了echarts圖表庫(kù)2022-12-12
這篇文章主要介紹了Monorepo風(fēng)格的組件工程搭建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue項(xiàng)目中v-bind動(dòng)態(tài)綁定src路徑不成功問(wèn)題及解決
這篇文章主要介紹了Vue項(xiàng)目中v-bind動(dòng)態(tài)綁定src路徑不成功問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)
有些傳遞的參數(shù)是直接拼接到URL地址欄中的、但是為了統(tǒng)一管理、不能將傳遞的參數(shù)直接拼接到地址欄中，接下來(lái)通過(guò)本文給大家介紹Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)，感興趣的朋友一起看看吧2022-10-10
vue3中WatchEffect高級(jí)偵聽(tīng)器的實(shí)現(xiàn)
本文主要介紹了vue3中WatchEffect高級(jí)偵聽(tīng)器的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
手把手帶你使用vue+node作后端連接數(shù)據(jù)庫(kù)
為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫(kù)進(jìn)行交互的方法,所以趕緊寫(xiě)一篇這樣的文章出來(lái),下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫(kù)的相關(guān)資料,需要的朋友可以參考下2023-03-03
淺談vue項(xiàng)目,訪(fǎng)問(wèn)路徑#號(hào)的問(wèn)題
這篇文章主要介紹了淺談vue項(xiàng)目,訪(fǎng)問(wèn)路徑#號(hào)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
前端開(kāi)發(fā)需要經(jīng)常使用ECharts圖表渲染數(shù)據(jù)信息，在一個(gè)項(xiàng)目中我們經(jīng)常需要使用多個(gè)圖表，選擇封裝ECharts組件復(fù)用的方式可以減少代碼量，增加開(kāi)發(fā)效率。感興趣的可以閱讀一下本文2023-04-04
vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作
這篇文章主要介紹了vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要介紹了Vue中實(shí)現(xiàn)權(quán)限管理詳解,權(quán)限是對(duì)特定資源的訪(fǎng)問(wèn)許可，所謂權(quán)限控制，也就是確保用戶(hù)只能訪(fǎng)問(wèn)到被分配的資源,而前端權(quán)限歸根結(jié)底是請(qǐng)求的發(fā)起權(quán)，請(qǐng)求的發(fā)起可能有下面兩種形式觸發(fā),需要的朋友可以參考下2023-08-08