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

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

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

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

js部分点击下载

// 发送请求下载文件API({// 如果是导出搜索后的文件，在此处传参，}).then((res)=>{// 请求成功// 下载文件const blob =newBlob([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”

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

js部分点击下载

// 发送请求下载文件API({// 如果是导出搜索后的文件，在此处传参，},}).then((res)=>{// 请求成功// 下载文件const link = document.createElement('a');// 创建元素let blob =newBlob([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:"文件导出失败"});})

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

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