在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("下载文件出现错误，请联系管理员！");
        })
};