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 使用monaco实现代码高亮
这篇文章主要介绍了vue 使用monaco实现代码高亮的方法，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
vue element-ul实现展开和收起功能的实例代码
这篇文章主要介绍了vue element-ul实现展开和收起功能的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-11-11
vue3使用Pinia修改state的三种方法(直接修改，$patch，actions)
Vue3 Pinia是一个状态管理库,专门为Vue3设计优化,它提供了一种简单而强大的方式来管理应用程序的状态,并且与Vue3的响应式系统紧密集成,本文给大家介绍了vue3使用Pinia修改state的三种方法,需要的朋友可以参考下
2024-03-03
vue实现横屏滚动公告效果
这篇文章主要为大家详细介绍了vue实现横屏滚动公告效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue3+ts如何通过lodash实现防抖节流详解
loadsh是一个工具库，我们通常使用loadsh的debounce函数处理防抖,下面这篇文章主要给大家介绍了关于vue3+ts如何通过lodash实现防抖节流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
Vue组件化开发思考
这篇文章主要介绍了Vue组件化开发的思考以及相关的原理介绍，如果你对此有兴趣，可以学习参考下。
2018-02-02
Vue实现图书管理案例
这篇文章主要为大家详细介绍了Vue实现图书管理案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
vue遍历中存在el-form之踩坑记录
这篇文章主要介绍了vue遍历中存在el-form之踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
关于vue.js发布后路径引用的问题解决
最近在vue.js项目发布后发现了一个关于路径的问题，发现网上关于这个的资料较少，所以给大家总结下，下面这篇文章主要给大家介绍了如何解决关于vue.js发布后路径引用的问题，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-08-08
Vue.js实现文件上传压缩优化处理技巧
这篇文章主要介绍了Vue.js实现文件上传压缩优化处理,本文给大家介绍两种方法一种是借助canvas的封装的文件压缩上传，二是使用compressorjs第三方插件实现，本文给大家介绍的非常详细需要的朋友可以参考下
2022-11-11