Vue学习之：在 vue2 中引入 pdf.js 并配置使其能工作_vue2 pdf.js

安装

• 不同版本的 pdfjs 在 node_modules 中的目录不太一样，如果你想让他正常运行就按照我下面的来
• 确保你的 nvm 版本是 18.17 如果不是的话，建议你配置跟我调成一样的，否则很容易出问题

nvm install 18.17.0
nvm use 18.17.0
1
2

• 安装 pdfjs，指定版本号 @2 如果你默认下的话会下载 4 开头的版本，会有各种问题

npm install pdfjs-dist@2
1

• 运行以下命令以安装处理类私有方法的 Babel 插件：

npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods
1

配置

• container 的位置 css 设置一定要是 absolute
• 一定要配置好 EventBus
• 导入 pdfjsLib 的时候一定要用 import * as pdfjsLib from "pdfjs-dist/build/pdf"; 不能用 import pdfjsLib from "pdfjs-dist/build/pdf"; 否则你无法设置 GlobalWorkerOptions
• 设置 GlobalWorkerOptions 的时候，本地的如果不行，就按照下面我代码的写 pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";
  • 但是注意其中的 2.16.105 要换成你自己安装的 pdf.js 版本号；在 package.json 中可以查看
• 在你的 babel.config.js 配置成：

module.exports = {
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods"
  ]
};

1
2
3
4
5
6
7

示例代码

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

<script>
// 导入 pdfjsLib 的方法要注意 import * as ...
import * as pdfjsLib from "pdfjs-dist/build/pdf";

// 引入 eventbus 和 pdfviewer，后面需要配置
import { PDFViewer, EventBus } from "pdfjs-dist/web/pdf_viewer";

// 引入样式
import "pdfjs-dist/web/pdf_viewer.css";

// globalworker 设置，用 CDN 的资源；如果你本地的也可以那就可以配置成本地的 "pdfjs-dist/build/pdf.worker.min.js"
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";

export default {
  name: "PdfViewer",
  mounted() {
    this.getPdf();
  },
  methods: {
    async getPdf() {
      let eventBus = new EventBus();
      let container = document.getElementById("pageContainer");
      let pdfViewer = new PDFViewer({
        container: container,
        eventBus: eventBus,	
      });
      let loadingTask = pdfjsLib.getDocument("你自己的文件.pdf");
      let pdf = await loadingTask.promise;
      pdfViewer.setDocument(pdf);
    }
  }
};
</script>

<style>
#pageContainer {
  position: absolute;			//position设置成 absolute
  margin: auto;
  width: 80%;
}

div.page {
  display: inline-block;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51