vue3-pdf-app 白屏

### Vue3 集成 PDF 应用时出现白屏的解决方案 在 Vue3 项目中集成 `vue-pdf` 插件用于分页预览 PDF 文件时，可能会遇到第一次打开正常显示，但第二次打开后页面变为空白的问题。此问题的原因可能是由于缓存机制、资源未正确释放或其他内部状态管理不当引起的。 #### 使用 `pdf.js` 替代默认加载器 为了更可靠地处理 PDF 渲染并避免白屏问题，建议引入 Mozilla 提供的 `pdf.js` 库来替代内置加载逻辑。具体操作如下： 1. **安装依赖** 安装最新版 `pdf.js` 及其相关工具包： ```bash npm install --save pdfjs-dist ``` 2. **配置全局变量** 将 `pdf.js` 设置为全局可用，并指定 CMAP 字体映射路径以确保所有字体都能被正确解析。 ```javascript import * as pdfjsLib from 'pdfjs-dist'; import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'; // 设置 worker path 和禁用内置worker pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker; ``` 3. **优化组件生命周期钩子** 修改原有组件中的挂载与卸载行为，确保每次切换路由或销毁实例前清理掉之前创建的对象实例及相关事件监听器。 ```typescript export default defineComponent({ name: "PdfViewer", data() { return { loadingTask: null, numPages: undefined, pageRendering: false, pageNumPending: null, scale: 1.5, canvas: null, ctx: null }; }, methods: { queueRenderPage(num) { this.pageNumPending = num; if (!this.pageRendering && !this.loadingTask?.destroyed) { this.renderPage(this.pageNumPending); } }, renderPage(num) { this.pageRendering = true; const self = this; this.loadingTask.getPage(num).then((page) => { let viewport = page.getViewport({scale: this.scale}); this.canvas.height = viewport.height; this.canvas.width = viewport.width; const renderContext = {canvasContext: this.ctx, viewport}; page.render(renderContext); this.pageRendering = false; if (self.pageNumPending !== null) { self.renderPage(self.pageNumPending); self.pageNumPending = null; } }); } }, mounted() { this.canvas = document.getElementById('the-canvas'); this.ctx = this.canvas.getContext('2d'); this.loadingTask = pdfjsLib.getDocument('/path/to/sample.pdf'); // 加载PDF文件 this.loadingTask.promise.then(pdf => { console.log(`Document loaded with ${pdf.numPages} pages.`); this.numPages = pdf.numPages; this.renderPage(1); // 开始渲染第一页 }).catch(reason => { console.error("Error:", reason); }); }, beforeUnmount() { if (this.loadingTask){ this.loadingTask.destroy(); // 销毁当前任务防止内存泄漏 } } }) ``` 通过上述调整，可以有效减少因重复初始化造成的冲突，从而降低发生白屏的概率[^1]。 另外，在实际部署环境中还需注意服务器端 MIME 类型设置是否正确，以及确认客户端网络请求能否顺利获取到目标 PDF 资源[^4]。