pdf高亮显示

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

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

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

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

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

最后贴一下代码

javascript 复制代码
			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); // 每秒检查一次
相关推荐
福大大架构师每日一题23 分钟前
ragflow v0.25.1 最新版发布:API 统一、PDF 解析性能大幅优化、连接器删除同步全面增强,更新要点一次看懂
pdf·ragflow
cosinmz1 天前
图片太多太乱怎么整理?分享一个我最近常用的图片转 PDF方法
经验分享·小程序·pdf
其实秋天的枫2 天前
2026年新高考英语大纲词汇表3500个电子版PDF(含正序版、乱序版和默写版)
经验分享·pdf
lijfrank2 天前
MacOS 下 VS Code + LaTeX + Skim 双向同步配置
vscode·macos·pdf·latex·mactex
程序员的记录2 天前
AI 实战 - 文档处理(pdf/work/md/txt...)
pdf
Muyuan19982 天前
22.让 RAG Agent 更像真实产品:聊天页面优化、PDF 上传、知识库重建与检索片段展示
python·django·pdf·fastapi
打小就很皮...2 天前
html2canvas + jsPDF 生成 PDF 的踩坑与解决方案总结
前端·pdf
优化控制仿真模型2 天前
27考研数学一、二、三历年真题及答案解析PDF电子版(1987-2026年)
经验分享·pdf
huluang2 天前
解决 Adobe Acrobat 裁剪 PDF 后内容仍存留的问题
pdf
其实秋天的枫2 天前
27考研数学一、二、三历年真题及答案解析PDF电子版(1987-2026年)
经验分享·pdf