“前端处理文件流,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: "文件导出失败"
        });
      })

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

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

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>