前端axios获取二进制流下载excel并解决无法获header

背景介绍：前端采用window.open(url)的方式下载导出的excel文件，但是由于代理服务器的问题通过域名访问则无法下载excel文件，故改用axios请求二进制流转化为excel文件，并通过获取响应头response Header里的Content-Disposition属性获取文件名，最终实现下载excel文件的功能。

实现方式：
axios请求(ajax类似)

主要代码：

axios：设置返回数据格式为blob或者arraybuffer
如：

    var instance = axios.creat({         ... //一些配置
 //返回数据的格式为二进制流，可选值为  arraybuffer,blob,document,json,text,stream，默认值为json
//注意：此时后端返回的数据只能包含二进制流，若包含其他信息如文件名等，也会被当成二进制流处理导致文件乱码。
        responseType: 'blob',
    })
请求时的处理：
　　getExcel().then(res => {
    　　//这里res.data是返回的blob对象,即对应的二进制流
    　　var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
    　　var downloadElement = document.createElement('a');
    　　var href = window.URL.createObjectURL(blob); //创建下载的链接
    　　downloadElement.href = href;
    　　downloadElement.download = 'xxx.xlsx'; //下载后文件名
    　　document.body.appendChild(downloadElement);
    　　downloadElement.click(); //点击下载
    　　document.body.removeChild(downloadElement); //下载完成移除元素
    　　window.URL.revokeObjectURL(href); //释放掉blob对象 
　})

可能出现的问题：
这里后端把文件名放到了header里面，但是axios的res.header并不能获取：

而浏览器Network下是这样的：

解决办法：
在服务端设置header：

Access-Control-Expose-Headers: Content-Disposition

（3）Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。

摘自阮一峰-跨域资源共享 CORS 详解

以上，如有错误欢迎指正，如果喜欢还请点个赞再走，谢谢！更多项目实战源码请移步我的码云地址