前端 js vue 获取服务端返回的文件的原始文件名

前端 js vue 获取服务端返回的文件的原始文件名

前端文件下载的几种方式

• 后端直接给文件url，
  这种情况很简单，直接将url付给a标签，a标签加上download属性即可

• 后端返回的是文件流，但是请求是get请求
  此种情况下，要获取文件原始文件名，也简单。一种是使用window.open(url),一种是直接将请求地址给a标签

• 后端由于需要，只能使用post请求（比如下载文件时需要携带过多的参数），使用这种方式获取下载文件的原始文件名，比之前两种麻烦些，本文重点说的是这种情况

  思路如下：
  1） 使用ajax发起请求，指定接收类型为blob
  2）读取请求返回的头部信息里的content-disposition，返回的文件名就在这里面
  3）使用URL.createObjectURL将请求的blob数据转为可下载的url地址
  4）使用a标签下载

  代码：

  export const downloadFile = (url,data)=>{
  function down(fileUrl,fileName){
  fileName=decodeURIComponent(fileName)
  let a=document.createElement('a')
  a.setAttribute('href',fileUrl)
  a.setAttribute('download',fileName)
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  }
  axios({
    url,
    data,
    responseType:'blob',
    method:'POST',
  }).then(res=>{
    let data=res.data
    let dis= res.headers['content-disposition']
    let url=URL.createObjectURL(data)
    let fileName=dis.split('attachment;filename=')[1]
    down(url,fileName)
  })
  

}
````
需要说明的是，content-disposition 取值是res.headers[‘content-disposition’]，res.headers[‘content-disposition’] 的值是如下类型字符串 attachment;filename=xxx.xlsx，需要自己切分。另外，如果文件名是中文，则需要后端配合转码，后端在发送文件时，组要将文件名进行java.net.URLEncoder.encode(fileName, “UTF8”) 转码，否则前端接收到的 res.headers[‘content-disposition’] 的中文信息是乱码的。后端转码后，前端通过decodeURIComponent 解码即可