安装

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

nvm install 18.17.0
nvm use 18.17.0

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

npm install pdfjs-dist@2

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

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

配置

• 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"]
};

示例代码

<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设置成 absolutemargin: auto;width: 80%;
}div.page {display: inline-block;
}
</style>