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實(shí)現(xiàn)pdf預(yù)覽功能的方法
許多朋友想要材料上傳之后點(diǎn)擊預(yù)覽實(shí)現(xiàn)在瀏覽器上預(yù)覽的效果,所以本文將給大家介紹如何使用vue實(shí)現(xiàn)pdf預(yù)覽功能,文中有實(shí)現(xiàn)代碼,有需要的朋友可以參考閱讀下2023-08-08
vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁面title
今天小編就為大家分享一篇vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁面title，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-cli axios請(qǐng)求方式及跨域處理問題
這篇文章主要介紹了vue-cli axios請(qǐng)求方式及跨域處理問題,文中還給大家提到了vue中axios解決跨域問題和攔截器使用，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03
這篇文章主要給大家介紹了關(guān)于vue解決跨域問題的幾種方式,跨域跨域報(bào)錯(cuò)是前端開發(fā)中非常經(jīng)典的一個(gè)錯(cuò)誤,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue獲取參數(shù)的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue 組件開發(fā)原理與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue 組件開發(fā)原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件開發(fā)的原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2019-11-11
Vue過濾器（filter）實(shí)現(xiàn)及應(yīng)用場景詳解
在Vue中使用過濾器（Filters）來渲染數(shù)據(jù)是一種很有趣的方式,下面這篇文章主要給大家介紹了關(guān)于Vue過濾器（filter）實(shí)現(xiàn)及應(yīng)用場景的相關(guān)資料,需要的朋友可以參考下2021-06-06
今天小編就為大家分享一篇vue 實(shí)現(xiàn)特定條件下綁定事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決vue項(xiàng)目,npm run build后,報(bào)路徑錯(cuò)的問題
這篇文章主要介紹了解決vue項(xiàng)目,npm run build后,報(bào)路徑錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue動(dòng)態(tài)子組件的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了vue動(dòng)態(tài)子組件的兩種實(shí)現(xiàn)方式,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09