vue——通过get、post方法下载文件并重命名
参考:https://blog.csdn.net/u011301203/article/details/102629952
https://www.cnblogs.com/codesyofo/p/14142197.html
1.get
fetch无需安装依赖,可直接使用
download(url, params, fileName) { const token = localStorage.getItem('token') || '' fetch(`${url}?${new URLSearchParams(params)}`, { "headers": { "X-Access-Token": token }, "method": "GET", }) .then(res => res.blob()) // 此行不要再增加其他代码,否则下载的文件内容会为undefined /* 若要增加代码,如下: .then((res) => { console.log('res', res); res.blob().then((res) => { ... }) */ .then(res => { const blob = new Blob([res]); // // 将二进制流转为blob if ('download' in document.createElement('a')) { console.log('非 IE') // 非IE下载 const elink = document.createElement('a') elink.download = fileName; // 设置下载文件名 elink.style.display = 'none' elink.href = URL.createObjectURL(blob) // 创建新的url并指向file对象或blob对象的地址 document.body.appendChild(elink) elink.click() URL.revokeObjectURL(elink.href) // 释放URL 对象 document.body.removeChild(elink) } else { console.log('IE') // IE10+下载 // @ts-ignore navigator.msSaveBlob(blob, fileName) } }) }
2.post
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); // 释放内存 }) }
当需要后端在返回headers中,包含下载文件名时,后端需要修改部分:
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
response.setHeader("Content-Disposition", ...)
出现的问题1:
现象
跨域
原因
后端响应头headers未设置,设置好后headers大概如下:
出现的问题2:
现象
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
里面列出来,即上面后端的处理方法