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