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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/diannao/87173.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《注解的江湖:一场元数据的“宫斗剧”》

一、你真的懂注解吗 你是否使用过Autowired却不知道是如何生效的&#xff1f; 这几个注解你一定很熟悉&#xff1a; OverrideDeprecatedTransactional 那么你有进一步思考过怎么生效的吗&#xff1f;注解到底是什么&#xff1f;注解&#xff0c;到底是信息&#xff1f;还是指…

智能土木通 - 土木工程专业知识问答系统02-RAG检索模块搭建

一、项目目录 civil_qa_system/ ├── docs/ # 项目文档 ├── config/ # 配置文件 ├── core/ # 核心功能代码 ├── knowledge_base/ # 知识库相关 ├── web/ # Web应用部分 ├…

进程和线程区别、管道和套接字、共享变量、TCP三次握手,是否可以少一次握手、子进程和主进程区别和API——Nodejs

首先讲了进程和线程区别 然后讲解 管道和套接字&#xff0c;它是进程间通信的方式 接着讲解共享变量 &#xff0c;它是线程间通信 最后讲解TCP三次握手&#xff0c;因为套接字使用了TCP协议 一、线程和进程的区别 线程&#xff08;Thread&#xff09;和进程&#xff08;Pr…

docker(学习笔记第一课) 使用nginx +https + wordpress

文章目录 docker(学习笔记第一课) 使用nginx https wordpress学习内容&#xff1a;1. 整体架构1.1 在aws ec2的整体架构1.2 不懂都可以问AI 2. 构建详细2.1 构建ec22.2 安装docker2.3 创建一个docker的内部network2.4 创建wordpress使用的mysql数据库2.5 创建两个wordpress的d…

Leetcode 刷题记录 15 —— 二分查找

本系列为笔者的 Leetcode 刷题记录&#xff0c;顺序为 Hot 100 题官方顺序&#xff0c;根据标签命名&#xff0c;记录笔者总结的做题思路&#xff0c;附部分代码解释和疑问解答&#xff0c;01~07为C语言&#xff0c;08及以后为Java语言。 01 搜索插入位置 class Solution {pub…

C++核心编程(动态类型转换,STL,Lanmda)

一. 类型转换 二. STL 1. 容器 1.1 Vector&#xff08;常用&#xff09; 1.1.1 概述 特性&#xff1a; 动态数组&#xff1a; 想象成一个会自动变长变短的数组。起始在内存中是连续存储的。 随机访问&#xff1a; 通过[]运算符或at()方法&#xff0c;可以瞬间&#xff08;…

【图像处理入门】8. 数学基础与优化:线性代数、概率与算法调优实战

摘要 图像处理的核心离不开数学工具的支撑。本文将深入解析线性代数、概率论在图像领域的应用,包括矩阵变换与图像几何操作的关系、噪声模型的数学描述,以及遗传算法、粒子群优化等智能算法在参数调优中的实践。通过理论结合代码案例,帮助读者掌握从数学原理到工程优化的完…

操作系统八股文

一.进程和线程的区别 1.本质区别和所属关系是什么&#xff1f; 进程是资源调度以及分配的基本单位。 线程是CPU调度的基本单位。 一个线程属于一个进程&#xff0c;一个进程可以拥有多个线程。 2.地址空间和内存 进程拥有独立的虚拟地址空间。 线程没有独立的地址空间&#xf…

【uniapp】小程序中input输入框的placeholder-class不生效

