vue-pdf預(yù)覽在線(xiàn)地址文件和本地文件（base64）

npm i vue-pdf

• vue-pdf最好別用4.2,因?yàn)樗蕾?lài)的pdfjs為2.5
• 但他會(huì)下載最新的2.16版本，這個(gè)版本和原來(lái)的2.5結(jié)構(gòu)目錄不一樣
• 一定要使用4.2的話(huà)就手動(dòng)裝一下pdfjs-dist的2.5.207版本
• ==> npm i pdfjs-dist@2.5.207

<template>
  <div class="VuePdf">
    <div>
      <div>
        <span>在線(xiàn)地址</span>
        <input type="text" v-model="remoteUrl" />
        <button @click="clickUrl">確定</button>
      </div>
      <div style="margin: 10px 0">
        <input type="file" @change="handelChange($event)" />
      </div>
    </div>

    <pdf :src="pdfSrc" v-for="i in numPages" :key="i" :page="i"></pdf>
  </div>
</template>

<script>
/**
 * vue-pdf最好別用4.2,因?yàn)樗蕾?lài)的pdfjs為2.5，
 * 但他會(huì)下載最新的2.16版本，這個(gè)版本和原來(lái)的2.5結(jié)構(gòu)目錄不一樣，
 * 一定要使用4.2的話(huà)就手動(dòng)裝一下pdfjs-dist的2.5.207 ==> npm i pdfjs-dist@2.5.207
 */

import pdf from "vue-pdf";
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js"; // 解決部分文字不顯示的問(wèn)題
export default {
  name: "VuePdf",
  components: { pdf },
  data() {
    return {
      pdfSrc: undefined,
      numPages: 1, //  pdf 文件總頁(yè)數(shù)
      remoteUrl:
        "https://raw.githubusercontent.com/xxxsjan/pdf-server/main/static/pdf/sample.pdf",
      // 也可以使用以下地址
      // 本地 "/static/test.pdf"  這個(gè)是放在public下的文件
      // 本地服務(wù) http://127.0.0.1:5000/pdf/sample.pdf"
    };
  },
  methods: {
    handelChange(e) {
      // https://www.cnblogs.com/-roc/p/14750732.html
      var file = new File(e.target.files, "r");
      var reader = new FileReader();
      reader.readAsDataURL(file);
      const vm = this;
      reader.onload = function () {
        // 方法一 傳base64 可能會(huì)報(bào)xhr錯(cuò)誤
        const url = reader.result.replace(/octet-stream/, "pdf");
        // 方法二 傳解碼后的base64
        const data = window.atob(
          reader.result.substring(reader.result.indexOf(",") + 1)
        );
        vm.createPdf({
          // url,
          data,
          cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",
          cMapPacked: true,
          CMapReaderFactory,
        });
      };
      reader.onerror = function (error) {
        console.log("Error: ", error);
      };
    },
    /**
     * 設(shè)置pdfSrc
     * @param {*} options 地址或者配置對(duì)象
     */
    createPdf(options) {
      var loadingTask = (this.pdfSrc = pdf.createLoadingTask(options));
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
          console.log("?? 獲取成功", loadingTask, this.numPages);
        })
        .catch((err) => {
          console.error("loadingTask 失敗", err);
        });
    },
    clickUrl() {
      this.createPdf(this.remoteUrl);
    },
  },
};
</script>

<style lang="scss" scoped></style>