码迷,mamicode.com
首页 > 其他好文 > 详细

vue——通过post方法下载文件并重命名

时间:2021-01-27 13:22:02      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:默认   let   window   cache   href   elements   doc   end   ast   

参考: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)
          }
          that.$axios.post(‘xxx‘, // 封装的axios
         params,
        {responseType: "arraybuffer"} // 必须添加项 ).then(function (res) { const filename = decodeURI(res.headers[‘filename‘]); // 由后端设置下载文件名 let blob = new Blob([res.data], {type: ‘application/msword;charset=utf-8‘}); let a = document.createElement(‘a‘); let url = window.URL.createObjectURL(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 里面列出来,即上面后端的处理方法

vue——通过post方法下载文件并重命名

标签:默认   let   window   cache   href   elements   doc   end   ast   

原文地址:https://www.cnblogs.com/linjiangxian/p/14328872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!