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

最新推荐文章于 2025-05-22 17:21:15 发布

东扯葫芦西扯瓜

最新推荐文章于 2025-05-22 17:21:15 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js vue 文章标签： js -disposition js获取服务端返回文件名

本文链接：https://blog.csdn.net/qq_41000974/article/details/121308517

vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

33 篇文章

订阅专栏

当后端通过POST请求提供文件流时，前端获取并下载文件的原始文件名变得复杂。文章详细介绍了如何利用axios发起POST请求，解析`content-disposition`头来获取文件名，并通过`URL.createObjectURL`创建下载链接，最后利用a标签实现文件下载。关键步骤包括解析响应头、转换Blob数据和设置a标签。注意，文件名中文处理需后端进行URLEncoder编码，前端用decodeURIComponent解码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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