安装

不同版本的 <code>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">code>

<div id="viewer" class="pdfViewer"></div>code>

</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>