vue2如何使用pdfjs-dist

### 在 Vue 2 中使用 `pdfjs-dist` 实现 PDF 文件的显示与操作 #### 安装依赖库 为了能够在 Vue 2 项目中使用 `pdfjs-dist` 来加载并渲染 PDF 文档，首先需要安装该库。推荐指定版本以确保兼容性和稳定性。 ```bash npm install [email protected] --save ``` 此命令会将特定版本的 `pdfjs-dist` 添加至项目的依赖列表中[^4]。 #### 初始化配置 在应用入口文件（通常是 main.js 或者创建一个新的初始化脚本）里引入必要的资源： ```javascript import * as pdfjsLib from 'pdfjs-dist'; // 加载 worker 工作者线程, 防止警告信息出现 import 'pdfjs-dist/web/pdf.worker.entry'; // 设置全局变量来禁用内置的worker加载器 (可选) pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).href; ``` 这段代码设置了 PDF.js 的工作环境，并指定了 Worker 脚本的位置以便于异步处理PDF数据[^2]。 #### 创建组件用于展示 PDF 接下来定义一个简单的 Vue 组件用来呈现 PDF 页面。这里采用 Canvas 方式绘制每一页的内容。 ```html <template> <div class="pdf-viewer"> <!-- 显示区域 --> <canvas v-for="(page, index) in pages" :key="index" ref="canvases"></canvas> <!-- 控制栏可以放置翻页按钮等交互元素 --> <button @click="prevPage">上一页</button> <span>{{ currentPage }} / {{ totalPages }}</span> <button @click="nextPage">下一页</button> </div> </template> <script> export default { data() { return { loadingTask: null, pdfDoc: null, pages: [], currentPage: 1, totalPages: 0, }; }, methods: { async loadPdf(url) { this.loadingTask = pdfjsLib.getDocument({ url }); const doc = await this.loadingTask.promise; this.pdfDoc = doc; this.totalPages = this.pdfDoc.numPages; for(let pageNumber=1;pageNumber<=this.totalPages;pageNumber++){ let pageRenderingPromise = renderPage(pageNumber); this.pages.push(pageRenderingPromise); } function renderPage(num){ return new Promise((resolve,reject)=>{ this.pdfDoc.getPage(num).then(function(page){ var scale = 1.5; var viewport = page.getViewport({scale}); // 准备 canvas 元素 var canvas = document.createElement("CANVAS"); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // 将 canvas 插入 DOM 结构 if(context && typeof resolve === "function"){ var renderContext = {canvasContext:context,viewport}; page.render(renderContext); resolve(); }else{ reject(new Error("无法获取Canvas上下文")); } }).catch(error=>reject(error)); }.bind(this)) } // 渲染第一页作为初始视图 await this.renderCurrentPage(); }, nextPage(){ if(this.currentPage<this.totalPages){ this.currentPage++; this.renderCurrentPage(); } }, prevPage(){ if(this.currentPage>1){ this.currentPage--; this.renderCurrentPage(); } }, async renderCurrentPage(){ // 移除旧的画布对象 while(this.$refs.canvases.length){ this.$refs.canvases.pop().remove(); } // 只重新渲染当前页面对应的画布 await this.pages[this.currentPage-1]; } }, mounted(){ // 假设有一个名为 sample.pdf 的远程PDF文件URL this.loadPdf('/path/to/sample.pdf'); } } </script> ``` 上述代码片段展示了如何构建一个基本的 PDF 查看器，在其中包含了前后翻页逻辑以及动态更新显示内容的能力。注意这里的路径 `/path/to/sample.pdf` 应替换为实际的目标 PDF 文件地址[^3]。