1、背景

通常有一些后端框架为了安全或其他目的并不支持文件下载，服务器也不向外暴露直接访问文件的地址。所以只能返回文件流数据前端自行处理流数据并下载。

2、base64

base64是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码。

3、blob

blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

4、base64转blob

b64toBlob(b64Data, contentType, sliceSize) {
      contentType = contentType || '';
      sliceSize = sliceSize || 512
      let byteCharaters = atob(b64Data)
      let byteArrays = []
      for (let i = 0; i < byteCharaters.length; i += sliceSize) {
        let slice = byteCharaters.slice(i, i + sliceSize)
        let byteNumbers = new Array(slice.length)
        for (let j = 0; j < slice.length; j++) {
          byteNumbers[j] = slice.charCodeAt(j)
        }
        let byteArray = new Uint8Array(byteNumbers)
        byteArrays.push(byteArray)
      }
      let blob = new Blob(byteArrays, { type : contentType})
      return blob
 }

5、拿到后台返回的流数据转文件并下载

  downloadExcel(item) {
    let that = this
    let name = '下载内容' + new Date()
    new this.$VService.DataService({
      url: that.$VConfig.inters.iQuery.getExportFile,
      data: {
        exportId: item.export_id
      },
      success: function(d) {
        if (!d.data) {
          return
        }
        let fileName = name + '.' + 'xls'
        let blob = that.b64toBlob(d.data, 'application/vnd.vnd.ms-excel')
        if (navigator.msSaveBlob) { // 该方法兼容ie10，允许用户在客户端上保存文件，方法如同从 Internet 下载文件
          navigator.msSaveOrOpenBlob(blob, fileName)
        } else {  // 创建一个a标签，触发下载点击事件
          let btnDownload = document.getElementById('btnDownload')
          btnDownload.download = fileName
          btnDownload.href = URL.createObjectURL(blob)
          btnDownload.click()
        }
      }
    }).request()
  },

6、contentType与文件对应表

.doc
application/msword
.dot
application/msword
.docx
application/vnd.openxmlformats-officedocument.wordprocessingml.document
.dotx
application/vnd.openxmlformats-officedocument.wordprocessingml.template
.docm
application/vnd.ms-word.document.macroEnabled.12
.dotm
application/vnd.ms-word.template.macroEnabled.12
.xls
application/vnd.ms-excel
.xlt
application/vnd.ms-excel
.xla
application/vnd.ms-excel
.xlsx
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xltx
application/vnd.openxmlformats-officedocument.spreadsheetml.template
.xlsm
application/vnd.ms-excel.sheet.macroEnabled.12
.xltm
application/vnd.ms-excel.template.macroEnabled.12
.xlam
application/vnd.ms-excel.addin.macroEnabled.12
.xlsb
application/vnd.ms-excel.sheet.binary.macroEnabled.12
.ppt
application/vnd.ms-powerpoint
.pot
application/vnd.ms-powerpoint
.pps
application/vnd.ms-powerpoint
.ppa
application/vnd.ms-powerpoint
.pptx
application/vnd.openxmlformats-officedocument.presentationml.presentation
.potx
application/vnd.openxmlformats-officedocument.presentationml.template
.ppsx
application/vnd.openxmlformats-officedocument.presentationml.slideshow
.ppam
application/vnd.ms-powerpoint.addin.macroEnabled.12
.pptm
application/vnd.ms-powerpoint.presentation.macroEnabled.12
.potm
application/vnd.ms-powerpoint.template.macroEnabled.12
.ppsm
application/vnd.ms-powerpoint.slideshow.macroEnabled.12

7、post请求二进制返回数据

// post请求二进制返回数据时，需要设置请求头responseType为arraybuffer
responseType: arraybuffer
{
  let blob = new Blob(d.data, 'application/vnd.vnd.ms-excel')
}
// 这样就可以得到blob数据完成下载