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

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

处理方式有两种：

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

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

 

本文主要介绍第二种

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

responseType: 'blob'

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

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

let blob = new Blob([res],  { type: 'application/vnd.ms-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/vnd.ms-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 = 'filename.xlsx'
download.xlsx(res.data)

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

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

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

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

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