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

Question

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

当我登录时，图书馆是

undefined

。

在此处的codesandbox 中查看我的问题。

这就是我现在正在尝试的方法：

<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/[email protected]/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/[email protected]/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" />

Answer 2

如果其他人需要它，解决方案非常简单。你只需像这样导入它：

import * as pdfjsLib from "pdfjs-dist/build/pdf";

Answer 3

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");

Answer 4

vue-cli5

已经使用了

webpack5

，并且

webpack5

内置了

web worker

并且非常容易使用。

创建文件：

pdfjs-webpack5.js

import * as pdfjsLib from 'pdfjs-dist'

pdfjsLib.GlobalWorkerOptions.workerPort = new Worker(new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url))

export default pdfjsLib

根据

getinfo.js

中给出的示例

Setup PDF.js in a website

，您可以轻松阅读PDF文件的内容。

我用的是包的版本。

pdfjs-dist: 2.15.349
webpack: 5.74.0
@vue/cli*: 5.0.8

Answer 5

我无法使用其他答案，所以我在 iframe 中使用了

viewer.html

。

1. 从 https://github.com/mozilla/pdf.js/releases 下载最新的库
2. 解压它。将整个

   pdfjs

   目录移动到项目的

   public

   目录中。
3. 在您的

   vue

   模板中使用此代码。

    <iframe
      src="/pdfjs/web/viewer.html?file=/path-to-the-file.pdf"
      :width="500px"
      :height="500px"
      frameborder="0"
    ></iframe>

你不需要在js中导入任何东西。

Answer 6

如果您正在寻找更完整的解决方案并且更喜欢使用

iframe

嵌入，请考虑使用

pdfjs-viewer-element

，PDF.js 默认查看器的 Web 组件包装器。

Vue 对自定义元素有完美的支持，你唯一应该做的一件事就是告诉你的打包器它是一个 Web 组件，请参阅 Vue 文档:

1. 下载PDF.js版本，解压并将包含文件的文件夹复制到项目中。
2. 安装

   pdfjs-viewer-element

   ：

npm install pdfjs-viewer-element

或使用浏览器：

<script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>

3. 将带有属性的 Web 组件添加到您的页面：

<pdfjs-viewer-element src="/file.pdf" viewer-path="/path-to-viewer"></pdfjs-viewer-element>

地点：

src

- pdf 文件的路径

viewer-path

- 解压后的发布文件夹的路径

还有更多属性可以传递：

locale

- 指定在查看器 UI 中使用哪种语言

text-layer

- 文本层，用于文本选择

page

- 页码

search

- 搜索文本

phrase

- 按短语搜索

zoom

- 缩放级别

pagemode

- 页面模式拇指

viewer-css-theme

- 应用自动、浅色或深色主题

viewer-extra-styles

- 将 CSS 规则添加到查看器应用程序

查看完整示例：https://replit.com/@alekswebnet/Vue-3-pdfjs-viewer-element

Answer 7

集成 pdf.js 通常有两种方法：嵌入 iframe 或基于

pdfjs-dist

从头开始构建。

如果您对 pdf.js 项目的了解有限，最好使用 iframe 解决方案。但是，如果您需要自定义功能，iframe 解决方案可能不适合，因为与 iframe 通信可能很困难，并使过程更加复杂。从头开始构建最初似乎是一个不错的选择，但如果您想要一个功能齐全且高性能的 PDF 查看器（例如 pdf.js 提供的默认查看器），请相信我，它需要大量的工作，并且最终结果可能并不理想。一样好。

我做了一些工作并提供了第三种方法将 pdf.js 默认查看器轻松集成到任何项目。你可以像普通的npm包一样使用

@document-kits/viewer

，并且可以在几分钟内快速启动一个项目使用

npm create

，现在它支持vue、lit和solid。

npm create @document-kits/viewer@latest my-app

# There will be prompt to let you choose a template to start,
# currently support lit, vue and solid.

cd my-app

# install dependencies
npm install

# run the dev server and open the default browser to view the demo
npm run dev --open

仍然使用pdf.js的3.x，有时间我会升级到4.x.