前端js将base64数据转成pdf文件并打开

是刘小刘啊

于 2024-06-14 10:50:33 发布

阅读量501

点赞数 4

文章标签：前端 javascript pdf

本文链接：https://blog.csdn.net/weixin_43897062/article/details/139675523

版权

先用的在线预览方法如下：

openPDFOnline = (base64, contentType) => {
    const arr = base64.split(',');
    const contentIndex = arr.length > 1 ? 1 : 0;
    const bstr = atob(arr[contentIndex]);
    let leng = bstr.length;
    let u8arr = new Uint8Array(leng);
    while(leng--){
      u8arr[leng] =  bstr.charCodeAt(leng)
    }
    const blob = new Blob([u8arr],{type:contentType});
 
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob );
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
 
<a
    target="_blank"
    rel="noopener noreferrer"
    onClick={() => this.openPDFOnline(base64String,'application/pdf')}
>
    在新的页面打开PDF文件
</a>

参考链接
在本地可以正常预览，但是打包到app上就失效了，不知道是什么问题就换了一种写法如下：

    viewPdf(content) {
      if (!content) {
        this.$message.error('暂无意见')
        return
      }
      const blob = this.base64ToBlob(content)
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob)
      } else {
        const fileURL = URL.createObjectURL(blob)
        window.open(fileURL)
      }
    },
    base64ToBlob(code) {
      code = code.replace(/[\n\r]/g, '')
      // atob() 方法用于解码使用 base-64 编码的字符串。
      const raw = window.atob(code)
      const rawLength = raw.length
      const uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: 'application/pdf' })
    },

也是搜的别人的参考地址
在本地都可以正常实现功能