pdf高亮显示

news2024/10/7 6:50:43

现在前端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); // 每秒检查一次

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

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

相关文章

Python中的while循环,知其然知其所以然

文章目录 while循环结构1.用循环打印1 ~ 100步骤解析2. 1 ~ 100的累加和3.死循环1. 用死循环的方法实现 1 ~ 100累加和 4. 单向循环(1)打印 一行十个小星星*(2)通过打印一个变量的形式,展现一行十个小星星(3)一行十个换色的星星 ★☆★☆★☆★☆★☆(4)用一个循环,打印十行十列…

JAVA中的object类

一、equals方法 1.和equals的比较 既可以判断基本类型有可以判断引用类型 如果判断基本类型&#xff0c;判断的值是否相等 int num1 10; double num2 10.0; System.out.println(num1 num2); 如果判断引用类型&#xff0c;判断的地址是否相等&#xff0c;即判断是不是同一…

【教程】一个比较良心的C++代码混淆器

这是一个比较良心的C代码混淆器&#xff0c;用于信息竞赛训练和保护代码免受抄袭。本文将介绍这个混淆器的使用方法、混淆效果和已知的一些bug。同时&#xff0c;我们也会给出一些示例来演示混淆器的具体操作。 引言 在信息竞赛训练和实际开发中&#xff0c;保护代码的安全性和…

HomeAssistant系统添加HACS插件商店与远程控制家中智能家居

文章目录 基本条件一、下载HACS源码二、添加HACS集成三、绑定米家设备 ​ 上文介绍了如何实现群晖Docker部署HomeAssistant&#xff0c;通过内网穿透在户外控制家庭中枢。本文将介绍如何安装HACS插件商店&#xff0c;将米家&#xff0c;果家设备接入 Home Assistant。 基本条件…

leetcode(滑动窗口)3.无重复字符的最长字串(C++详细题解)DAY2

文章目录 1.题目示例提示 2.解答思路3.实现代码结果 4.总结 1.题目 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”&#xff0c;所以其长度为 3。 示…

基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以F1键为例)

