“前端处理文件流，postman导出正常，vue导出时提示文件损坏”解决方案

最近公司项目要写文件导出，遇到了这个问题，记录一下

解决方案一：在请求头中配置responseType: “arraybuffer”

// 接口部分
export const API = (data) => {
  return request("", {
    method: "post",
    data,
    responseType: "arraybuffer", // 配置响应头，不配置的话会造成，文件下载下来了，但是“无法打开”
  });
};

js部分点击下载

// 发送请求下载文件
      API({
        // 如果是导出搜索后的文件，在此处传参，
      }).then((res) => { // 请求成功
        // 下载文件
        const blob = new Blob([res.data]);
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '文件名.文件格式';
        link.click();
      }).catch(() => { // 请求失败
        this.$Message['error']({
          background:true,
          content: "文件导出失败"
        });
      })

刚开始用第一种方法已经解决了文件损坏的问题，可是后来可能是后端改了些什么东西，又开始提示文件损坏，我只能再去找其他方案
因此，我有尝试了下面一个方法

解决方案二：在请求头中配置responseType: “blob”

// 接口部分
export const API = (data) => {
  return request("", {
    method: "post",
    data,
    responseType: "blob", // 配置响应头，不配置的话会造成，文件下载下来了，但是“无法打开”
  });
};

js部分点击下载

// 发送请求下载文件
      API({
        // 如果是导出搜索后的文件，在此处传参，
        },
      }).then((res) => { // 请求成功
        // 下载文件
        const link = document.createElement('a'); // 创建元素
        let blob = new Blob([res]);
        link.style.display='none';
        link.href = URL.createObjectURL(blob);
        link.setAttribute('download','文件名.文件格式') // 为下载后的文件命名
        document.body.appendChild(link)
        link.click(); // 点击下载
        document.body.removeChild(link) // 下载完成后移除元素
        window.URL.revokeObjectURL(link.href) // 释放blob对象
      }).catch(() => { // 请求失败
        this.$Message['error']({
          background:true,
          content: "文件导出失败"
        });
      })

现在我的文件导出已经正常，希望不要再出错了

这个问题也是挺挠头的，记录一下，以防以后用得到