前端axios 使用 post 请求下载文件流

1.成功获得后端的文本文件流

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

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

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

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

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

axios.post(url,param,{ responseType: 'blob'})

2. 处理返回的结果

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标签
  }
}

3. 完整代码

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. 问题

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

2. 啪啪打脸

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