IE10+ 二进制流保存文件兼容问题

最新推荐文章于 2025-02-27 15:41:58 发布

85544444444444444

最新推荐文章于 2025-02-27 15:41:58 发布

阅读量697

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/u012672794/article/details/122088786

版权

IE10+用法：

1.msSaveBlob：只提供一个保存按钮

window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');

2.msSaveOrOpenBlob：提供保存和打开按钮

window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt');

案例：如下为保存二维码图片（兼容IE10+）

downCode() {
      //下载二维码图片
      const fileName = `${new Date().getTime()}.png`
      let img = document.getElementById('qrcode').getElementsByTagName('img')[0].src
      let aLink = document.createElement('a')
      let blob = this.base64ToBlob(img)
      // 兼容IE10
      if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
        return
      }
      //谷歌等其他浏览器
      let evt = document.createEvent("HTMLEvents")
      evt.initEvent("click", true, true) // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName
      aLink.href = URL.createObjectURL(blob);
      // aLink.dispatchEvent(evt);
      aLink.click()
    },
    //base64转blob                                                                                                                                                                                        
    base64ToBlob(code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length
      let uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], {type: contentType})
    },