Vue不能下載xls以及文件亂碼問題解決
更新時間：2022年04月18日 15:39:55 作者：Shang
最近工作中遇到了一些問題,通過查找相關(guān)資料終于找到了相關(guān)的解決方法,這篇文章主要給大家介紹了關(guān)于Vue不能下載xls以及文件亂碼問題解決的相關(guān)資料,需要的朋友可以參考下
發(fā)現(xiàn)問題
老大要讓我實現(xiàn)下載xls文件的功能，我想了想：我好像不太會耶！
但是我們之前寫的一個頁面有一個下載xls的功能，那我就CV大法，嘿嘿嘿。
當我點擊下載按鈕的那一刻，控制臺紅了...，心想MMP
一樣的代碼不行，那個就能下載，我CV后變質(zhì)了？
報錯原因：TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
我看了看網(wǎng)絡(luò)請求，老大說傳過來的數(shù)據(jù)沒問題，可能是數(shù)據(jù)太大？
我看了好多好多好多好多博客，他們解決方案是對傳過來的數(shù)據(jù)進行Blob處理后，那咱們試一試吧！
let blob = new Blob([res], {type: 'application/vnd.ms-excel'})
const url = window.URL.createObjectURL(res)唉？可以下載了！但是表格內(nèi)的數(shù)據(jù)都是亂碼......
我這一想不行呀！都來看到某位掘友的博客，他的做法是在請求頭加responseType: 'blob'
最終我成功的解決了這個問題，嗚嗚嗚...
總結(jié)
在做大數(shù)據(jù)文件下載時，在請求頭中加入 responseType: 'blob'，就可以解決下載和文件內(nèi)亂碼的問題了。
下面附上代碼
// 文件下載 —— <a> 標簽方法下載
download(row.logUserId).then(res => {
if (!res) {return}
// 這里的blob處理可做可不做，我試了下，不做blob也可以下載且不亂碼
let blob = new Blob([res], {type: 'application/vnd.ms-excel'})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
// download 屬性定義了下載鏈接的地址而不是跳轉(zhuǎn)路徑
link.setAttribute('download', row.reportExcelLog.fileName+'.xls')
document.body.appendChild(link)
link.click()
window.URL.revokeObjectURL(link.href) //釋放url
document.body.removeChild(link)//釋放標簽
})// 請求
export function download(logUserId) {
return request({
url: prefix + '/download/by/log/user/id',
method: 'post',
data: {
logUserId
},
// 這一步至關(guān)重要
responseType: 'blob'
})
}到此這篇關(guān)于Vue不能下載xls以及文件亂碼問題解決的文章就介紹到這了,更多相關(guān)Vue下載xls及文件亂碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
最近在做一個vue的項目,碰到一點關(guān)于Map鍵值對傳參的問題,下面這篇文章主要給大家介紹了關(guān)于Vue中如何使用Map鍵值對傳參的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue spa應(yīng)用中的路由緩存問題與解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細介紹了Vue.js組件tree實現(xiàn)無限級樹形菜單代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置
這篇文章主要為大家介紹了Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了淺入深出Vue之自動化路由，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue項目中v-model和sync的區(qū)別及使用場景分析
在Vue項目中,v-model和.sync是實現(xiàn)父子組件雙向綁定的兩種方式,v-model主要用于表單元素和子組件的雙向綁定,通過modelValue和update:modelValue實現(xiàn),.sync修飾符則用于同步prop值,適合在子組件內(nèi)更新父組件prop值的場景,通過update:propName事件實現(xiàn)2024-11-11
這篇文章主要介紹了vue中安裝使用cesium方式(親測可用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue中關(guān)于$emit和$on的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了vue2 前端搜索實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue頁面使用多個定時器的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09