前端下载excel文件二三事

最近项目中有涉及到后端传给前端blob数据，然后前端处理进行下载的需求。查询资料后，发现使用a标签进行下载的兼容性是最好的，下面是具体的代码：

let url = window.URL.createObjectURL(data) // 创建下载链接
let a = document.createElement('a')
document.body.appendChild(a)
a.href = url
a.download = 'text.xls'
a.click()
document.body.removeChild(a) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放blob对象

当我写好代码点击下载按钮时，发现下下来的是一个编辑文本，并不是一个excel文件，发现还需要在axios请求时加上请求类型：

responseType: 'blob',

加上请求类型后发现可以正常下载，但是文件名都是text.xls，尝试打印请求返回的response.headers发现里面只有下面几种头部，没有Content-Disposition头部。

{
    cache-control: "no-cache"
    content-type: "application/msexcel;charset=UTF-8"
    pragma: "no-cache"
}

解决办法是让后端设置一个头部:

Access-Control-Expose-Headers: Content-Disposition

该头部的含义如下：

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

添加上该头部后，前端再下载就可以拿到Content-Disposition头部里filename的值了，该值就是文件名。将filename的值赋值给a标签的download属性，即可正常下载并展示对应文件名。