在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

属性可以自定义文件名

uploadFile () {
      $http
        .uploadFile({}, this.data, {
          headers: {
            'content-disposition':'-----',
            responsType: '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)
          }
        })
    }