开发网站步骤系统开发

Vue PDF 组件初始不加载 pdfUrl 问题分析与修复

问题现象

在开发 PDF 预览组件时，遇到这样一个问题：

• 初始状态下，PDF 组件不会请求 pdfUrl（即不会加载 PDF 文件）。
• 只有点击"全屏"按钮后，才会请求 pdfUrl 并渲染 PDF。
• 退出全屏后，PDF 也能正常显示。
• 但如果不点击全屏，PDF 一直无法加载。

现象复现

1. 打开页面，传入 pdfUrl，PDF 区域显示 loading，但实际没有发起 pdfUrl 请求。
2. 点击全屏按钮，PDF 能正常加载。
3. 退出全屏后，非全屏下也能正常显示 PDF。

代码结构简析

组件核心代码片段如下：

<!-- 非全屏 PDF 渲染 -->
<div v-if="isPdfLoading" class="loading-container">...</div>
<div v-else class="pdf-content" ref="pdfContainer"><VuePdfEmbed ... />
</div><!-- 全屏 PDF 渲染 -->
<VuePdfEmbed v-if="isFullscreen" ... />

• 非全屏时，只有 isPdfLoading 为 false，<VuePdfEmbed ... /> 才会渲染。
• 全屏时，<VuePdfEmbed v-if="isFullscreen" ... /> 直接渲染。

问题根源

• 组件通过监听 pdfUrl 变化，将 isPdfLoading 设为 true。
• 但此时 <VuePdfEmbed ... /> 没有渲染到 DOM，自然不会发起 pdfUrl 请求。
• 只有在全屏时，<VuePdfEmbed ... /> 被挂载，才会请求 pdfUrl。
• 一旦 PDF 加载成功，isPdfLoading 变为 false，非全屏下的 <VuePdfEmbed ... /> 才能渲染。

本质原因： loading 状态用 v-if/v-else 隐藏了 PDF 组件，导致其无法挂载和发起请求。

修复方案

让 PDF 组件始终挂载，只用 loading 遮罩覆盖 UI，不用 v-if/v-else 隐藏 PDF 组件。

修复后代码：

<div class="pdf-content" ref="pdfContainer"><VuePdfEmbed ... /><div v-if="isPdfLoading" class="loading-container" style="..."><v-progress-circular ... /><p>{{ loadingText }}</p></div>
</div>

这样 <VuePdfEmbed ... /> 始终在 DOM 中，pdfUrl 变化时能立即发起请求，loading 只是遮罩。

经验教训

• loading 状态建议用遮罩而不是 v-if/v-else 隐藏内容组件，避免副作用。
• 组件的挂载时机直接影响其副作用（如发起请求、生命周期钩子等）。
• 复杂交互下，建议用显式的 UI 层覆盖而不是条件渲染。

总结

本次问题的根源在于 loading 状态的处理方式。通过调整渲染逻辑，让 PDF 组件始终挂载，成功解决了 PDF 组件初始不加载 pdfUrl 的问题。希望本次经验能为类似场景提供参考。