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

如何解决如何在 Vue 项目中导入 Mozilla PDF.js？

问题很简单。如何将 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

解决方法

我认为如果 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" />

Pdf.js 为我们提供解决方案。 Webpack.js 包含在项目中。

const pdfjsLib = require("pdfjs-dist/webpack");

如果出现如下错误：

./node_modules/pdfjs-dist/build/pdf.min.js 22:36927
Module parse failed: Unexpected token (22:36927)

然后我们必须使用es5/build/pdf.js，这样我们就可以创建src/pdfjs-webpack.js :

"use strict";

var pdfjs = require("pdfjs-dist/es5/build/pdf.min.js");
var PdfjsWorker = require("worker-loader?esModule=false&filename=[name].js!pdfjs-dist/es5/build/pdf.worker.min.js");

if (typeof window !== "undefined" && "Worker" in window) {
  pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker();
}

module.exports = pdfjs;

然后：

const pdfjsLib = require("../pdfjs-webpack");

@NKSM

使用：var pdfjs = require('pdfjs-dist/es5/build/pdf.min.js');

但是错误


* pdfjs-dist/es5/build/pdf.min.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/utils/preview/Index.vue?vue&type=script&lang=js&