vue如何将base64流数据转成pdf文件并在新页面打开

更新时间：2023年02月08日 16:16:24 作者：小薯片子

这篇文章主要介绍了vue如何将base64流数据转成pdf文件并在新页面打开问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

将base64流数据转成pdf文件并在新页面打开

参考了很多写法，最终这种方法可以实现。

具体实现方法：

将下面这两个方法写在vue中，直接调用viewPdf函数，传参为要转换的base64流数据

    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' })
    },

base64转二进制文件流并显示

1.判断base类型这里提供图片和pdf

  function base64FileHeaderMapper(fileBase64) {
    let fileHeader = new Map();
    //获取不同文件的文件头前3个字作为判断依据
    fileHeader.set("/9j", "jpeg");
    fileHeader.set("iVB", "png");
    // fileHeader.set("Qk0", "BMP")
    // fileHeader.set("SUk", "TIFF")
    fileHeader.set("JVB", "pdf");
    // fileHeader.set("UEs", "OFD")
    let res = "";
    //遍历map中所提及的文件头特征
    fileHeader.forEach((v, k) => {//IE不支持箭头函数  兼容IE需要改写
      if (k == fileBase64.substr(0, 3)) {
        res = v;
      }
    });
    //如果不在map中返回unknown file
    if (res == "") {
      res = "unknown file";
    }
    //否则返回map中的value值
    return res;
  }

2.base转二进制文件流

  function base64ToBlob(code, type) {
    code = code.replace(/[\n\r]/g, "");
    let raw = window.atob(code);
    let rawLength = raw.length;
    let uint8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; i++) {
      uint8Array[i] = raw.charCodeAt(i);
    }
    if ("pdf" === type) {
      return new Blob([uint8Array], { type: "application/pdf" });
    } else {
      return new Blob([uint8Array], { type: "image/jpeg" });
    }
  }

3.填坑

base64 字符串中不含 data:application/pdf;base64,

否则 window.atob(code);解码报错，不解码也无法加载pdf

在这里插入图片描述

4.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>base转二进制</title>
</head>

<body>
  <div style="width: 100vw;height: 100vh">
    <iframe width="100%" height="100%" src="" frameborder="0" id="iframe"></iframe>
  </div>
  <script>
    let iframe = document.getElementById("iframe")
    let base = "JVBERi0xLjQKJdPr6eEKMSAwIG9iago8PC9DcmVhdG9yIChNb3ppbGxhLzUuMC..."; //base64不完整
    let s = base64FileHeaderMapper(base);
    let blob = base64ToBlob(base, s);
    iframe.src = URL.createObjectURL(blob);

    function base64FileHeaderMapper(fileBase64) {
      let fileHeader = new Map();
      //获取不同文件的文件头前3个字作为判断依据
      fileHeader.set("/9j", "jpeg");
      fileHeader.set("iVB", "png");
      // fileHeader.set("Qk0", "BMP")
      // fileHeader.set("SUk", "TIFF")
      fileHeader.set("JVB", "pdf");
      // fileHeader.set("UEs", "OFD")
      let res = "";
      //遍历map中所提及的文件头特征
      fileHeader.forEach((v, k) => {//箭头函数IE不支持 兼容IE需改写
        if (k == fileBase64.substr(0, 3)) {
          res = v;
        }
      });
      //如果不在map中返回unknown file
      if (res == "") {
        res = "unknown file";
      }
      //否则返回map中的value值
      return res;
    }

    function base64ToBlob(code, type) {
      code = code.replace(/[\n\r]/g, "");
      let raw = window.atob(code);
      let rawLength = raw.length;
      let uint8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; i++) {
        uint8Array[i] = raw.charCodeAt(i);
      }
      if ("pdf" === type) {
        return new Blob([uint8Array], {
          type: "application/pdf"
        });
      } else {
        return new Blob([uint8Array], {
          type: "image/jpeg"
        });
      }
    }
  </script>
</body>

</html>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue.js父子组件传参的原理与实现方法
这篇文章主要介绍了vue.js父子组件传参的原理与实现方法,结合实例形式分析了vue.js父子组件传参的基本原理、实现方法与相关操作注意事项,需要的朋友可以参考下
2023-04-04
Vue Treeselect树形下拉框的使用小结
树形下拉框是一个带有下列树形结构的下拉框,本文主要介绍了Vue Treeselect树形下拉框的使用小结,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10
vue组件引用另一个组件出现组件不显示的问题及解决
这篇文章主要介绍了vue组件引用另一个组件出现组件不显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue实现动态查询规则生成组件
今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景，本文主要介绍了Vue动态查询规则生成组件，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
基于vue 实现token验证的实例代码
这篇文章主要介绍了基于vue 实现token验证的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-12-12
Vue组件开发之异步组件详解
这篇文章主要为大家详细介绍了Vue组件开发之异步组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
Vue修改Dom不生效的解决
这篇文章主要介绍了Vue修改Dom不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
如何使用Vue3实现文章内容中多个"关键词"标记高亮显示
高亮显示是我们日常开发中经常会遇到的需求,下面这篇文章主要给大家介绍了关于如何使用Vue3实现文章内容中多个"关键词"标记高亮显示的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
vue实现excel文件的导入和读取完整步骤
Vue的数据绑定功能非常强大,很适合用来读取Excel内容,这篇文章主要给大家介绍了关于vue实现excel文件的导入和读取的相关资料,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-10-10
vue中使用AJAX实现读取来自XML文件的信息
这篇文章主要为大家详细介绍了vue中如何使用AJAX实现读取来自XML文件的信息,文中的示例代码讲解详细,具有一定的借鉴价值,需要的小伙伴可以参考下
2023-12-12