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); // 每秒检查一次
相关推荐
ComPDFKit1 小时前
PDF 涂黑后还能复制?用 ComPDF 检查敏感文字是否真正删除
pdf
飞塔老梅子2 小时前
21. 按页数或章节分割大PDF文件 ❀ 老梅子学AI
pdf·分割·basic·pdfsam·裁切
开开心心就好2 小时前
文件关联被破坏怎么修?免费工具一键修复
java·服务器·开发语言·pdf·ocr·启发式算法·宽度优先
黄一一9112433 小时前
吾爱大佬开发,离线可用!PDF文件处理工具,本地网页版文件-浏览器里就能搞定,所有操作系统可用
windows·安全·阿里云·pdf·.net·开源软件
开开心心就好3 小时前
Windows视频播放器推荐,精简版体积更小
java·服务器·开发语言·eclipse·pdf·ocr·音视频
开开心心就好3 小时前
A3的PDF怎么切成A4?拖一下分割线就行
服务器·开发语言·python·算法·pdf·ocr·tornado
PaperData3 小时前
2004-2025年中国农产品价格调查年鉴EXCEL+PDF
大数据·pdf
蓝星空20003 小时前
如何将 PDF 转换为 .md 格式的 Markdown 文件?无需上传,3 步完成
人工智能·pdf·编辑器
qiushijin9618 小时前
【2026.12】日语能力考试N1、N2、N3、N4、N5历年真题及答案合集PDF(2010-2026年)
经验分享·pdf
工具派21 小时前
PDF里没有表格,PDF转Excel行列是靠什么对上的?
pdf·excel