下载Blob文件及IE&Edge兼容

技术分享

一.背景

IE或Edge浏览器下，在导出(下载)的时候，有时会返回blob文件流的数据，而不是返回URL地址。此时表现为，能够通过单独访问URL可导出文件，但做为http或https请求时，却无法导出(下载)文件。这主要是因为IE或Edge浏览器挂载文件的方式与Chrome浏览器有所不同。下面对于这种场景，谈谈其具体应用。

二.应用

第一步：在window挂载下载文件的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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.createOjbectURL(blob)
    var a = document.createElement('a')
    a.href = url
    a.target = target
    a.setAttribute('download',fileName+fileType)
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url)
  }
}

第二步：在使用 axios 请求的时候，在参数中加入responseType: 'blob'

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

三.兼容

IE/Edge/Chrome 浏览器，使用 window.URL.createObjectURL 创建 Blob 链接的区别，可通过在控制台输入window.navigator.userAgent 查看浏览器的版本。

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

1
2
3
//浏览器版本
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.Edge生成带有当前域名的标准 blob:链接, 却下载不了，需要使用 window.navigator.msSaveOrOpenBlob 方法创建 blob 链接方可下载

1
2
Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36 Edg/87.0.664.75
blob:http://localhost:8080/a05dd411-e25a-4f19-9c70-715a0f0b05c6

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

1
2
Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36
blob:http://localhost:8080/9f3a8b63-02a7-43e5-865b-9a54051040a7