a标签下载二进制数据浏览器下载显示进度

之前使用axios进行流处理文件下载的过程中，遇到大文件的话，axios就需要等待整个文件流都下载到内存中才会弹出浏览器的下载文件保存对话框，这种方式在下载小文件的场景没什么问题，但是遇到大文件，一方面是浏览器的下载保存对话框半天都不会响应客户，这样体验不是很好；另外一方面是受到客户端内存的限制。

一、效果图

二、主要代码

npm install streamsaver -S

解决
使用StreamSaver.js+fetch解决这个问题，fetch比axios区别在于只要响应马上就可以开始弹出浏览器下载保存对话框，并且不影响文件流下载，而axios非要等到整个文件流下完了才有响应。所以axios比较适合restful接口调用这种场景。

downLoadEXel(row) {
 fetch(
     `接口地址/接口/${
         row.id
     }?f_rnd=${new Date().getTime()}&traceId=${guid()
         .toString()
         .replace(/\-/g, '')
         .slice(0, 20)}`,
     {
         method: 'GET',
         cache: 'no-cache',
         headers: {
             'Content-Type': 'application/json',
             token: this.$store.state.token,
         },
     }
 ).then(res => {
     // 创建写入流 filename为下载的文件名
     const fileStream = streamSaver.createWriteStream(row.taskName + '表.zip', {
         size: res.headers.get('content-length'),
     })
     const readableStream = res.body
     // more optimized
     if (window.WritableStream && readableStream.pipeTo) {
         return readableStream.pipeTo(fileStream).then(() => console.log('done writing'))
     }
     window.writer = fileStream.getWriter()

     const reader = res.body.getReader()
     const pump = () =>
         reader
             .read()
             .then(res =>
                 res.done
                     ? window.writer.close()
                     : window.writer.write(res.value).then(pump)
             )

     pump()
 })

优化版（带总文件大小）

async downLoadEXel(row) {
  await 获取文件大小的接口(row.id).then(res => {
      this.file.size = res.data
  })
  fetch(
     `接口地址/接口/${
          row.id
      }?f_rnd=${new Date().getTime()}&traceId=${guid()
          .toString()
          .replace(/\-/g, '')
          .slice(0, 20)}`,
      {
          method: 'GET',
          cache: 'no-cache',
          headers: {
              'Content-Type': 'application/json',
              token: this.$store.state.token,
          },
      }
  ).then(res => {
      // 创建写入流 filename为下载的文件名
      const fileStream = streamSaver.createWriteStream(row.taskName + '.zip', {
          size: this.file.size,
      })
      const readableStream = res.body
      // more optimized
      if (window.WritableStream && readableStream.pipeTo) {
          return readableStream.pipeTo(fileStream).then(() => console.log('done writing'))
      }
  })
  }

链接: https://blog.csdn.net/weixin_44835957/article/details/120074364?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-120074364-blog-129226965.235%5Ev32%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-120074364-blog-129226965.235%5Ev32%5Epc_relevant_default_base&utm_relevant_index=6
链接: https://blog.csdn.net/fxtxz2/article/details/116452505?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-116452505-blog-125928100.235%5Ev32%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-116452505-blog-125928100.235%5Ev32%5Epc_relevant_default_base&utm_relevant_index=10
大文件分片下载(文件流形式) 链接: https://blog.csdn.net/qq_41069755/article/details/129215586?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-129215586-blog-126527551.235%5Ev33%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-129215586-blog-126527551.235%5Ev33%5Epc_relevant_default_base&utm_relevant_index=2