在一个项目中, 需要下载excel, pdf, word, zip等数据模板, 而后端返回的是一个文件流, 前端就需要使用blob来下载
1.首先要在接口中添加 responseType: ‘blob’,
// 模板下载
export function downLoadModule(url,params = {}) {
return request({
url: url,
method: 'get',
responseType: 'blob',
params
})
}
- 通过Blob对象,我们在前端代码中就可以动态生成文件,提供 给浏览器下载, 在每次调用createObjectURL()方法时,都会创建一个新的URL对象,即使你已经用相同的对象作为参数创建过。当不再需要这些URL对象时,每个对象必须通过调用URL.revokeObjectURL()方法来释放。浏览器会在文档退出时自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。
window.URL.revokeObjectURL(objectURL);
3.new Blob()中的type类型可以参考MDN:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
// 下载模板
let res = await downLoadModule(this.downLoadModuleUrl,{});
console.log('模板地址',res)
let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
console.log("res", res);
console.log("blob", blob);
const $link = document.createElement("a");
$link.href = URL.createObjectURL(blob);
$link.download = `${this.title}数据模板.xlsx`
$link.click();
document.body.appendChild($link);
document.body.removeChild($link); // 下载完成移除元素
window.URL.revokeObjectURL($link.href); // 释放掉blob对象