前端如何获取响应头Content-Disposition中的filename参数

  • Z时代
  • 2024-03-15
  • 分类：IT

前端如何获取响应头Content-Disposition中的filename参数

问题描述

要求在下载文件时的文件名与响应头中的filename参数的取值相同,不使用xxx.txt这种命名.
后端返回的data中只有数据流,要获取文件名只能自己去响应头中获取,但不知道用什么方法获取..

相关代码

粘贴代码文本（请勿用截图）

  this.$axios
    .get(exportF(), { params, responseType: 'blob' }, { headers: { 'Content-Type': 'octet-stream;charset=UTF-8' } })
    .then(({ data }) => {
      console.log(data)
      let blob = new Blob([data], { type: 'application/octet-stream,charset=UTF-8' })
      // console.log(blob)
      let downloadElement = document.createElement('a')
      let href = window.URL.createObjectURL(blob) //创建下载的链接
      downloadElement.href = href
      downloadElement.download = 'xxx.txt' //下载后文件名
      console.log(document)
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      window.URL.revokeObjectURL(href) //释放掉blob对象
    })

回答：

首先后端需要设置，否则前端获取不到头信息：

 response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
 response.setHeader("Content-Disposition", ...)

然后前端可以获取值：

// 省略代码
var temp = res.headers["content-disposition"]
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) { 
   filename = matches[1].replace(/['"]/g, '');
}

以上是 前端如何获取响应头Content-Disposition中的filename参数 的全部内容， 来源链接： utcz.com/p/935661.html

回到顶部