vue使用js-file-download插件下載文件亂碼的解決
使用js-file-download插件下載文件亂碼
在開(kāi)發(fā)vue項(xiàng)目時(shí)遇到使用js-file-download插件下載后端傳過(guò)來(lái)的二進(jìn)制文件流時(shí)報(bào)錯(cuò)。
像這樣：
解決方法
在默認(rèn)情況下vue的axios的responseType默認(rèn)時(shí)json，如果接收的時(shí)文件流就可能會(huì)造成亂碼或者null，我們只需在axios的請(qǐng)求頭中加入responseType:'blob'即可解決問(wèn)題。
vue通過(guò)url下載文件，保留文件名不亂碼
技術(shù)名詞解釋
下載文件方法封裝
技術(shù)細(xì)節(jié)
本方法適用在后臺(tái)沒(méi)有提供下載接口，前臺(tái)直接用a標(biāo)簽下載，文件名是文件服務(wù)器加密后的亂碼。
解決下載后文件名亂碼問(wèn)題，保持原文件名。
直接新建download.js，把封裝好的代碼復(fù)制進(jìn)去即可。
export async function downloadFile(url, fileName) {
try {
const res = await fetch(url)
const blob = await res.blob()
const a = document.createElement('a')
const objectURL = URL.createObjectURL(blob)
a.href = objectURL
a.download = fileName
a.click()
URL.revokeObjectURL(objectURL)
} catch (error) {
console.error('Error occurred while handling file download:', error)
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何使用sm4js進(jìn)行加密和國(guó)密sm4總結(jié)
近期由于公司項(xiàng)目的需要開(kāi)始研究國(guó)密SM4加密,下面這篇文章主要給大家介紹了關(guān)于如何使用sm4js進(jìn)行加密和國(guó)密sm4的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
默認(rèn)生成的目錄結(jié)構(gòu)不滿足我們的開(kāi)發(fā)需求,所以這里需要做一些自定義改動(dòng),本文給大家分享Vue3目錄調(diào)整方案,感興趣的朋友一起看看吧2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue2.x集成百度UEditor富文本編輯器的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
Vue腳手架學(xué)習(xí)之項(xiàng)目創(chuàng)建方式
這篇文章主要給大家介紹了關(guān)于Vue腳手架學(xué)習(xí)之項(xiàng)目創(chuàng)建方式的相關(guān)資料，文中通過(guò)介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue二次封裝el-select實(shí)現(xiàn)下拉滾動(dòng)加載效果(el-select無(wú)限滾動(dòng))
el-select默認(rèn)是不支持虛擬滾動(dòng)的,需要使用第三方插件來(lái)實(shí)現(xiàn)虛擬滾動(dòng)功能,下面這篇文章主要給大家介紹了關(guān)于Vue二次封裝el-select實(shí)現(xiàn)下拉滾動(dòng)加載效果的相關(guān)資料,需要的朋友可以參考下2024-04-04
vue3 reactive函數(shù)用法實(shí)戰(zhàn)教程
reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法，reactive的用法與ref的用法相似，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)UI也會(huì)自動(dòng)更新，這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下2022-11-11
淺談Vue Element中Select下拉框選取值的問(wèn)題
下面小編就為大家分享一篇淺談Vue Element中Select下拉框選取值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
使用element-ui的Pagination分頁(yè)的注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了使用element-ui的Pagination分頁(yè)的注意事項(xiàng)及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue3 computed初始化獲取設(shè)置值實(shí)現(xiàn)示例
這篇文章主要為大家介紹了Vue3 computed初始化以及獲取值設(shè)置值實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue+echarts+datav大屏數(shù)據(jù)展示及實(shí)現(xiàn)中國(guó)地圖省市縣下鉆功能
這篇文章主要介紹了vue+echarts+datav大屏數(shù)據(jù)展示及實(shí)現(xiàn)中國(guó)地圖省市縣下鉆,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11