vue——通过post方法下载文件并重命名
参考:https://blog.csdn.net/u011301203/article/details/102629952
https://www.cnblogs.com/codesyofo/p/14142197.html
前端
downLoad(){ let that = this let params = { // 根据后端需求传参 meetName: encodeURI(that.meetName), htmlText: encodeURI(that.content) } axios.post('xxx',
params,
{responseType: "arraybuffer"} // 必须添加项,告诉服务器需要的响应格式 ).then(function (res) { const filename = decodeURI(res.headers['filename']); // 后端返回的文件名 let blob = new Blob([res.data], {type: 'application/msword;charset=utf-8'}); // 将二进制流转为blob let a = document.createElement('a'); let url = window.URL.createObjectURL(blob); // 创建新的url并指向file对象或blob对象的地址 a.href = url; a.download = filename; // 设置下载文件名 let body = document.getElementsByTagName('body')[0]; body.appendChild(a); a.click(); body.removeChild(a); // 下载完成移除元素 window.URL.revokeObjectURL(url); // 释放内存 }) }
后端
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition") response.setHeader("Content-Disposition", ...)
出现的问题
现象
axios无法获取响应头headers的Content-Disposition字段
原因
默认情况下,header只有六种 simple response headers (简单响应首部)可以暴露给外部:
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
这里的暴露给外部,意思是让客户端可以访问得到,既可以在 Network
里看到,也可以在代码里获取到他们的值。
上面问题提到的 content-disposition
不在其中,所以即使服务器在协议回包里加了该字段,但因没“暴露”给外部,客户端就“看得到,吃不到”。
而响应首部 Access-Control-Expose-Headers
就是控制“暴露”的开关,它列出了哪些首部可以作为响应的一部分暴露给外部。
所以如果想要让客户端可以访问到其他的首部信息,服务器不仅要在heade里加入该首部,还要将它们在 Access-Control-Expose-Headers
里面列出来,即上面后端的处理方法
- 上一篇 »php 实现文件下载并重新命名
- 下一篇 »给linux 增加软件图标