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

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

问题现象

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

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

现象复现

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

代码结构简析

组件核心代码片段如下：

vue 复制代码

<!-- 非全屏 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 组件。

修复后代码：

vue 复制代码

<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 的问题。希望本次经验能为类似场景提供参考。