vue?下載文檔亂碼的解決
vue下載文檔亂碼
最近寫功能 vue導(dǎo)出,但是不知道為啥,一請(qǐng)求接口就是亂碼

后來在接口里寫上了 這句話 responseType:“blob”,


能下載了趕快高興打開一看 日,下載下來的文件里面又是亂碼

后來不停的琢磨,咦終于找到方法了

這里面加了一句話 終于成功了!

我給大家把代碼貼上
exportAccountApi(data).then(res=>{
console.log('777666',res)
const blob = new Blob([res],{type: "application/vnd.ms-excel"});
let fileName = "存款記錄明細(xì).xls";
if ("download" in document.createElement("a")) {
const elink = document.createElement("a");
elink.download =fileName;
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
}else{
navigator.msSaveBlob(blob.fileName)
}
})
文件下載返回亂碼處理 vue+axios
后端返回?cái)?shù)據(jù)流是亂碼,可以使用new Blob()這個(gè)方法處理,可以解決亂碼問題。
亂碼返回結(jié)果如下:

解決方法
async postClick() {
const res = await axios({
url: '后端接口',
method: 'post',
data: { id: '文件id' }
responseType: 'blob'
})
const content = res.data
const fileName = 'a.png' // 文件名稱
// 如果不確定文件類型,type可以寫空字符串
const bolb = new Blob([content], { type: '' })
if ('download' in document.createElement('a')) {
const link = document.createElement('a')
link.download = fileName
link.style.display = 'none'
// URL.createObjectURL(bolb) = blob:http://localhost:8080/a34a8a20-acf2-3f21-bc22-45994d9f0290
link.href = URL.createObjectURL(bolb)
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(link.href)
document.body.removeChild(link)
}
}
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Ant?Design?Vue中的table與pagination的聯(lián)合使用方式
這篇文章主要介紹了Ant?Design?Vue中的table與pagination的聯(lián)合使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
Vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查的示例代碼
Vue是一個(gè)用于構(gòu)建用戶界面的JavaScript框架,在Vue中可以通過使用Vue組件來實(shí)現(xiàn)對(duì)表格的增刪改查操作,下面將介紹一些基礎(chǔ)的Vue組件和技術(shù)來實(shí)現(xiàn)對(duì)表格的增刪改查操作,需要的朋友可以參考下2024-08-08
Vue實(shí)現(xiàn)動(dòng)態(tài)樣式的多種方法匯總
本文要給大家介紹Vue實(shí)現(xiàn)動(dòng)態(tài)樣式的多種方法,下面給大家?guī)韼讉€(gè)案列,需要的朋友可以借鑒研究一下。2021-06-06
vue實(shí)現(xiàn)倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)倒計(jì)時(shí)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03
Element的el-tree控件后臺(tái)數(shù)據(jù)結(jié)構(gòu)的生成以及方法的抽取
這篇文章主要介紹了Element的el-tree控件后臺(tái)數(shù)據(jù)結(jié)構(gòu)的生成以及方法的抽取,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
使用vue-router設(shè)置每個(gè)頁面的title方法
下面小編就為大家分享一篇使用vue-router設(shè)置每個(gè)頁面的title方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue踩坑記錄之src的動(dòng)態(tài)綁定賦值問題
這篇文章主要介紹了vue踩坑記錄之src的動(dòng)態(tài)綁定賦值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06
在Vue3中為路由Query參數(shù)標(biāo)注類型的方法
這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類型,我們就針對(duì)這個(gè)話題如何為路由Query參數(shù)標(biāo)注類型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下2024-08-08
vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作
這篇文章主要介紹了vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08

