前端 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 解码即可
