前端实现文件下载

在一个项目中, 需要下载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对象

原文链接：https://blog.csdn.net/weixin_42792507/article/details/120362608