在Vue中利用Blob对象实现下载文件的超详细教程

知识点1:Blob(Binary Large Object): 二进制大数据对象

注意:如果下载文件是文本类型的(如: .txt, .js之类的), 那么用responseType: 'text'也可以, 但是如果下载的文件是图片, 视频之类的, 就得用arraybuffer或blob,更多详情请查看MDN

知识点2:从Blob中读取内容的方法我采用的是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取:

知识点3:这里采用的是a标签来打开下载页面,其实通过a标签下载的方式,同window.open()是一样的,唯一的优点是可以自定义下载后的文件名,a标签里有download属性可以自定义文件名

方法一:

  • 发请求获取到文件数据
  • new FileReader()解析获取到的数据,JSON.Parse查看是否可反序列化
  • 无法反序列化代表是blob格式数据,随即建立a标签实现在页面download
uploadFile () {
      $http
        request({
            url: "/bondParser/api/getParser",
            method: "post",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            responseType: "blob",
        })
        .then(res => {
//读取文件
           // 1.创建 FileReader 对象
          const fileReader = new FileReader()
          // 2.开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串以表示所读取的文件内容。
          fileReader.readAsText(res.data) // 3.以字符串的形式读取出来
          fileReader.onload = () => {
            // 4.该事件在读取操作完成时触发。注意:此时this指向fileReader
            let result = JSON.parse(this.result) //获取的结果根据后端返回的数据类型选用json.parse
            if (result.code !== 0) {
              //如果读取失败进行响应的操作或提示
              return this.$message.error('文件读取失败')
            }
          }
//导出文件
          // 通过a标签打开新页面下载文件
          const a = document.createElement('a')
          // 构造一个blob对象来处理数据
          const blob = new Blob[res.data]
          if (res.headers['content-disposition']) {
            // 拿到用户上传的文件名
            let fileName = res.headers['content-dispositon'].splice('filename=')[1]
            fileName = decodeURI(encodeURI(fileName))
            // URL.createObjectURL()会产生一个url字符串,可以像使用普通 URL 那样使用它,比如用在 img.src 上
            a.href = URL.createObjectURL(blob)
            // a标签里有download属性可以自定义文件名
            a.setAttribute(
              'download',
              fileName
            )
            document.body.appendChild(a)
            a.click();
            document.body.removeChild(a)
          }
        })
    }

 方法二:

  • 发请求获取数据
  • 使用数据的.text()方法并JSON.parse返序列化查看是否为blob格式数据
  • 验证为blob后借助file-saver插件的saveAS方法下载对应格式文件
import { saveAs } from "file-saver";

uploadFile () {
      $http
        request({
            url: "/bondParser/api/getParser",
            method: "post",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            responseType: "blob",
        })
        .then(async (res) => {
          const text = await res.data.text();
          try {
            const errMsg = JSON.parse(text).message || "文件读取失败!";
            this.$message.error(errMsg);
          } catch {
            const fileName = res.headers["content-disposition"]
              .split(";")[2]
              .split("''")[1];
            saveAs(new Blob([res.data]), fileName);
          }
        })
        .catch(() => {
          this.$message.error("下载文件出现错误,请联系管理员!");
        })
};

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值