前端如何实现二进制流文件下载

小半 • 2023年7月24日下午10:25 • 微信精选 • 阅读 345

❝

在日常开发中，我们经常会遇到需要下载二进制流数据的需求，比如报表导出就是一个典型的案例！

本文的案例主要是axios，其他请求都是类似的！

❞

设置请求体

我们既然知道后端返回的是二进制流格式，所以就要对请求进行声明！如果不进行设置，会导致文件损坏，无法使用！(血的教训)

responseType

不设置也是能下载成功的，但是文件是坏的！

axios.post(url, option, { responseType: 'blob' })

处理响应文件

创建Blob

// res 是响应体
// data 是后端返回的二进制
// type 可以自行设置可以去响应体的

const { data, headers } = res
new Blob([data], { type: headers['content-type'] })

兼容处理

主要是为了兼容ie浏览器和使用了与ie浏览器相同的内核的低版本处理

// blob 就是上一步产生的blob
// filename 是下载的文件名称

if ('msSaveOrOpenBlob' in navigator) {
  window.navigator.msSaveOrOpenBlob(blob, filename);
}else{
  // 下载方法
}

下载方法

创建a标签
模拟点击
释放a标签

 const dom = document.createElement('a')
 // 创建一个新的对象URL，该对象URL可以代表某一个指定的file对象或者bold对象。
 const downUrl = window.URL.createObjectURL(blob)
 dom.href = downUrl
 dom.download = fileName
 dom.style.display = 'none'
 document.body.appendChild(dom)
 dom.click()
 dom.parentNode.removeChild(dom)
 // 释放downUrl 性能考虑
 // 当前窗口关闭会自动释放
 window.URL.revokeObjectURL(downUrl)

完整处理

 const res = await axios.post(url,options, { responseType: 'blob' })
 const { data, headers } = res
 const blob = new Blob([data], { type: headers['content-type'] })
  if ('msSaveOrOpenBlob' in navigator) {
      window.navigator.msSaveOrOpenBlob(blob, filename);
  } else {
      const dom = document.createElement('a')
      const downUrl = window.URL.createObjectURL(blob)
      dom.href = downUrl
      dom.download = fileName
      dom.style.display = 'none'
      document.body.appendChild(dom)
      dom.click()
      dom.parentNode.removeChild(dom)
      window.URL.revokeObjectURL(downUrl)
  }