vue導(dǎo)出excel文件流中文亂碼問(wèn)題及解決
導(dǎo)出excel文件流中文亂碼

解決此方法很多網(wǎng)上的差不多都可以。一下提供簡(jiǎn)單的方法
loads(){
let data={
userWord:this.dataList.userWord,
examId:this.$route.query.id,
exportType:this.active,
}
api.exportUserResult(data).then((res) => {
const blob = new Blob([res.data]);
const fileName = '考試成績(jī).xls';
const linkNode = document.createElement('a');
linkNode.download = fileName; //a標(biāo)簽的download屬性規(guī)定下載文件的名稱
linkNode.style.display = 'none';
linkNode.href = URL.createObjectURL(blob); //生成一個(gè)Blob URL
document.body.appendChild(linkNode);
linkNode.click(); //模擬在按鈕上的一次鼠標(biāo)單擊
URL.revokeObjectURL(linkNode.href); // 釋放URL 對(duì)象
document.body.removeChild(linkNode);
});
},注意:

填寫
另住攔截器,因?yàn)榕袛鄏esult,沒(méi)在正確里返回,所以我直接返回

導(dǎo)出excel亂碼(錕斤拷唷?錕?;錕斤拷)

我這個(gè)是 post請(qǐng)求亂碼了 ,如果是get,就直接window.open(url,'_blank')就可以了
1.“錕斤拷唷?錕?;錕斤拷”這種亂碼信息導(dǎo)致的原因是:整個(gè)數(shù)據(jù)流的字符集 GBK=>UTF-8=>GBK導(dǎo)致的。
2. 前端代碼:
axios({
method: "post",
url: url,
data: params,
headers: {
// ... 接口需要的請(qǐng)求頭
},
responseType: "blob"
}).then(response => {
const blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
const fileName = res.headers["content-disposition"].split("=")[1]; //接口響應(yīng)頭定義的文件名
downloadFile(blob, fileName);
});//import { Message } from "element-ui";
/**
* 文件下載, 對(duì)于下載鏈接可直接用 window.open(url, "_blank");
* @param {*} data 二進(jìn)制數(shù)據(jù)或base64編碼 Blob、String
* @param {*} fileName 下載的文件命名,可帶擴(kuò)展名,跨域下無(wú)效
*/
export function downloadFile(data, fileName) {
let url = "";
let isBlob = false;
const errMsg = "下載出錯(cuò),文件數(shù)據(jù)無(wú)法識(shí)別!";
if (data instanceof Blob) {
isBlob = true;
url = window.URL.createObjectURL(data);
} else if (typeof data == "string") {
// base64編碼
url = data;
} else {
Message.error(errMsg);
return;
}
if ("download" in document.createElement("a")) {
// 非IE下載
const tmpLink = document.createElement("a");
tmpLink.download = fileName || "";
tmpLink.style.display = "none";
tmpLink.href = url;
document.body.appendChild(tmpLink);
tmpLink.click();
window.URL.revokeObjectURL(tmpLink.href); // 釋放URL 對(duì)象
document.body.removeChild(tmpLink);
} else {
// IE10+下載
if (isBlob) {
window.navigator.msSaveBlob(data, fileName);
} else {
//Message.error(errMsg);
console.log(errMsg);
return;
}
}
}3. 感覺(jué)完美 但是結(jié)果下載下來(lái)的如一開始截圖的亂碼,其實(shí)代碼沒(méi)有問(wèn)題,問(wèn)題在于前端項(xiàng)目啟用了mock.js,把所有 import 或 require @/mock 的地方注釋調(diào)就可以了
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用element-ui按需引入時(shí)踩過(guò)的那些坑
Element-UI是基于vue實(shí)現(xiàn)的一套不依賴業(yè)務(wù)的UI組件庫(kù),提供了豐富的PC端組件,減少用戶對(duì)常用組件的封裝,降低了開發(fā)的難易程度,下面這篇文章主要給大家介紹了關(guān)于vue使用element-ui按需引入時(shí)踩過(guò)的那些坑,需要的朋友可以參考下2022-05-05
vue3?中使用?jsx?開發(fā)的詳細(xì)過(guò)程
這篇文章主要介紹了vue3?中使用?jsx?開發(fā),本文著重說(shuō)一下在使用 .vue 文件和 .jsx 文件在使用語(yǔ)法上的差異,需要的朋友可以參考下2022-09-09
Vue.js如何利用v-for循環(huán)生成動(dòng)態(tài)標(biāo)簽
這篇文章主要給大家介紹了關(guān)于Vue.js如何利用v-for循環(huán)生成動(dòng)態(tài)標(biāo)簽的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
vue生命周期四個(gè)階段created和mount詳解
這篇文章主要介紹了vue生命周期四個(gè)階段created和mount,本文給大家介紹的非常詳細(xì),補(bǔ)充介紹了什么是實(shí)例,什么是實(shí)例被掛載到DOM,什么是dom,dao操作又是什么,感興趣的朋友跟隨小編一起看看吧2024-02-02
vue實(shí)現(xiàn)右側(cè)滑出層動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右側(cè)滑出層動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
詳解Vue的數(shù)據(jù)及事件綁定和filter過(guò)濾器
這篇文章主要為大家介紹了Vue的數(shù)據(jù)及事件綁定和filter過(guò)濾器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-01-01

