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

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

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

点击全文阅读