js中文件流下载

需求：文件下载，通过向后台请求接口，返回的结果一般有两种方式：

1. 后台返回文件http地址（后台会在服务器生成，前端请求url再下载一遍，浪费服务器资源，优点：前端处理方便）

2. 后台返回二进制文件流（后台不会再服务器生成文件，只需前台进行解析，不占用服务器资源）

代码

1.http地址形式

window.location.href="后台返回的地址"

window.open(url, '_blank')

 const a = document.createElement('a')
 a.setAttribute('href', url)
 a.setAttribute('target', '_blank')
 a.setAttribute('download', 'xxx.xlsx')
 a.click()

2.http地址形式下载音频文件

       fetch(filePath).then(res => res.blob()).then(blob => {
        const a = document.createElement('a')
        document.body.appendChild(a)
        a.style.display = 'none'
        // 使用获取到的blob对象创建的url
        const url = window.URL.createObjectURL(blob)
        a.href = url
        a.download = '语音音频.wav'
        a.click()
        document.body.removeChild(a)
        // 移除blob对象的url
        window.URL.revokeObjectURL(url)
      })

2.二进制文件流形式

1）base64转成Blob

b64toBlob (b64Data, contentType, sliceSize) {
      contentType = contentType || ''
      sliceSize = sliceSize || 512
      var byteCharacters = atob(b64Data)
      var byteArrays = []
      for (
        var offset = 0;
        offset < byteCharacters.length;
        offset += sliceSize
      ) {
        var slice = byteCharacters.slice(offset, offset + sliceSize)
        var byteNumbers = new Array(slice.length)
        for (var i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i)
        }
        var byteArray = new Uint8Array(byteNumbers)
        byteArrays.push(byteArray)
      }

      var blob = new Blob(byteArrays, { type: contentType })
      return blob
    },

2）文件流下载

/**
* @params {object} data 数据流
* @params {string} name 文件名称
*/  

downloadAudioStream (data, name) {
      // ArrayBuffer 转为 Blob
      const blob = new Blob([data], { type: 'audio/wav' })
      const objectUrl = URL.createObjectURL(blob)
      const a = document.createElement('a')
      document.body.appendChild(a)
      a.style.display = 'none'
      a.setAttribute('href', objectUrl)
      a.setAttribute('target', '_blank')
      a.setAttribute('download', name + '.wav')
      a.click()
      URL.revokeObjectURL(objectUrl)
      document.body.removeChild(a)
    },

 

实现原理就是先把服务端返回的数据流通过URL.createObjectURL()方法转成一个URL，这个URL是存放在内存中的，URL的生命周期是和创建的它的document绑定，也就是说在document unload的时候也会得到内存释放；然后通过设置<a></a>的download属性值，从而实现导出功能，最后再手动释放下创建的URL对象的内存

参考链接：https://segmentfault.com/a/1190000020705153

参考链接：https://blog.csdn.net/qq_37753933/article/details/102792923