前端 - vu3+vite 使用vue-pdf-embed预览pdf，组件渲染空白，页面无报错，是什么原因？

Question

vu3+vite 使用vue-pdf-embed预览pdf，组件渲染空白，页面无报错

<div class="pdf-preview">
        <div class="pdf-wrap">
            <vue-pdf-embed
                source="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"
                :style="scale"
                class="vue-pdf-embed"
                :page="state.pageNum" />
            <!-- <PDF :src="state.source" style="height: 100vh" /> -->
        </div>
        <div class="page-tool">
            <div class="page-tool-item" @click="lastPage">上一页</div>
            <div class="page-tool-item" @click="nextPage">下一页</div>
            <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
            <div class="page-tool-item" @click="pageZoomOut">放大</div>
            <div class="page-tool-item" @click="pageZoomIn">缩小</div>
        </div>
    </div>

Answer 1

### 可能的原因及解决方案

1. **PDF 文件加载问题**：
   - 确保提供的 PDF URL (`http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf`) 是可访问的，并且在浏览器中直接访问该 URL 可以正常下载或预览 PDF 文件。
   - 检查是否有跨域请求（CORS）问题，特别是当 PDF 文件托管在不同的域上时。

2. **vue-pdf-embed 兼容性**：
   - 确认 `vue-pdf-embed` 库是否支持 Vue 3 和 Vite。有些库可能还没有更新以兼容最新的 Vue 版本或构建工具。
   - 查看 `vue-pdf-embed` 的文档或 GitHub 仓库，了解是否有关于在 Vue 3 或 Vite 中使用的特定说明或已知问题。

3. **样式和布局问题**：
   - 检查 `.pdf-preview`, `.pdf-wrap`, 和 `.vue-pdf-embed` 的 CSS 样式，确保它们没有导致 PDF 预览区域被隐藏或不可见。
   - 尝试移除或调整 `:style="scale"`，确保它没有错误地应用导致 PDF 不可见。

4. **组件状态问题**：
   - 确保 `state.pageNum` 和 `state.numPages` 等状态正确初始化并更新。
   - 在组件中添加适当的日志输出，以验证这些状态的值是否正确。

5. **浏览器兼容性**：
   - 尝试在不同的浏览器中加载页面，以排除特定浏览器的兼容性问题。

6. **依赖项问题**：
   - 确保所有必要的依赖项都已正确安装，并且 `vue-pdf-embed` 的版本与 Vue 3 兼容。

如果以上步骤都无法解决问题，建议查看浏览器的开发者工具中的网络请求和控制台输出，以获取更多关于可能发生的错误或警告的线索。