11-10 07:37 阅读 206

前端axios 使用 post 请求下载文件流(前端axios如何监听请求超时)

1.成功获得后端的二进制文件流

首先你要保证调用的后端可以正常返回二进制文件

返回的长这样。（有时后端会出现跨域的问题，可以看下面解释。）

2.使用Blob对象将返回的二进制文件流转为可下载的文件地址。

Blob对象表示一个不可变、原始数据的类文件对象。具体见MDN

请求时在设置reponseType为blob,指定响应的数据类型为blob。

axios.post(url,param,{ responseType: 'blob'}) 复制代码

处理返回的结果

const fileDownload = (res, filename) => {   let blob = new Blob([res.data]); // 将返回的数据通过Blob的构造方法，创建Blob对象   if ('msSaveOrOpenBlob' in navigator) {     window.navigator.msSaveOrOpenBlob(blob, filename); // 针对浏览器   } else {     const elink = document.createElement('a'); // 创建a标签     elink.download = filename;      elink.style.display = 'none';     // 创建一个指向blob的url，这里就是点击可以下载文件的根结     elink.href = URL.createObjectURL(blob);      document.body.appendChild(elink);     elink.click();     URL.revokeObjectURL(elink.href); //移除链接     document.body.removeChild(elink); //移除a标签   } } 复制代码

完整代码

axios.post(url,param,{responseType: 'blob'})       .then((res: any) => {         if (res.status === 200) {           fileDownload(res, '测试文件.xlsx');         }       }); 复制代码

注意文件名可以从后端的headers["content-disposition"] 获取。需要和后端协商，将header暴露给你（不是你在控制台中可以看到，是后端header首部加上content-disposition和在Accesss-Control-Expose-Headers中列出来）

3. 下载请求跨域，后端甩锅给我

问题

请求跨域，后端和我扯皮，说别的请求咋不跨域。。。跨域他已经设置了。（我这边跨域都是后端处理，前端不做代理）

啪啪打脸

他使用response.reset()跨域被重置了，导致全局跨域失效.具体解释可以参看这位老哥的解决前后端分离中文件传输跨域失败问题。那个这个去打他脸。

作者：yuanfei
链接：https://juejin.cn/post/7028850406738362375