解决方法 1.去掉scoped <style></style> 2.额外写一组style </style lang"scss" scoped> </style> <style> ::v-deep .textarea-placeholder { font-size: 24rpx; font-weight: 400; …

大模型训练与推理显卡全指南:从硬件选型到性能优化

在人工智能技术飞速发展的今天&#xff0c;大型语言模型(LLM)已成为推动行业进步的核心动力。然而&#xff0c;训练和部署这些“数字巨人”需要强大的计算基础设施作为支撑&#xff0c;其中GPU的选择直接决定了模型开发的效率与成本。本文将全面剖析当前主流GPU型号在大模型训练…

Linux Docker的环境配置与简单使用

参考资料 Windows Docker Desktop设置中文【Docker 】Docker Desktop for Windows&#xff08;WSL 2&#xff09;安装WSL 2 上的 Docker 远程容器入门 目录 一. 环境配置1.1 安装WSL1.2 安装配置 Docker Desktop1.3 VS Code 插件安装1.4 下载项目&#xff0c;配置Dockerfile 二…

函数指针与指针函数:本质区别与高级应用

目录 一、概念本质解析 1. 函数指针&#xff08;Function Pointer&#xff09; 2. 指针函数&#xff08;Pointer Function&#xff09; 二、函数指针深度剖析 1. 基础用法示例 2. 高级应用&#xff1a;回调函数 3. 函数指针数组 三、指针函数深入探讨 1. 基础实现模式 …

【python】基于pycharm的海康相机SDK二次开发

海康威视二次开发相机管理 这段代码基于python开发的&#xff0c;用了opencv的一些库函数。实现了一个完整的海康机器人相机管理工具&#xff0c;支持多相机连接、参数配置、图像采集和实时显示功能。目前USB相机测试无误&#xff0c;除了丢一些包。 1. 主要类结构 HKCameraM…

HTTP 协议各个主要版本的功能特点、核心原理、使用场景总结

我们来系统总结一下 HTTP 协议各个主要版本的功能特点、核心原理&#xff08;用图示辅助说明&#xff09;以及典型使用场景。 核心演进目标&#xff1a; 提升性能、安全性、效率和灵活性。 1. HTTP/0.9 (1991) - 远古雏形 功能特点: 极其简单&#xff1a; 只支持 GET 方法。无…

Linux编程:3、进程通信-信号

一、进程通信概述 &#xff08;一&#xff09;进程通信的目的 在企业开发中&#xff0c;一个项目常常需要多个进程共同协作&#xff0c;而这些进程之间需要进行通信&#xff08;交换信息&#xff09;以便协作。本章内容主要围绕信号讲解&#xff0c;其它进程通信的常用方式请…

深度解析Vue.js组件开发与实战案例

一、Vue.js组件化思想 Vue.js的核心思想之一就是组件化开发。组件系统是Vue的一个重要概念,它允许我们使用小型、独立和通常可复用的组件构建大型应用。在Vue中,组件本质上是一个拥有预定义选项的Vue实例。 1.1 为什么需要组件化 代码复用:避免重复造轮子,提高开发效率可…

TensorFlow 2.0 与 Python 3.11 兼容性

TensorFlow 2.0 与 Python 3.11 兼容性 TensorFlow 2.0 官方版本对 Python 3.11 的支持有限&#xff0c;可能出现兼容性问题。建议使用 TensorFlow 2.10 或更高版本&#xff0c;这些版本已适配 Python 3.11。若需强制运行&#xff0c;可通过以下方式解决依赖冲突&#xff1a; …

MyBatisPlus 全面学习路径

MyBatisPlus 全面学习路径 学习目录 第一部分&#xff1a;MyBatisPlus 基础 MyBatisPlus 简介与核心特性快速入门与环境搭建核心功能&#xff1a;BaseMapper 与 CRUD 接口条件构造器&#xff08;Wrapper&#xff09;详解ActiveRecord 模式主键策略与通用枚举 第二部分&…

React16,17,18,19更新对比

文章目录 前言一、16更新二、17更新三、18更新四、19更新总结 前言 总结react 16&#xff0c;17&#xff0c;18&#xff0c;19所更新的内容&#xff0c;并且部分会涉及到原理讲解。 一、16更新 1、在16.8之前更新&#xff0c;还是基于class组件的升级和维护更新。并且更新了一…

【git】有两个远程仓库时的推送、覆盖、合并问题

当你执行 git pull origin develop(或默认的 git pull)时,Git 会把远端 origin/develop 的提交合并到你本地的 develop,如果远端已经丢掉(或从未包含)你之前在私库(priv)里提交过的改动,那这些改动就会被「覆盖」,看起来就像「本地修改没了」。 要解决这个问题,分…