美文网首页让前端飞Web前端之路
前端下载excel文件二三事

前端下载excel文件二三事

作者: 坤少卡卡 | 来源:发表于2019-08-16 16:18 被阅读3次

最近项目中有涉及到后端传给前端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属性,即可正常下载并展示对应文件名。

相关文章

网友评论

    本文标题:前端下载excel文件二三事

    本文链接:https://www.haomeiwen.com/subject/audqsctx.html