Vue不能下載xls以及文件亂碼問(wèn)題解決
發(fā)現(xiàn)問(wèn)題
老大要讓我實(shí)現(xiàn)下載xls文件的功能，我想了想：我好像不太會(huì)耶！
但是我們之前寫(xiě)的一個(gè)頁(yè)面有一個(gè)下載xls的功能，那我就CV大法，嘿嘿嘿。
當(dāng)我點(diǎn)擊下載按鈕的那一刻，控制臺(tái)紅了...，心想MMP
一樣的代碼不行，那個(gè)就能下載，我CV后變質(zhì)了？
報(bào)錯(cuò)原因：TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
我看了看網(wǎng)絡(luò)請(qǐng)求，老大說(shuō)傳過(guò)來(lái)的數(shù)據(jù)沒(méi)問(wèn)題，可能是數(shù)據(jù)太大？
我看了好多好多好多好多博客，他們解決方案是對(duì)傳過(guò)來(lái)的數(shù)據(jù)進(jìn)行Blob處理后，那咱們?cè)囈辉嚢桑?/p>
let blob = new Blob([res], {type: 'application/vnd.ms-excel'})
const url = window.URL.createObjectURL(res)唉？可以下載了！但是表格內(nèi)的數(shù)據(jù)都是亂碼......
我這一想不行呀！都來(lái)看到某位掘友的博客，他的做法是在請(qǐng)求頭加responseType: 'blob'
最終我成功的解決了這個(gè)問(wèn)題，嗚嗚嗚...
總結(jié)
在做大數(shù)據(jù)文件下載時(shí)，在請(qǐng)求頭中加入 responseType: 'blob'，就可以解決下載和文件內(nèi)亂碼的問(wèn)題了。
下面附上代碼
// 文件下載 —— <a> 標(biāo)簽方法下載
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)//釋放標(biāo)簽
})// 請(qǐng)求
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以及文件亂碼問(wèn)題解決的文章就介紹到這了,更多相關(guān)Vue下載xls及文件亂碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue下拉框雙向聯(lián)動(dòng)效果,實(shí)現(xiàn)聯(lián)動(dòng)，大家都知道在vue的頁(yè)面中，想要實(shí)現(xiàn)多個(gè)<el-select 下拉框的值動(dòng)態(tài)改變，必須要調(diào)用@change 函數(shù)，具體操作方法跟隨小編一起學(xué)習(xí)下吧2022-04-04
vscode配置vue下的es6規(guī)范自動(dòng)格式化詳解
這篇文章主要介紹了vscode配置vue下的es6規(guī)范自動(dòng)格式化詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
本篇文章主要介紹了Vee-Validate的使用方法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue2.0/3.0雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理詳解
這篇文章主要給大家介紹了關(guān)于Vue2.0/3.0雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue3+ts 兄弟組件之間傳值的實(shí)現(xiàn)
Vue3是一款流行的前端框架,它支持多種傳值方式,包括兄弟組件之間的傳值,本文主要介紹了vue3+ts 兄弟組件之間傳值的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
Vue+mui實(shí)現(xiàn)圖片的本地緩存示例代碼
這篇文章主要介紹了Vue+mui實(shí)現(xiàn)圖片的本地緩存的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
Vue實(shí)現(xiàn)搜索結(jié)果高亮顯示關(guān)鍵字
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)搜索結(jié)果高亮顯示關(guān)鍵字，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
一個(gè)Vue視頻媒體多段裁剪組件的實(shí)現(xiàn)示例
這篇文章主要介紹了一個(gè)Vue媒體多段裁剪組件的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
el-date-picker設(shè)置日期默認(rèn)值兩種方法(當(dāng)月月初至月末)
這篇文章主要給大家介紹了關(guān)于el-date-picker設(shè)置日期默認(rèn)值(當(dāng)月月初至月末)的相關(guān)資料,文中通過(guò)代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了8個(gè)非常實(shí)用的Vue自定義指令，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12