阅读 204

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

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

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

返回的长这样。(有时后端会出现跨域的问题,可以看下面解释。)
image.png

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

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

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

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

  1. 处理返回的结果

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标签   } } 复制代码

  1. 完整代码

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. 下载请求跨域,后端甩锅给我

  1. 问题

请求跨域,后端和我扯皮,说别的请求咋不跨域。。。跨域他已经设置了。(我这边跨域都是后端处理,前端不做代理)
image.png
  1. 啪啪打脸

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


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


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