vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁(yè)面打開

更新時(shí)間：2023年02月08日 16:16:24 作者：小薯片子

這篇文章主要介紹了vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁(yè)面打開問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁(yè)面打開

參考了很多寫法，最終這種方法可以實(shí)現(xiàn)。

具體實(shí)現(xiàn)方法：

將下面這兩個(gè)方法寫在vue中，直接調(diào)用viewPdf函數(shù)，傳參為要轉(zhuǎn)換的base64流數(shù)據(jù)

    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轉(zhuǎn)二進(jìn)制文件流并顯示

1.判斷base類型這里提供圖片和pdf

  function base64FileHeaderMapper(fileBase64) {
    let fileHeader = new Map();
    //獲取不同文件的文件頭前3個(gè)字作為判斷依據(jù)
    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不支持箭頭函數(shù)  兼容IE需要改寫
      if (k == fileBase64.substr(0, 3)) {
        res = v;
      }
    });
    //如果不在map中返回unknown file
    if (res == "") {
      res = "unknown file";
    }
    //否則返回map中的value值
    return res;
  }

2.base轉(zhuǎn)二進(jìn)制文件流

  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);解碼報(bào)錯(cuò)，不解碼也無法加載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轉(zhuǎn)二進(jìn)制</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個(gè)字作為判斷依據(jù)
      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) => {//箭頭函數(shù)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>