文件流下载(blob)

本文详细介绍了如何在JavaScript中利用Blob对象处理文件流,实现前端无刷新、动态下载大文件的功能。通过创建Blob对象,结合URL.createObjectURL方法生成临时下载链接,再触发浏览器的下载行为,可以有效地避免内存压力并提升用户体验。
摘要由CSDN通过智能技术生成
downloadFile () {
    const _this = this
    axios({
      url: this.url,
      method: this.method,
      responseType: 'blob',
      params: this.method === 'get' ? this.data : undefined,
      data: this.method === 'post' ? this.data : undefined
    }).then(res => {
      const fileData = res.data
      const fileReader = new FileReader()
      fileReader.onload = function () {
        try {
          const jsonData = JSON.parse(this.result)
          if (jsonData.error) {
            throw new Error(`${jsonData.error.message}`)
          }
        } catch {
          // 解析成对象失败,说明是正常的文件流
          const content = res.data
          // 构造一个blob对象来处理数据
          const blob = new Blob([content]) 
          
          const link = document.createElement('a')
          // 获取headers中的filename文件名
          const temp = res.headers['co
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值