前端接收二进制文件流，通过blob对象转化为文件后下载

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

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

处理方式有两种：

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

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

 

本文主要介绍第二种

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

responseType: 'blob'

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

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

let blob = new Blob([res],  { type: 'application/-excel' }) // 核心代码
let url = ()
let link = ('a')
 = url

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

/**
 * 流文件转化为对应格式的文件
 */
class Download {
  constructor() {
     = {}
     = ''
  }

  zip(res) {
     = new Blob([res],  { type: 'zip;charset=utf-8' })
    ()
  }

  xlsx(res) {
     = new Blob([res],  { type: 'application/-excel' })
    ()
  }

  down() {
    let url = ()
    let link = ('a')
     = 'none'
     = url
     = `${}`
    (link)
    ()
    ()
    (link)
  }
}

export default Download

使用方法：

1.先new一个download对象；

2.为download对象属性filename赋值

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

const download = new Download()
 = ''
()

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

 = decodeURI(['content-disposition'].split('=')[1])

注意：无需显示调用down方法

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

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

相关文章