核心代码 <template></template> <script> export default {created() {//监听长按快捷键addEventListener("keydown", this.keydown);addEventListener("keyup", this.keyup);},destroyed(d) {//移除长按快捷键removeEventListener(&…

基于抖音小程序实现的答题小程序

看过《一站到底》后&#xff0c;不仅学到了很多新知识&#xff0c;还感受到了选手们的聪明才智和对知识的热爱。同时&#xff0c;也意识到自己的知识储备还有很大的提升空间&#xff0c;因此我会继续努力学习&#xff0c;提高自己的知识水平。 《一站到底》是一档益智答题类节…

Leetcode刷题笔记题解(C++):1863. 找出所有子集的异或总和再求和

思路如下&#xff1a;递归思路&#xff0c;依次遍历数组中的数&#xff0c;当前数要不要选择像二叉树一样去遍历如下图所示 0 0 &#xff08;选5&#xff09; 5&#xff08;不选5&#xff09; 0 1 0 1 0 6 …

[word] 怎么删除文字底纹 #职场发展#其他

怎么删除文字底纹 怎么删除文字底纹?我们在录入文字到文档的时候&#xff0c;或者是复制网上内容时&#xff0c;都会带有格式&#xff0c;有时候还会遇到删除不掉的问题。今天给大家分享小技巧&#xff0c;解决你的问题。 1、删除文字底纹 文档自带的底纹&#xff0c;删除技…

Mysql连接编译踩坑问题

复习下mysql基本命令 登录mysql mysql #没密码登录 mysql -u root -p #以用户名root 需要交互输入密码方式登录显示所有数据库 SHOW DATABASES&#xff1b; 使用某个数据库 use database_name; 查看当前数据库某一张表的表结构 DESCRIBE table_name; 解决一个mysql 用…

FPGA高端项目:解码索尼IMX327 MIPI相机转USB3.0 UVC 输出,提供FPGA开发板+2套工程源码+技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 MIPI 编解码方案 3、本 MIPI CSI-RX IP 介绍4、个人 FPGA高端图像处理开发板简介5、详细设计方案设计原理框图IMX327 及其配置MIPI CSI RX图像 ISP 处理图像缓存UVC 时序USB3.0输出架构FPGA逻辑设计工程源码架构SDK软件工程源…

LeetCode、746. 使用最小花费爬楼梯【简单,动态规划 线性DP】

文章目录 前言LeetCode、746. 使用最小花费爬楼梯【简单&#xff0c;动态规划 线性DP】题目与分类思路 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领域。…

VPN 虚拟专用网、VPN类型

1 虚拟专用网 VPN&#xff08;Virtual Private Network&#xff09; 利用公用互联网作为本机构各专用网之间的通信载体&#xff0c;这样的专用网又称为虚拟专用网 VPN (Virtual Private Network)。 专用网&#xff1a;指这种网络是为本机构的主机用于机构内部的通信&#xff…

塑料管道市场分析:行业利润率仅为5.57%

塑料和塑料管道行业组织的“掌门人”不约而同地将我国塑料管道行业的发展定义为“机遇与挑战并存”&#xff0c;而且都将抓住机遇的关键词指向了“高质量”&#xff0c;认为我国塑料管道行业必须“面对新局&#xff0c;创新突破&#xff0c;坚定高质量发展之路” 近两年来&…

day32 买卖股票的最佳时机Ⅱ 跳跃游戏 跳跃游戏Ⅱ

题目1&#xff1a;122 买卖股票的最佳时机Ⅱ 题目链接&#xff1a;122 买卖股票的最大时机Ⅱ 题意 整数数组prices[i]表示某股票的第i天的价格&#xff0c;每天可买卖股票且最多持有1股股票&#xff0c;返回最大利润 利润拆分&#xff0c;拆分为每天的利润 每天的正利…

浅谈交换原理(1)——概述

一、什么是交换 在通信系统中&#xff0c;我们所认知的最简单的通信方式就是点对点通信&#xff0c;但是当有多个终端需要进行相互通信时&#xff0c;点对点通信就具有一定的局限性&#xff0c;如下图所示&#xff1a; 我们如果想要做到全互连方式两两相连&#xff0c;假设终端…

测试环境搭建整套大数据系统(二:安装jdk,mysql)

一&#xff1a;安装JDK 参考 https://blog.csdn.net/weixin_43446246/article/details/123328558 二&#xff1a;安装mysql 1.因为我们安装cdh6.3.2。cdh支持的是5.6和5.7版本的mysql。 2. 步骤 wget https://downloads.mysql.com/archives/get/p/23/file/mysql-server_5.7.…

SpringCloud--Eureka注册中心服务搭建注册以及服务发现

注意springboot以及springcloud版本&#xff0c;可能有莫名其妙的错误&#xff0c;这里使用的是springboot-2.6.13&#xff0c;springcloud-2021.0.5 一&#xff0c;Eureka-Server搭建&#xff1a; 1.创建项目&#xff1a;引入依赖 <dependency><groupId>org.sp…

什么是跨境电商?跨境电商与api的关系是什么?

什么是跨境电商&#xff1f; 跨境电商是指通过互联网平台进行国际贸易的商业模式。它允许消费者在不同国家之间购买和销售商品&#xff0c;打破了传统贸易的地域限制&#xff0c;为消费者提供了更多选择和便利。 什么是跨境电商API&#xff1f; 跨境电商API通常指的是应用程…

MOS管驱动电流估算-Qg参数

MOS管驱动电流估算 例&#xff1a;FDH45N50F如下参数&#xff1a; 有人可能会这样计算&#xff1a; 开通电流 带入数据得 关断电流 带入数据得 于是乎得出这样的结论&#xff0c;驱动电流只需 250mA左右即可。仔细想想这样计算对吗&#xff1f; 这里必须要注意这样一个条件细…