window.URL.createObjectURL下载Blob文件及IE/Edge兼容

前景

在导出文件的时候，有时候会返回blob文件流的数据，而不是返回URL地址，对于这种场景，下面谈谈其应用。

应用

在window挂载下载文件的方法

window.downFile = function (resBlob, fileName, fileType = '.xls', target = '_self') {
  var blob = new Blob([resBlob], {
    type: 'application/vnd.ms-excel;charset=utf-8'
  })
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    // 兼容IE/Edge
    window.navigator.msSaveOrOpenBlob(blob, fileName + fileType)
  } else {
    var url = window.URL.createObjectURL(blob)
    var a = document.createElement('a')
    a.href = url
    a.target = target
    a.style.display = 'none'
    a.setAttribute('download', fileName + fileType)
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url) 
  }
}

在使用axios请求的时候，加上responseType: 'blob'入参

const res = await this.$http({ data: {}, responseType: 'blob'})
window.downFile(res.blob, '文件下载')

兼容

使用window.URL.createObjectURL创建Blob链接区别

1. IE生成不带域名的blob:链接

Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
blob:8279D2BD-AA94-410D-B5D1-3DFD881E49D9

2. chrome生成带有当前域名的标准blob:链接

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36
blob:http://localhost:8080/9f3a8b63-02a7-43e5-865b-9a54051040a7

3. edge生成带有当前域名的标准blob:链接，却下载不了，然而存在window.navigator.msSaveOrOpenBlob方法，使用该方法创建Blob链接可以下载

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362
blob:http://localhost:8080/a05dd411-e25a-4f19-9c70-715a0f0b05c6