vue導(dǎo)出excel文件流中文亂碼問題及解決
導(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,沒在正確里返回,所以我直接返回
導(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ò)展名,跨域下無效 */ export function downloadFile(data, fileName) { let url = ""; let isBlob = false; const errMsg = "下載出錯(cuò),文件數(shù)據(jù)無法識(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. 感覺完美 但是結(jié)果下載下來的如一開始截圖的亂碼,其實(shí)代碼沒有問題,問題在于前端項(xiàng)目啟用了mock.js,把所有 import 或 require @/mock 的地方注釋調(diào)就可以了
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用element-ui按需引入時(shí)踩過的那些坑
Element-UI是基于vue實(shí)現(xiàn)的一套不依賴業(yè)務(wù)的UI組件庫,提供了豐富的PC端組件,減少用戶對(duì)常用組件的封裝,降低了開發(fā)的難易程度,下面這篇文章主要給大家介紹了關(guān)于vue使用element-ui按需引入時(shí)踩過的那些坑,需要的朋友可以參考下2022-05-05Vue.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)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01vue生命周期四個(gè)階段created和mount詳解
這篇文章主要介紹了vue生命周期四個(gè)階段created和mount,本文給大家介紹的非常詳細(xì),補(bǔ)充介紹了什么是實(shí)例,什么是實(shí)例被掛載到DOM,什么是dom,dao操作又是什么,感興趣的朋友跟隨小編一起看看吧2024-02-02vue實(shí)現(xiàn)右側(cè)滑出層動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右側(cè)滑出層動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04詳解Vue的數(shù)據(jù)及事件綁定和filter過濾器
這篇文章主要為大家介紹了Vue的數(shù)據(jù)及事件綁定和filter過濾器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01