前端接收二进制文件流（使用blob对象）

时间：2025-03-28 09:37:32

前端在做管理系统开发时经常遇到的需求：下载文件入Excel，World，zip

处理方式有两种：

1.后端生成下载地址，前端调用

2.后端返回二进制文件流，前端转换后下载

本文主要介绍第二种

在向后端发起请求时，需要在请求中加上

responseType: 'blob'

这样在返回data中可以得到一个浏览器可以解析的blob数据

通过以下代码，可以将二进制数据转化为可下载文件，并通过a标签下载文件

let blob = new Blob([res],  { type: 'application/-excel' }) // 核心代码
let url = window.URL.createObjectURL(this.blob)
let link = document.createElement('a')
link.href = url

为了方便使用，我将这个过程封装为一个Download类，直接复制可使用，也能很轻松的拓展

/**
 * 流文件转化为对应格式的文件
 */
class Download {
  constructor() {
    this.blob = {}
    this.filename = ''
  }
 
  zip(res) {
    this.blob = new Blob([res],  { type: 'zip;charset=utf-8' })
    this.down()
  }
 
  xlsx(res) {
    this.blob = new Blob([res],  { type: 'application/-excel' })
    this.down()
  }
 
  down() {
    let url = window.URL.createObjectURL(this.blob)
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.download = `${this.filename}`
    document.body.appendChild(link)
    link.click()
    window.URL.revokeObjectURL(link.href)
    document.body.removeChild(link)
  }
}
 
export default Download

使用方法：

1.先new一个download对象；

2.为download对象属性filename赋值

3.下载Excel调用 xlsx方法，下载zip调用zip方法，把后端传递的data作为参数传入即可

const download = new Download()
download.filename = ''
download.xlsx(res.data)

有时文件名后端会通过响应头传递，一般放置在header的content-disposition中，通过以下方式可以获得名称，并为文件名转义

download.filename = decodeURI(res.headers['content-disposition'].split('=')[1])

代码很简洁，也很容易拓展，如果需要拓展其他类型文件，找到对应的Mime 类型，在类中编写新的方法即可

关于更多Mime介绍请参考：https:///media/media_mimeref.asp

相关文章