溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue下載后臺的亂碼流如何解決？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
解決辦法：
請求方式用的是axios，主要加關鍵的 {responseType: 'blob'}
axios封裝
export function postDownload(url, data) {
return new Promise((resolve, reject) => {
instance.post(url,data,{responseType: 'blob'}).then(response => {
resolve(response);
}, err => {
reject(err)
})
})
}下載插件 npm install js-file-download -S
運用：
下載excel時，后臺設置了excel標題，要去請求頭去取，傳輸過程中文會有亂碼的情況，需要編碼下。
let fileDownload = require("js-file-download");
fileDownload(res.data,decodeURIComponent(res.headers['content-disposition'].split("=")[1]));
補充知識：vue下載后臺接口返回的二進制流文件轉為Excel文件
我就廢話不多說了，大家還是直接看代碼吧~
this.$http({
method: "post",
responseType:"arraybuffer",
url: '導出接口地址' ,
data:{}
}).then((res)=>{
if (res.status === 200 && res.data) {
var disposition = res.headers['content-disposition'];
var fileName = decodeURI( disposition.split("filename=")[1].split(";filename*=")[0])
let blob = new Blob([res.data], { type: 'application/.xls' }); //.xls是我和后臺約定好的文件格式
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
link.remove();
}
},(err)=>{ var enc = new TextDecoder('utf-8')
var res = JSON.parse(enc.decode(new Uint8Array(err.data))) //轉化成json對象
});此時注意 responseType:"arraybuffer", 在vue框架當中，數據請求是借助axios的，為此，在發送請求的時候，需要修改responseType，改為arraybuffer，axios默認情況下responseType為json，若是不修改，很可能下載時候會是亂碼，或者為null。
看完上述內容，你們掌握vue下載后臺的亂碼流如何解決的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
