vue附件下載無法打開的問題及解決
更新時(shí)間：2024年07月27日 10:30:21 作者：王紅珠
這篇文章主要介紹了vue附件下載無法打開的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue附件下載無法打開
描述
最近做了一個(gè)excel導(dǎo)出功能，在瀏覽器地址欄直接請(qǐng)求接口可以正常下載，但在vue項(xiàng)目里請(qǐng)求接口返回值為一堆亂碼
如下圖：
代碼如下：
查閱資料后
知道需要將后端java返回的文件流處理為blob，并下載
代碼如下：
現(xiàn)在文件可以導(dǎo)出了，但是導(dǎo)出的文件無法查看
如下圖：
最終解決方案為在請(qǐng)求中添加 responseType: 'blob'
代碼如下：
const params = {
siteId: this.siteId,
beginDate: this.dateValue[0],
endDate: this.dateValue[1]
}
axios.get('/ui/sacstatistics/getStatisticsExcel', { params, responseType: 'blob' }).then((res) => {
const data = res.data
let blob = new Blob([data], {
type: 'application/vnd.ms-excel'
})
let url = window.URL.createObjectURL(blob)
let a = document.createElement('a')
a.href = url
a.download = '網(wǎng)站內(nèi)容更新統(tǒng)計(jì).xlsx' // 自定義文件名稱
a.click()
})
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+node實(shí)現(xiàn)圖片上傳及預(yù)覽的示例方法
這篇文章主要介紹了vue+node實(shí)現(xiàn)圖片上傳及預(yù)覽的示例方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
使用vue-json-viewer實(shí)現(xiàn)JSON數(shù)據(jù)可視化詳解
vue-json-viewer?是一個(gè)用于在?vue.js?應(yīng)用中展示?JSON?數(shù)據(jù)的插件,它提供了一種直觀和美觀的方式來可視化?JSON?數(shù)據(jù),下面我們來看看如何使用它進(jìn)行JSON數(shù)據(jù)可視化吧2025-01-01
Vue3-KeepAlive,多個(gè)頁面使用keepalive方式
這篇文章主要介紹了Vue3-KeepAlive，多個(gè)頁面使用keepalive方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue 使用eventBus實(shí)現(xiàn)同級(jí)組件的通訊
這篇文章主要介紹了vue 使用eventBus實(shí)現(xiàn)同級(jí)組件的通訊,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue 表單之v-model綁定單選按鈕radio的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue 地區(qū)選擇器v-distpicker的常用功能
這篇文章主要介紹了vue 地區(qū)選擇器v-distpicker的常用功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家介紹了使用vue實(shí)現(xiàn)玉兔迎春圖高亮示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了vue全局組件和局部組件的寫法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue中$nexttick,$set,$forceupdate的區(qū)別
本文主要介紹了vue中$nexttick,$set,$forceupdate的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vuex管理dialog、toast等常見全局性組件狀態(tài)時(shí)唯一性的問題解決
工作中經(jīng)常會(huì)用到類似于?dialog、toast、popover?等一些狀態(tài)提示組件，這篇文章主要介紹了Vuex管理dialog、toast等常見全局性組件狀態(tài)時(shí)唯一性的問題,需要的朋友可以參考下2022-11-11