javascript - 如何在Vue项目中导入Mozilla PDF.js？

Question

问题很简单。如何将 PDF.js 库正确导入 Vuejs 项目？

当我记录它时，库是 undefined。

See my problem in a codesandbox live here .

这就是我现在尝试的方式:

<script>
import pdfjsLib from "pdfjs-dist/build/pdf";
// import { PDFViewer } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";

pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.worker.min.js";

export default {
  name: "PdfViewer",
  mounted() {
    pdfjsLib.getDocument("./sample.pdf").then((doc) => {
      console.log("doc: ", doc);
    });
  },
  methods: {},
};
</script>

但这给了我以下错误:Cannot read property 'GlobalWorkerOptions' of undefined

Answer 1

我认为如果 pdfjsLib 不属于全局范围就会出现错误，另见 codesandbox :

<template>
  <div id="pageContainer">
    <div id="viewer" class="pdfViewer"></div>
  </div>
</template>

<script>
import pdfjsLib from "pdfjs-dist/build/pdf";
import { PDFViewer } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";

pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.worker.min.js";

export default {
  name: "PdfViewer",
  props: { docPath: String },
  mounted() {
    this.getPdf();
  },
  methods: {
    async getPdf() {
      let container = document.getElementById("pageContainer");
      let pdfViewer = new PDFViewer({
        container: container,
      });
      let pdf = await pdfjsLib.getDocument(this.docPath);
      pdfViewer.setDocument(pdf);
    },
  },
};
</script>

<style>
#pageContainer {
  margin: auto;
  width: 80%;
}

div.page {
  display: inline-block;
}
</style>

使用它:

<PdfViewer docPath="./sample.pdf" />