pdf高亮显示

现在前端pdf需求越来越多,比如发票的显示,文件的显示,怎么实现具体步骤百度一下吧,这里不做详细介绍,主要记录下遇到的问题

1.页面pdf已经看到了,但是 iframe.contentWindow.PDFViewerApplication显示undefined

当时代码是这么写的,页面已经看到pdf了,但是PDFViewerApplication确实undefined,这样findBar方法也没法用,于是我疯狂百度,搜索原因,很不幸这5个原因里面没有我的原因,不得已,值得从头来,再啃一边pdf.js,终于给我找到了

页面加载完成之后,再赋值

很开心,不仅可以高亮,还可以自动定位到高亮的位置

最后贴一下代码

			var data = res.data
			var ThemeInformationFileUrlInnerhtml =
				`<iframe id="noticeIf" width="100%" style="border-radius: 0"></iframe>`
			$('#notInformationId').html(ThemeInformationFileUrlInnerhtml)
			$("#noticeIf").attr("src", './js/pdf/web/viewer.html?file=' + data.notTextAnnouncementFileUrl);

			// 检查pdf是否正确加载
			var intervalId = window.setInterval(function() {
				let iframe = document.getElementById('noticeIf');
				if (iframe && iframe.contentWindow && iframe.contentWindow.PDFViewerApplication) {
					console.log('pdf已经加载')
					window.clearInterval(intervalId);
					// PDF已加载完成,执行其他操作
					let text = '主要财务数据'
					iframe.contentWindow.postMessage(text, '*')
					iframe.contentWindow.addEventListener('message', (e) => {
						console.log('addEventListener:', e)
						console.log('iframe.contentWindow:', iframe.contentWindow)
						console.log('iframe.contentWindow.PDFViewerApplication:', iframe.contentWindow.PDFViewerApplication)
						iframe.contentWindow.PDFViewerApplication.findBar.findField.value = e.data
						iframe.contentWindow.PDFViewerApplication.findBar.highlightAll.checked = true
						iframe.contentWindow.PDFViewerApplication.findBar.dispatchEvent('highlightallchange')
						console.log('延迟后 iframe.contentWindow.PDFViewerApplication:', iframe.contentWindow
							.PDFViewerApplication)
					}, false)
				} else {
					console.log('pdf还没加载')
				}
			}, 1000); // 每秒检查一次

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之DatePicker组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之DatePicker组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、DatePicker组件 日期选择器组件&#xff0c;用于根据指定日期范围创建日期滑…

MTK8365安卓核心板_联发科MT8365(Genio 350)核心板规格参数

MTK8365安卓核心板是一款高性能的嵌入式处理器产品&#xff0c;基于联发科领先的SoC架构和先进的12纳米工艺。它集成了四核ARM Cortex-A53处理器&#xff0c;每个核心频率高达2.0 GHz&#xff0c;搭载强大的多标准视频加速器&#xff0c;支持高达1080p 60fps的视频解码。此外&a…

【数据结构 04】单链表

一、链表简介 链表是一种物理存储结构上非连续的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 链表在结构上的分类&#xff1a; 1. 带头结点或无头结点 2. 单向或双向 3. 循环或非循环 虽然链表有多种结构类型&#xff0c;但是我么在实际开发中…

云计算概述(云计算类型、技术驱动力、关键技术、特征、特点、通用点、架构层次)(二)

云计算概述&#xff08;二&#xff09; &#xff08;云计算类型、技术驱动力、关键技术、特征、特点、通用点、架构层次&#xff09; 目录 零、00时光宝盒 一、云计算类型&#xff08;以服务的内容或形态来分) 二、云计算的12种技术驱动力 三、云计算的关键技术 四、云计…

软件工程知识梳理4-详细设计

详细设计阶段的根本目标是确定应该怎样具体地实现所要求的系统&#xff0c;也就是说.经过这个阶段的设计工作.应该得出对目标系统的精确描述.从而在编码阶段可以把这个描述直接翻译成用某种程序设计语言书写的程序。 详细设计的的目标不仅仅是逻辑上正确地实现每个模块地功能&a…

ONLYOFFICE 文档 8.0 现已发布:PDF 表单、RTL、单变量求解、图表向导、插件界面设计等更新

我们最新版本的在线编辑器现已推出&#xff0c;为整个套件优化了多项功能。阅读下文&#xff0c;了解详细更新内容。 什么是 ONLYOFFICE 文档 ONLYOFFICE 文档是一款开源的办公套件&#xff0c;由总部位于拉脱维亚的Ascensio System SIA开发。它支持处理文本文档、电子表格、演…

【ASP.NET Core 基础知识】--Web API--创建和配置Web API(一)

一、简介 Web API&#xff08;Web Application Programming Interface&#xff09;的重要性在于其在现代软件开发中扮演着关键的角色。以下是一些关于Web API重要性的方面&#xff1a; 跨平台交互&#xff1a; Web API允许不同平台、不同技术栈的应用程序进行通信。无论是Web…

