安装
不同版本的
pdfjs 在
node_modules 中的目录不太一样，如果你想让他正常运行就按照我下面的来确保你的 nvm 版本是
18.17 如果不是的话，建议你配置跟我调成一样的，否则很容易出问题
nvm install 18.17.0nvm 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设置成 absolute margin: auto; width: 80%;}div.page { display: inline-block;}</style>