使用Vue Admin Work中的封装的axios导出Excel文件乱码

使用Vue Admin Work中的封装的axios导出Excel文件乱码

解决方法：页面文件示例

post({
        url: ExportGroup,
        data: () => {
          return {
            key: searchkey.value,
            pid: Number(pid),
            sort: sort.value,
          };
        },
        headers:{responseType: 'blob'}
       
      })
        .then(({ data }: Response) => {
          // 创建一个Blob对象，用于创建文件
          const blob = new Blob([data.filedata], { type: "application/vnd.ms-excel" });

          // 创建一个链接元素
          const link = document.createElement("a");
          if (typeof link.download === "string") {
            // 兼容大多数浏览器的下载方式
            link.href = URL.createObjectURL(blob);
            link.download = decodeURIComponent(data.filename); // 设置下载文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          } else {
            // 对于不支持下载属性的浏览器，直接打开对象URL
            window.open(URL.createObjectURL(blob));
          }
        })
        .catch((error) => {
          loading.value = false;
          message.error(error.message);
        });

axios.config.ts文件修改示例

service.interceptors.request.use(
  (config) => {
    !config.headers && (config.headers = {})
    if (!config.headers[CONTENT_TYPE]) {
      config.headers[CONTENT_TYPE] = APPLICATION_JSON
    }
    config.headers[xsrfHeaderName] = Cookies.get(USER_TOKEN_KEY) || ''
    if (config.headers[CONTENT_TYPE] === FORM_URLENCODED) {
      config.data = qs.stringify(config.data)
    }
    if (config.headers["responseType"]) {
      config.responseType = config.headers["responseType"];
    }
    return config
  },
  (error) => {
    return Promise.reject(error.response)
  }
)

关键是

if (config.headers["responseType"]) {
      config.responseType = config.headers["responseType"];
    }