pdf.js vue2

### 在 Vue 2 中使用 PDF.js 实现 PDF 预览或处理功能 要在 Vue 2 项目中集成 PDF.js 并实现 PDF 文件的预览或处理功能，可以按照以下方法操作： #### 安装依赖 首先，在项目中安装 `pdfjs-dist` 库作为核心工具库。该库提供了解析和渲染 PDF 的能力。 ```bash npm install pdfjs-dist --save ``` #### 加载 PDF.js 工具库 在组件中引入 `pdfjs-dist` 并配置其工作线程路径。这一步非常重要，因为默认情况下需要指定 worker 资源的位置。 ```javascript // main.js 或者单独的 utils/pdf.js 文件 import * as pdfjsLib from 'pdfjs-dist'; import pdfWorker from 'pdfjs-dist/build/pdf.worker.entry'; pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker; export { pdfjsLib }; ``` #### 创建 PDF 预览组件 下面是一个基于 iframe 和直接渲染两种方式的示例代码。 ##### 方法一：通过 iframe 嵌入 viewer.html 如果希望快速实现简单的 PDF 查看器，可以直接利用官方提供的 HTML Viewer 功能。 1. 将 `pdf.js` 提供的 `web/viewer.html` 复制到项目的静态资源目录下（如 `/public/static/pdf/web/`）。 2. 使用 `<iframe>` 标签嵌入查看器。 ```html <template> <div class="pdf-viewer"> <!-- 如果有多个文件，则动态绑定 src --> <iframe :src="pdfUrl" frameborder="0"></iframe> </div> </template> <script> export default { data() { return { pdfUrl: "/static/pdf/web/viewer.html?file=example.pdf", }; }, }; </script> <style scoped> iframe { width: 100%; height: 80vh; } </style> ``` 此方法简单易用，适合不需要自定义交互逻辑的情况[^2]。 --- ##### 方法二：手动加载并渲染 PDF 页面 对于更复杂的场景，比如逐页显示或者定制化 UI，可以通过 JavaScript 手动加载 PDF 数据并绘制每一页的内容。 以下是具体实现步骤： 1. **下载 PDF 文件** 可以通过 Axios 获取远程服务器上的 PDF 流数据，并将其转换为 Blob 对象。 ```javascript async downloadPdf(apiUrl) { try { const response = await axios.get(apiUrl, { responseType: "blob" }); if (response.status === 200) { const blob = new Blob([response.data], { type: "application/pdf" }); this.blobUrl = URL.createObjectURL(blob); this.renderPdf(this.blobUrl); } } catch (error) { console.error("Failed to load the PDF:", error); } }, ``` 2. **加载 PDF 文档** 利用 `pdfjsLib.getDocument()` 方法读取 PDF 文件流。 ```javascript renderPdf(pdfUrl) { pdfjsLib .getDocument(pdfUrl) .promise.then((pdfDoc_) => { this.numPages = pdfDoc_.numPages; // 初始化第一页 this.renderPage(1, pdfDoc_); }) .catch((reason) => { console.error(reason); }); }, ``` 3. **渲染单个页面** 每次只渲染当前请求的那一页内容至 Canvas 上。 ```javascript renderPage(num, pdfDoc) { pdfDoc.getPage(num).then((page) => { const viewport = page.getViewport({ scale: 1.5 }); // 准备 canvas 元素用于绘图 const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); canvas.height = viewport.height; canvas.width = viewport.width; // 添加到 DOM 结构中 this.$refs.container.appendChild(canvas); // 绘制实际图像 const renderContext = { canvasContext: context, viewport: viewport, }; page.render(renderContext); }); }, ``` 最终模板可能如下所示： ```html <template> <div ref="container" class="pdf-container"></div> </template> <script> import { pdfjsLib } from "../utils/pdf"; export default { methods: { // ... 合并上面的方法 ... }, }; </script> <style scoped> .pdf-container { display: flex; flex-direction: column; align-items: center; } canvas { margin-bottom: 1em; border: 1px solid black; } </style> ``` 这种方法更加灵活，允许开发者完全控制用户体验以及性能优化策略[^1]。 --- ### 总结 以上介绍了两种主要的方式——一种是借助内置的 HTML Viewer (`viewer.html`) 来简化开发流程；另一种则是深入调用 API 自己构建完整的阅读体验。根据需求复杂度和个人偏好选择合适的技术路线即可完成目标。 ---