vue3引入pdfjs-dist初始化

### Vue3 中引入与初始化 `pdfjs-dist` 方法 在 Vue3 项目中引入和初始化 `pdfjs-dist` 插件时，需要注意版本兼容性和路径配置问题。以下是详细的实现方式： #### 1. 安装依赖 首先，在项目中安装 `pdfjs-dist`： ```bash npm install pdfjs-dist --save ``` #### 2. 引入 `pdfjs-dist` 通过 ES6 模块化的方式引入 `pdfjs-dist` 并设置全局 Worker 路径。 ```javascript import * as PDFJS from 'pdfjs-dist'; // 设置 worker 文件路径 if (!PDFJS.GlobalWorkerOptions.workerSrc) { // 假设将 pdf.worker.js 放置在 public/js/pdfjs/ 目录下 PDFJS.GlobalWorkerOptions.workerSrc = '/js/pdfjs/pdf.worker.js'; } ``` 注意：如果使用的是 Vue CLI 构建工具链，则可以将 `pdf.worker.js` 文件放置到项目的 `public` 目录下[^1]。 #### 3. 初始化 PDF 加载器 加载 PDF 文档可以通过以下代码完成： ```javascript async function loadPdf(url) { const loadingTask = PDFJS.getDocument(url); return await loadingTask.promise; } const url = './example.pdf'; // 替换为实际的 PDF 文件地址 loadPdf(url).then(pdf => { console.log('PDF loaded', pdf); }); ``` 上述代码会返回一个 Promise 对象，解析后可以获得 PDF 实例对象。 #### 4. 渲染单页 PDF 为了渲染指定页面的内容，可调用 `getPage()` 方法获取具体页面数据，并将其绘制到 Canvas 上。 ```javascript function renderPage(page, canvasId) { const viewport = page.getViewport({ scale: 1.5 }); const canvas = document.getElementById(canvasId); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport }; return page.render(renderContext).promise; } // 使用示例 pdf.getPage(1).then((page) => { renderPage(page, 'canvas-id').then(() => { console.log('Page rendered successfully.'); }); }); ``` 此部分实现了对特定页面的渲染操作。 #### 5. 批量渲染所有页面 对于批量渲染整个文档的所有页面，可以采用异步循环的方法逐一处理每一页。 ```javascript async function renderAllPages(pdfDoc) { for (let pageNumber = 1; pageNumber <= pdfDoc.numPages; pageNumber++) { const page = await pdfDoc.getPage(pageNumber); await renderPage(page, `canvas-page-${pageNumber}`); } } // 调用函数 renderAllPages(pdf).catch(error => console.error('Error rendering pages:', error)); ``` 这里展示了如何利用 `for...await...of` 结构来逐页渲染 PDF 内容[^3]。 --- ### 注意事项 - **worker 文件路径**：确保正确设置了 `GlobalWorkerOptions.workerSrc` 属性指向有效的 Web Worker 文件位置。 - **性能优化**：当涉及大量页面或高分辨率图像时，建议分批加载而非一次性全部渲染。 - **缩略图支持**：若需显示 PDF 缩略图功能，还需额外导入相关脚本文件（如 `pdf_thumbnail_viewer.js`, `pdf_thumbnail_view.js`, 和 `ui_utils.js`），并按照官方指南集成至应用逻辑中[^2]。 ---