vue下載后臺的亂碼流如何解決

發(fā)布時間：2020-12-05 15:00:49 來源：億速云閱讀：384 作者：Leah 欄目：開發(fā)技術(shù)

vue下載后臺的亂碼流如何解決？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

解決辦法：

請求方式用的是axios，主要加關(guān)鍵的 {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時，后臺設(shè)置了excel標題，要去請求頭去取，傳輸過程中文會有亂碼的情況，需要編碼下。

let fileDownload = require("js-file-download");
fileDownload(res.data,decodeURIComponent(res.headers['content-disposition'].split("=")[1]));

補充知識：vue下載后臺接口返回的二進制流文件轉(zhuǎn)為Excel文件

我就廢話不多說了，大家還是直接看代碼吧~

this.$http({
 method: "post",
 responseType:"arraybuffer",
 url: '導(dǎo)出接口地址' ,
 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))) //轉(zhuǎn)化成json對象

});

此時注意 responseType:"arraybuffer", 在vue框架當(dāng)中，數(shù)據(jù)請求是借助axios的，為此，在發(fā)送請求的時候，需要修改responseType，改為arraybuffer，axios默認情況下responseType為json，若是不修改，很可能下載時候會是亂碼，或者為null。

看完上述內(nèi)容，你們掌握vue下載后臺的亂碼流如何解決的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

vue下載后臺的亂碼流如何解決

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