【vue】pdfjs预览在线地址文件和本地文件（base64）

pdfjs预览在线地址文件和本地文件（base64）

版本2.0.943
版本不一样，可能会有差别，注意一下

<template>
  <div class="main-container">
    <div>
      <div>
        <span>在线地址</span>
        <input type="text" v-model="remoteUrl" />
        <button @click="clickUrl">确定</button>
      </div>
      <div style="margin: 10px 0">
        <input type="file" ref="fielinput" @change="fileChange" />
      </div>
    </div>

    <div class="canvas-container">
      <canvas ref="myCanvas" class="pdf-container" id="myCanvas"></canvas>
    </div>
    <div class="pagination-wrapper">
      <button @click="clickPre">上一页</button>
      <span>第{{ pageNo }} / {{ numPages }}页</span>
      <button @click="clickNext">下一页</button>
    </div>
  </div>
</template>

<script>
import PDFJS from "pdfjs-dist";

import workerSrc from "pdfjs-dist/build/pdf.worker.entry";
// PDFJS.workerSrc = workerSrc;
// PDFJS.GlobalWorkerOptions.workerSrc = workerSrc;

export default {
  name: "PdfjsViewRemote",
  data() {
    return {
      pdfDoc: null,
      pageNo: 1,
      numPages: 0,
      remoteUrl:
        "https://raw.githubusercontent.com/xxxsjan/pdf-server/main/static/pdf/sample.pdf",
    };
  },
  methods: {
    fileChange() {
      const inputDom = this.$refs.fielinput;
      const file = inputDom.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      const vm = this;
      reader.onload = () => {
        // 解码base64
        const data = atob(
          reader.result.substring(reader.result.indexOf(",") + 1)
        );
        vm.setPdfSrc({ data });
      };
    },
    setPdfSrc(opt) {
      const CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/"; // 引入pdf.js的字体
      const options = {
        cMapUrl: CMAP_URL,
        cMapPacked: true,
        ...opt,
      };
      PDFJS.getDocument(options).promise.then((pdf) => {
        console.log("url----------", pdf);

        this.pdfDoc = pdf;
        this.numPages = pdf.numPages;

        this.$nextTick(() => {
          this.renderPagePlus(1); // 复杂 考虑设备像素比
        });
      });
    },
    //  简单渲染
    renderPage(pdf, num) {
      pdf.getPage(num).then((pdf) => {
        const canvas = document.getElementById("myCanvas");
        const scale = 1;
        const viewport = pdf.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const ctx = canvas.getContext("2d");
        const renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };
        pdf.render(renderContext).then(() => {
          this.pageNo = num;
        });
      });
    },
    /**
     * 兼容渲染 https://lequ7.com/guan-yu-pdfpdfjsdist-mo-kuai-shi-xian-pdf-wen-jian-yu-lan-gong-neng.html
     * @param {*} num
     */
    renderPagePlus(num) {
      this.pdfDoc.getPage(num).then((page) => {
        const canvas = document.getElementById("myCanvas");
        // var vp = page.getViewport({ scale: 1 });
        var vp = page.getViewport(1);
        const ctx = canvas.getContext("2d");
        const dpr = window.devicePixelRatio || 1;
        const bsr =
          ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio ||
          1;
        const ratio = dpr / bsr;
        console.log("vp----", vp);
        console.log("dpr---", dpr);
        console.log("bsr---", bsr);
        console.log("window.innerWidth", window.innerWidth);

        const scale = window.innerWidth / vp.width;
        const viewport = page.getViewport(scale);
        canvas.width = viewport.width * ratio;
        canvas.height = viewport.height * ratio;
        canvas.style.width = viewport.width + "px";
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);

        const renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };

        page.render(renderContext).then(() => {
          this.pageNo = num;
        });
      });
    },
    clickPre() {
      this.pageNo = Math.max(this.pageNo - 1, 1);
      this.renderPagePlus(this.pageNo);
    },
    clickNext() {
      this.pageNo = Math.min(this.pageNo + 1, this.numPages);
      this.renderPagePlus(this.pageNo);
    },
    clickUrl() {
      this.setPdfSrc({ url: this.remoteUrl });
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.canvas-container {
  width: 420px;
  height: 747px;
  border: 1px dashed black;
  position: relative;
  display: flex;
  justify-content: center;
}

.pdf-container {
  width: 100%;
  height: 100%;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>