vue導出excel文件流中文亂碼問題及解決
導出excel文件流中文亂碼

解決此方法很多網上的差不多都可以。一下提供簡單的方法
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 = '考試成績.xls';
const linkNode = document.createElement('a');
linkNode.download = fileName; //a標簽的download屬性規(guī)定下載文件的名稱
linkNode.style.display = 'none';
linkNode.href = URL.createObjectURL(blob); //生成一個Blob URL
document.body.appendChild(linkNode);
linkNode.click(); //模擬在按鈕上的一次鼠標單擊
URL.revokeObjectURL(linkNode.href); // 釋放URL 對象
document.body.removeChild(linkNode);
});
},注意:

填寫
另住攔截器,因為判斷result,沒在正確里返回,所以我直接返回

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

我這個是 post請求亂碼了 ,如果是get,就直接window.open(url,'_blank')就可以了
1.“錕斤拷唷?錕?;錕斤拷”這種亂碼信息導致的原因是:整個數據流的字符集 GBK=>UTF-8=>GBK導致的。
2. 前端代碼:
axios({
method: "post",
url: url,
data: params,
headers: {
// ... 接口需要的請求頭
},
responseType: "blob"
}).then(response => {
const blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
const fileName = res.headers["content-disposition"].split("=")[1]; //接口響應頭定義的文件名
downloadFile(blob, fileName);
});//import { Message } from "element-ui";
/**
* 文件下載, 對于下載鏈接可直接用 window.open(url, "_blank");
* @param {*} data 二進制數據或base64編碼 Blob、String
* @param {*} fileName 下載的文件命名,可帶擴展名,跨域下無效
*/
export function downloadFile(data, fileName) {
let url = "";
let isBlob = false;
const errMsg = "下載出錯,文件數據無法識別!";
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 對象
document.body.removeChild(tmpLink);
} else {
// IE10+下載
if (isBlob) {
window.navigator.msSaveBlob(data, fileName);
} else {
//Message.error(errMsg);
console.log(errMsg);
return;
}
}
}3. 感覺完美 但是結果下載下來的如一開始截圖的亂碼,其實代碼沒有問題,問題在于前端項目啟用了mock.js,把所有 import 或 require @/mock 的地方注釋調就可以了
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue element實現將表格單行數據導出為excel格式流程詳解
這篇文章主要介紹了vue element實現將表格單行數據導出為excel格式流程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2022-12-12
關于element?ui中的el-scrollbar橫向滾動問題
這篇文章主要介紹了關于element?ui中的el-scrollbar橫向滾動問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08
關于vue使用ant design vue,打包后a-date-picker控件無法選擇日期的問題
這篇文章主要介紹了關于vite .env.test環(huán)境使用ant design vue,打包后a-date-picker控件無法選擇日期的問題,本文針對這個問題提供了解決方法,需要的朋友可以參考下2023-04-04
vue Element-ui input 遠程搜索與修改建議顯示模版的示例代碼
本文分為html,js和css代碼給大家詳細介紹了vue Element-ui input 遠程搜索與修改建議顯示模版功能,感興趣的朋友一起看看吧2017-10-10

