vue导出excel乱码（锟斤拷唷?锟?；锟斤拷）-CSDN博客

本文链接：https://blog.csdn.net/weixin_38659265/article/details/120197277

我这个是 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 的地方注释调就可以了