axios实现下载文件

1、axios请求文件流

import axios from ‘axios‘

export const downLoadfile = (id)=> {
    return axios({
      url: window.localStorage.url + `/base/report/download/report?id=${id}`,
      method: ‘get‘,
      headers: {
        "token": ‘这里是你的token‘
      },
      responseType: ‘blob‘
    })
  }

2、获取文件后创建下载对象

/**
**res是文件流
**/
export function exportExcleUtil(res) {
    const fileName = res.headers["content-disposition"].split("=")[1];
    const blob = new Blob([res.data], {
        type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    const url = window.URL.createObjectURL(blob);
    const aLink = document.createElement("a");
    aLink.style.display = "none";
    aLink.href = url;
    aLink.setAttribute("download", decodeURI(fileName));
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink); //下载完成移除元素
    window.URL.revokeObjectURL(url); //释放掉blob对象
}

3、如果获取不到响应头中的Content-Disposition怎么解决？
有时候请求完文件流需要获取到响应头中的Content-Disposition来设置文件名称，但可能在network中能看到该属性，却不能获取到改属性。

根据MDN文档：Access-Control-Expose-Headers，默认情况下，header只有六种 simple response headers （简单响应首部）可以暴露给外部：

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

这里的暴露给外部，意思是让客户端可以访问得到，既可以在Network里看到，也可以在代码里获取到他们的值。因此服务器在协议回包里需要加上该字段，并且在响应首部 Access-Control-Expose-Headers将其暴露出来，以供客户端获取。如下图所示

原文：https://www.cnblogs.com/dubayaoyao/p/14875440.html