后端返回文件流，前端通过axios实现下载文件

需求：点击导出按钮，将列表数据下载成本地Excel文件

实现：

后端部分代码：

后端代码响应头部需要设置Access-Control-Expose-Headers头部信息，把你需要获取的头部属性字段设置在这个值里面前端响应部分就可以获取，否则不可无法获取（多个用逗号分割），如下设置前端可以获取文件名字，

response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(message, "UTF-8"));
response.setContentType("application/octet-stream");
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");

前端：

axios 请求头部一定要加上responseType=‘blob’

axios({
    url:'请求地址',
    method: 'post',
    responseType:'blob', // 后台响应数据类型
    data: data
  })

如果不加的话，你就会看到个这么个玩意（文件流），打印出的结果也是这样的……

然而，我们需要的正常格式是这样子

data使我们需要的数据，size代表文件大小，0的话则为空内容
type是文件类型
headers是配置项，我们可从中取出后端添加的文件名

拿到文件对象了，下一步干嘛（当然是下载下来啊！）

// 请求成功后下载文件
   if (res != null && res.status == 200) {
      // 生成blob对象 定义下载格式
      let blob = new Blob([res.data], { type: res.type });
      // 获取文件名
      let filename = res.headers['content-disposition'];
      filename = decodeURIComponent(filename.split("filename=")[1]);
      // 创建 a标签 执行下载
      let downloadElement = document.createElement('a');
      let href = window.URL.createObjectURL(blob); //创建下载的链接
      downloadElement.href = href;
      downloadElement.download = filename; //下载后文件名
      document.body.appendChild(downloadElement); // 项目插入a元素
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      window.URL.revokeObjectURL(href); //释放blob对象

beautiful,点个赞吧！