vue-pdf-embed 卡顿

### Vue-pdf-embed 性能优化与卡顿解决方案 在使用 `vue-pdf-embed` 时遇到卡顿问题，通常是因为 PDF 文件较大或者未合理利用资源所致。以下是针对该问题的具体分析和优化建议： #### 1. **分页加载** 为了减少内存占用并提升用户体验，可以通过分页加载的方式只渲染当前可见页面的内容。这种方式能够显著降低初始加载时间以及运行期间的性能消耗。 ```javascript import { PdfDocument } from 'vue-pdf-embed'; export default { data() { return { document: null, currentPage: 1, // 当前显示的页码 totalPages: 0, // 总页数 }; }, methods: { async loadPdf(url) { this.document = await PdfDocument.create(url); this.totalPages = this.document.getPageCount(); }, renderCurrentPage() { const pageContainer = document.getElementById('page-container'); pageContainer.innerHTML = ''; // 清空容器内容 if (this.currentPage && this.document) { const pdfPage = this.document.getRenderingPromise(this.currentPage); pdfPage.then((canvas) => { pageContainer.appendChild(canvas); }); } }, }, }; ``` 此代码片段展示了如何动态加载特定页面，并将其渲染到 DOM 中[^1]。 --- #### 2. **启用 Web Worker** PDF.js 默认会在主线程中处理文件解析操作，这可能导致界面响应变慢甚至冻结。通过配置 Web Worker 将耗时的任务转移到后台线程执行，从而提高应用的整体流畅度。 设置如下： ```javascript import * as pdfjsLib from 'pdfjs-dist'; pdfjsLib.GlobalWorkerOptions.workerSrc = '/path/to/pdf.worker.js'; // 替换为实际路径 ``` 注意：确保正确引入对应的 worker 脚本文件，否则会抛出错误或功能失效[^1]。 --- #### 3. **调整缩放比例** 过高的缩放级别不仅增加了计算量还可能引发不必要的图像质量损失。因此，在满足视觉需求的前提下适当减小 scale 值有助于缓解压力。 例如调用 `getViewport(scale)` 获取视口尺寸时传入合理的数值范围（推荐介于 0.5 到 2 之间），这样既能保持清晰又能兼顾效率[^2]。 --- #### 4. **按需下载数据碎片** 对于超大型文档来说一次性读取全部内容显然不现实，所以采用流式传输机制逐块获取所需部分即可完成高效展示效果。 具体做法是在每次请求新一页之前先判断目标区域是否已经存在于缓存当中；如果不存在则发起网络交互拉取对应的数据包再拼接起来形成完整的画面呈现给用户查看[^2]。 --- #### 5. **版本兼容性考量** 不同浏览器环境下可能存在某些特性支持程度差异的情况，所以在开发阶段务必测试多种环境下的表现情况以便及时发现问题所在并作出相应修改措施来保障最终成品能够在各种条件下稳定运作。 --- ### 示例代码综合运用以上策略 以下是一个简单的例子说明如何结合这些技术要点构建更高效的在线预览器组件： ```html <template> <div id="app"> <button @click="prevPage">Previous</button> {{ currentPage }} / {{ totalPages }} <button @click="nextPage">Next</button> <div ref="viewer"></div> </div> </template> <script> import { PdfDocument } from 'vue-pdf-embed'; import * as pdfjsLib from 'pdfjs-dist'; pdfjsLib.GlobalWorkerOptions.workerSrc = '/node_modules/pdfjs-dist/build/pdf.worker.min.js'; export default { data() { return { document: null, currentPage: 1, totalPages: 0, }; }, mounted() { this.loadPdf('/example.pdf'); }, methods: { async loadPdf(url) { try { this.document = await PdfDocument.create(url); this.totalPages = this.document.getPageCount(); this.renderPage(this.currentPage); } catch (error) { console.error(error.message || error); } }, nextPage() { if (this.currentPage < this.totalPages) { this.currentPage += 1; this.renderPage(this.currentPage); } }, prevPage() { if (this.currentPage > 1) { this.currentPage -= 1; this.renderPage(this.currentPage); } }, async renderPage(pageNumber) { const container = this.$refs.viewer; while (container.firstChild) { container.removeChild(container.firstChild); } if (!this.document) return; const page = await this.document.getPage(pageNumber); const viewport = page.getViewport({ scale: 1 }); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = viewport.width; canvas.height = viewport.height; container.appendChild(canvas); await page.render({ canvasContext: context, viewport: viewport, }).promise; }, }, }; </script> ``` ---