本文介绍如何在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标签进行下载即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。