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

时间:2023-03-20 小薯片子人气:0

将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>

总结

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

加载全部内容