JavaScript前端下载后台文件流并自动重命名代码实例
本文介绍如何在JavaScript前端接收后端返回的文件流,通过设置responseType为blob获取数据,并从响应头Content-Disposition中提取文件名,利用URL.createObjectURL和a标签实现文件的自动重命名与下载。
前端文件流下载配置与解析
在前端发起数据请求时,首先需要配置正确的请求参数。
url: '/app/downloadApp',
method: 'get',
responseType: 'blob',
params: data
关键步骤是将接收参数的格式设置为responseType: ‘blob',以确保后端返回的二进制数据能被正确识别为Blob对象。
downloadFile(res, fileName) {
if (!res) {
return
}
if (window.navigator.msSaveBlob) { // IE以及IE内核的浏览器
try {
window.navigator.msSaveBlob(res, fileName) // res为接口返回数据,这里请求的时候已经处理了,如果没处理需要在此之前自行处理var data = new Blob([res.data]) 注意这里需要是数组形式的,fileName就是下载之后的文件名
// window.navigator.msSaveOrOpenBlob(res, fileName); //此方法类似上面的方法,区别可自行百度
} catch (e) {
console.log(e)
}
} else {
let url = window.URL.createObjectURL(new Blob([res]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)// 文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
}
},
download(){
var data = {
appId:this.appId
}
downloadAppAjax(data).then(res => {
const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
console.log(filename)
this.downloadFile(res.data,filename)
})
}
调用后台接口如downloadAppAjax获取数据后,通常后端返回的数据中不包含直接的文件名。此时需要检查响应头中的Content-Disposition属性,其格式通常为attachment;filename=app.jpg,从中可以提取文件名。
为了实现下载时的自动重命名,需要从Content-Disposition属性值中解析出filename。这里使用decodeURI对Content-Disposition属性值进行解码,从而拿到准确的filename: 。
decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
在获取到文件流和文件名后,下一步是接收文件流并创建可访问的地址。
let url =window.URL.createObjectURL(new Blob([res]))
接着利用a标签进行下载即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比:哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45
无需安装环境,5款主流JavaScript在线运行工具推荐
2026-11-03 18:23:26
JS怎么将地址栏查询字符串转换为JSON对象
2026-11-03 18:10:29
