vue附件下載無法打開的問題及解決
更新時間：2024年07月27日 10:30:21 作者：王紅珠
這篇文章主要介紹了vue附件下載無法打開的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue附件下載無法打開
描述
最近做了一個excel導(dǎo)出功能，在瀏覽器地址欄直接請求接口可以正常下載，但在vue項目里請求接口返回值為一堆亂碼
如下圖：
代碼如下：
查閱資料后
知道需要將后端java返回的文件流處理為blob，并下載
代碼如下：
現(xiàn)在文件可以導(dǎo)出了，但是導(dǎo)出的文件無法查看
如下圖：
最終解決方案為在請求中添加 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)計.xlsx' // 自定義文件名稱
a.click()
})
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
許多朋友想要材料上傳之后點擊預(yù)覽實現(xiàn)在瀏覽器上預(yù)覽的效果,所以本文將給大家介紹如何使用vue實現(xiàn)pdf預(yù)覽功能,文中有實現(xiàn)代碼,有需要的朋友可以參考閱讀下2023-08-08
vue 實現(xiàn)路由跳轉(zhuǎn)時更改頁面title
今天小編就為大家分享一篇vue 實現(xiàn)路由跳轉(zhuǎn)時更改頁面title，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue-cli axios請求方式及跨域處理問題,文中還給大家提到了vue中axios解決跨域問題和攔截器使用，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
這篇文章主要給大家介紹了關(guān)于vue解決跨域問題的幾種方式,跨域跨域報錯是前端開發(fā)中非常經(jīng)典的一個錯誤,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue獲取參數(shù)的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue 組件開發(fā)原理與實現(xiàn)方法,結(jié)合實例形式詳細分析了vue.js組件開發(fā)的原理與實現(xiàn)方法,需要的朋友可以參考下2019-11-11
Vue過濾器（filter）實現(xiàn)及應(yīng)用場景詳解
在Vue中使用過濾器（Filters）來渲染數(shù)據(jù)是一種很有趣的方式,下面這篇文章主要給大家介紹了關(guān)于Vue過濾器（filter）實現(xiàn)及應(yīng)用場景的相關(guān)資料,需要的朋友可以參考下2021-06-06
今天小編就為大家分享一篇vue 實現(xiàn)特定條件下綁定事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決vue項目,npm run build后,報路徑錯的問題
這篇文章主要介紹了解決vue項目,npm run build后,報路徑錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue動態(tài)子組件的兩種實現(xiàn)方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09