有可能通过打印机墨盒入侵电脑吗?

&#x1f5a8; 有可能通过打印机墨盒入侵电脑吗&#xff1f; HP 公司首席执行官 Enrique Lores 在接受 CNBC 采访时说&#xff0c;不能使用非原装打印机墨盒。否则&#xff0c;打印将被阻止。 对于这一决定&#xff0c; Lores 给出了两个理由。首先&#xff0c;非原装墨盒可能…

npm淘宝镜像过期解决办法

npm淘宝镜像过期解决办法 因为npm 官方镜像&#xff08;registry.npmjs.org&#xff09;在国内访问很慢&#xff0c;我们基本上都会选择切换到国内的一些 npm 镜像&#xff08;淘宝镜像、腾讯云镜像等&#xff09;。由于淘宝原来的镜像&#xff08;registry.npm.taobao.org&am…

Mac 终端可以使用yarn,但是vscode里面报错segmentation fault

Mac 终端可以使用yarn 但是vscode里面报错segmentation fault 查阅官网https://www.yarnpkg.cn/getting-started/install 在vscode运行corepack enable即可解决该问题

【golang】13、viper 配置库 | 配置文件读写 | 使用方式 | 源码逻辑分析

文章目录 一、使用方式1.1 特性1.2 优势1.3 设置1.3.1 默认值1.3.2 配置文件1.3.3 写配置文件1.3.4 监听配置文件变化1.3.5 从 io.Reader 读配置1.3.6 Setting Overrides1.3.7 使用 Alias1.3.8 环境变量1.3.9 命令行 Flags1.3.8.1 Flag 接口 1.3.9 配置中心1.3.9.1 未加密1.3.9…

NoSQL数据库简介

NoSQL数据库简介 Brief Introduction to NoSQL Databases By JacksonML 1. 什么是SQL&#xff1f; 在了解NoSQL之前&#xff0c;先简要介绍一下SQL。 SQL是 Structured Query Language&#xff08;结构化查询语言&#xff09;的缩写。 SQL在关系型数据中广泛使用&#xf…

Linux中vim编辑器的使用

vim常见使用方法 vim介绍命令模式下常用命令用法底行模式下常见命令用法注释代码删除 vim细节vim的配置问题 vim介绍 vim是一款多模式的编辑器 所谓多模式就是有几种模式供我们选择使用 创建一个文件叫test.c&#xff0c;用vim打开就是 vim test.c这样就可以打开test.c进行编…

运维SRE-04 磁盘管理体系

磁盘管理体系详解 磁盘管理系统概述 目标 熟练掌握常用磁盘配置(容量,转速,个数)熟练说出来或写出来: raid级别熟练掌握磁盘基础使用:拿到一块硬盘到可以向硬盘写入数据分区,格式化,挂载熟练掌握: 磁盘空间不足 no space left on device 故障,原因,排查,解决. 磁盘基础内容 …

17.Golang channel的基本定义及使用

目录 概述实践无缓冲 channel代码结果 缓冲 channel代码结果 channel的关闭特点代码结果range代码结果 select channel代码结果 结束 概述 此篇文章介绍 channel 的用法 无缓冲 channel缓冲 channelchannel的关闭特点range channelselect channel 每一种&#xff0c;配上完整…

深入浅出AI落地应用分析:AI个人助手Monica

前言:铺天盖地的大模型以及所谓的应用到目前为止实际还是很少有像Monica这样贴合个人工作习惯的产品落地,比如像Chatgpt等这样的产品,绝大多数人不会专门买🪜翻墙出去用,而且大多数场景下素人或小白都不知道该怎么用,但是Monica这款产品就很好的以浏览器的插件的形式始终…

29 python快速上手

Python操作MySQL和实战 1. 事务1.1 MySQL客户端1.2 Python代码 2. 锁2.1 排它锁2.2 共享锁 3. 数据库连接池4. SQL工具类4.1 单例和方法4.2 上下文管理 5.其他总结 目标&#xff1a;掌握事务和锁以及Python操作MySQL的各种开发必备知识。 概要&#xff1a; 事务锁数据库连接池…

【Oracle云】使用 boto3 访问 OCI 对象存储 (AWS S3协议兼容)

在现代云计算环境中&#xff0c;S3&#xff08;Simple Storage Service&#xff09;协议已经成为云对象存储的事实标准。它提供了简单、可扩展、高度耐用的存储解决方案&#xff0c;得到了广泛应用。Oracle Cloud Infrastructure&#xff08;OCI&#xff09;秉承着开放性和灵活…

摄像头监控系统/视频监控云平台EasyCVR接入单兵设备后如何配置移动规矩

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体控可实现视频监控直播、视频轮播、视频录像…

Java编程练习之类的封装

1.把一个Student类封装起来&#xff0c;模拟一个转校生转入新学校后为其制作学生信息的过程。运行结果如下&#xff1a; package zhtestdemo; import java.util.Scanner; import java.text.DecimalFormat; public class demo { //创建类&#xff0c;类名叫demo; private Stud…