兼容ie——下载base64pdf格式文件

1.URL转blob

dataURLtoBlob (dataurl) {
   const bstr = atob(dataurl)
   let n = bstr.length
   const u8arr = new Uint8Array(n)
   while (n--) {
     u8arr[n] = bstr.charCodeAt(n)
   }
   return new Blob([u8arr], { type: 'pdf' }) // pdf下载
   // return new Blob([u8arr], { type: 'application/vnd.ms-excel' })    // 表格下载
 },
// 兼容IE浏览器下载文件
    getIEDown (data, companyName, projectName) {
      // 兼容ie浏览器写法
      const URL = this.dataURLtoBlob(data)
      const reader = new FileReader()
      reader.readAsDataURL(URL)
      reader.onload = function (e) {
        if (window.navigator.msSaveOrOpenBlob) {
          const bstr = atob(e.target.result.split(',')[1])
          let n = bstr.length
          const u8arr = new Uint8Array(n)
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
          }
          const blob = new Blob([u8arr])
          window.navigator.msSaveOrOpenBlob(blob, `${companyName}-${projectName}.pdf`)
        } else {
          const a = document.createElement('a')
          a.download = `${companyName}-${projectName}.pdf`
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      }
    },
this.getIEDown(data, this.companyName, this.projectName)

2.base64转blob

base64ToArrayBuffer (data) {
    let binaryString = window.atob(data)
    let binaryLen = binaryString.length
    let bytes = new Uint8Array(binaryLen)
    for (let i = 0; i < binaryLen; i++) {
      let ascii = binaryString.charCodeAt(i)
      bytes[i] = ascii
    }
    return bytes
  },
base64 (data, types, name) => {
  let arrBuffer = this.base64ToArrayBuffer(data)
  let newBlob = new Blob([arrBuffer], { type: types })
  // 兼容IE
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    // window.navigator.msSaveOrOpenBlob(newBlob)
    window.navigator.msSaveOrOpenBlob(newBlob, name)
  }
  let data1 = window.URL.createObjectURL(newBlob)
  let link = document.createElement('a')
  document.body.appendChild(link) // required in FF, optional for Chrome
  link.href = data1
  link.download = name
  link.click()
  window.URL.revokeObjectURL(data1)
  link.remove()
}
this.base64(data, 'mime', '下载文件名称')
### 实现微信浏览器中网页导出文件流的功能 在微信环境中,由于其内置浏览器的安全策略限制,直接通过网页实现文件下载存在一定的困难。然而,可以通过特定的技术手段来绕过这些限制并实现文件的导出和预览功能。 #### 技术背景 微信内置浏览器并不支持直接调用系统的文件下载功能[^1]。这意味着任何试图通过 JavaScript 或其他前端技术触发文件下载的行为都会被阻止。因此,在这种环境下,通常需要借助外部浏览器或者利用微信自身的 API 来完成这一需求。 #### 解决方案概述 一种常见的解决方案是将用户重定向至外部浏览器以执行文件下载操作[^2]。这可以使用 `window.open` 方法实现,从而允许访问更广泛的系统级功能。另一种更为复杂的办法是在 Vue.js 或 Nuxt.js 的上下文中设计一套完整的机制用于处理不同类型的文件 (如 Word 文档、Excel 表格等),并通过适配器确保跨平台兼容性[^3]。 对于更加深入的需求比如小程序内部的操作,则可能涉及到与后端交互获取数据流,并将其存储到设备上后再展示给用户的流程[^4]。 以下是基于上述理论的具体实施步骤: #### 使用 Window.Open 导向外部链接 最简单的做法就是当检测到当前运行环境为微信客户端时自动开启新窗口加载目标 URL 地址: ```javascript if (/MicroMessenger/i.test(navigator.userAgent)) { window.open('https://example.com/download'); } ``` #### 利用 Blob 对象创建虚拟文件链接 如果希望保持用户体验流畅而不跳出应用的话,也可以尝试构建一个临时性的二进制大对象(Blob)作为媒介传递所需资料内容: ```javascript function downloadFile(fileName, fileContent){ const blob = new Blob([fileContent], {type: 'application/octet-stream'}); if(window.navigator.msSaveOrOpenBlob){ // IE & Edge specific handling navigator.msSaveOrOpenBlob(blob, fileName); }else{ var elem = document.createElement('a'); elem.href = URL.createObjectURL(blob); elem.download = fileName; document.body.appendChild(elem); elem.click(); document.body.removeChild(elem); } } // Example usage with base64 encoded string as content downloadFile("test.pdf", atob("JVBERi0xLjQKJcfs...")); ``` 请注意这种方法仍然受限于各厂商各自的沙盒政策影响范围之内;某些情况下即使成功生成了可供点击使用的锚点标签也可能因为权限不足而失败。 #### 结合后端服务提供动态生成的内容 最后考虑把整个过程交给远程服务器负责——即先请求对应的资源项然后再依据实际情况决定下一步动作方向要么推送回客户端要么存放到本地缓存区等待进一步指示等等... 总之无论采取哪种途径都需充分考虑到实际应用场景下的特殊要求以及潜在风险因素等问题才行!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值