前端下载文件流并且获取heads中的filename文件名且解决中文乱码的方法

最新推荐文章于 2025-06-25 19:12:13 发布

原创最新推荐文章于 2025-06-25 19:12:13 发布 · 1.5w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#文件流下载 #blob #decode解码 #vue #fileName获取编译

本文介绍了一种在后台返回文件流的情况下，通过axios实现带token的文件下载功能的方法。具体步骤包括：设置axios请求参数，如method、url、params及responseType；创建Blob对象存储响应数据；从响应头中解析文件名；使用iconv-lite解决中文文件名乱码问题；最后，创建并操作a标签完成文件下载。

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

/**

加token的下载功能实现–后台为返回文件流
@param {[type]} url [description]
@param {[type]} params [description]

@return {[type]} [description]
*/
function axgetdata(url,params){
axios({
method: ‘get’,
url: url,
params: params,
responseType: ‘blob’
}).then((res) => {

 const link = document.createElement('a')
 let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
 //获取heads中的filename文件名
 let temp = res.headers["content-disposition"].split(";")[1].split("filename=")[1];
 //对文件名乱码转义--【Node.js】使用iconv-lite解决中文乱码
 let iconv = require('iconv-lite'); 
     iconv.skipDecodeWarning = true;//忽略警告
 let fileName = iconv.decode(temp, 'gbk');
 console.log('fileName_',fileName)
 // return
 link.style.display = 'none'
 link.href = URL.createObjectURL(blob);
 link.setAttribute('download', fileName)
 document.body.appendChild(link)
 link.click()
 document.body.removeChild(link)

}).catch(error => {