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

  1. 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

  1. 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

在这里插入图片描述

  • 13
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值