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); // 每秒检查一次
相关推荐
慧都小妮子8 小时前
PDF图片提取总“褪色“?Aspose.PDF 多层级提取能力详解
pdf·c#·.net·图片处理·文档处理·色彩空间
SamChan9010 小时前
PDF翻译中的并发控制:用Semaphore防止API限流与资源耗尽
java·jvm·pdf
ilvcn1 天前
在线 PDF 翻译工具实测:整份翻译保留表格版式,长文档处理方案
pdf
accept 99%1 天前
python版提取 PDF 的常用第三方库与工具
开发语言·python·pdf
AmyLin_20012 天前
PDF 色彩保真工程实践【6】怎么证明“真的无损“?——SHA-256 校验与三个真实踩坑
c++·pdf·内存·sdk·调试·印刷
zyplayer-doc2 天前
zyplayer-doc企业知识库能做什么:从文档创建、权限管理到AI问答的完整能力
大数据·javascript·数据库·人工智能·pdf·word
小短腿乄2 天前
java实现pdf加水印+签名
java·开发语言·pdf
gb42152872 天前
python中unstructured库和langchain-unstructured库在解析pdf文件的时候的区别?
python·langchain·pdf
吹个口哨写代码2 天前
markdown转word、pdf
pdf
ElasticPDF-新国产PDF编辑器3 天前
【最新·免费PDF编辑器·不限终端·最高性价比SDK】直接编辑 PDF 原有图片!裁剪、替换、旋转与图层管理
pdf