axios下载文件时获取返回头中文件名称

在很多时候下载文件后端返回的都是文件流,这个时候产品让获取后端返回的文档名称

前端代码

普通的下载文件

exportData({ ...form }).then(res => {
          let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }) // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
          let downloadElement = document.createElement('a')
          let href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          const time = dayjs().format('YYYY-MM-DD')
          downloadElement.download = form.deviceName + '-' + time + '-' + '.xlsx' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
      }).catch(() => {

      })

通过以上的代码就可以下载文件了,但是这个时候产品说下载后的文件名要通过后端返回,这个时候因为格式是文件流,所以后端会把文件名称放在返回头中

在图中有Content-Disposition: attachment;filename=GPS_2021070546025.xlsx这样的字段,就包含了文件名称,那就好办了接下来我们只需要获取这个Content-Disposition然后稍微处理一下就行。


exportData({ ...form }).then(res => { console.log(res) // res中获取header中的字段

完蛋,只有content-type这个字段,并没有我们需要Content-Disposition字段的数据,查了一些资料后发现,默认情况下是屏蔽了只能获取
– Content-Language
– Content-Type
– Expires
– Last-Modified
– Pragma

如果要获取其他的那么就需要后端处理

解决方案

要想取得其他的字段需要在服务器端设置Access-Control-Expose-Headers 配置前端想要获取的header,比如name

response.addHeader("name","这里是后端设置的文件名称.csv")
response.addHeader("Access-Control-Expose-Headers","name")