快捷導(dǎo)航

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

更新時(shí)間：2022年06月02日 11:30:21 作者：Thekingyu

這篇文章主要介紹了vue導(dǎo)出excel文件流中文亂碼問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

導(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: