前端下载文件一般使用的是blob
核心的步骤是获取后端响应的文件流,用blob创建一个临时的URL,然后创建一个隐藏的<a>标签,实现下载需求。
那就先上代码
function download(item) {
axios.get(getServerUrl() + "/teacher/output/" + classId.value + "/" + item, {
responseType: 'blob', // 告诉浏览器响应类型是 Blob
}).then((response) => {
let blob = new Blob([response.data]);
// 创建一个临时 URL,用于下载
const url = URL.createObjectURL(blob);
let fileName = item + '签到统计表.xls';
const a = document.createElement('a');
a.setAttribute('href', url);
a.setAttribute('download', fileName);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// 释放临时 URL
URL.revokeObjectURL(url);
})
}
如果后端响应的数据是一个二进制数据,那我们就得这是响应类型是blob,否则浏览器会默认按照json解析
至于后端如何向前端以文件流的形式发送文件,请看我的上一个随笔Java后端向前端返回文件流——实现下载功能
是否会有朋友有个疑问,前端要不要在new BLob里面设置content-type
,答案是不需要,其实你会发现设置与不设置效果一样,但如果后端没有设置,那么文件下载就会出问题。我之前在写一个web项目要实现一个下载功能,一直以为要前端规定格式,结果后端就没有设置,导致下载的文件格式错误。文章来源:https://www.toymoban.com/news/detail-678185.html
所以说,只要后端的文件流正确,响应类型设置正确,前端只需要将responseType
设置为blob
即可。文章来源地址https://www.toymoban.com/news/detail-678185.html
到了这里,关于前端实现文件下载功能——文件流的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!