前端blob下载文件

在一个项目中, 需要下载excel, pdf, word, zip等数据模板, 而后端返回的是一个文件流, 前端就需要使用blob来下载
1.首先要在接口中添加 responseType: ‘blob’,

// 模板下载
export function downLoadModule(url,params = {}) {
    return request({
        url: url,
        method: 'get',
        responseType: 'blob',
        params
    })
}
  1. 通过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对象
  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值