文章目录

- 需求场景
- - 1、使用pdf.js+解决pdf.js跨域
  - 2、预览方案
  - 3、检索方案
  - 4、实现效果
- ✒️总结

需求场景

本文主要针对网页端 PDF 本地预览场景，支持通过关键字对 PDF 进行检索查询，当点击检索结果列表中的对应关键字时，可同步在预览界面中触发内容搜索 —— 不仅能精准跳转到匹配内容所在的 PDF 页码，还能对目标文字进行高亮显示。此外，方案还涵盖了 iframe 嵌入预览、文字高亮等核心功能的实现细节，并针对性解决了基于 pdf.js 开发时常见的跨域问题，为网页端 PDF 预览与检索需求提供了完整技术参考。
技术栈：pdf.js+vue3

1、使用pdf.js+解决pdf.js跨域

pdf.js下载地址
在这里插入图片描述

将下载的pdf.js压缩包解压并放入到项目中的public文件夹下，如下
在这里插入图片描述

在项目的 public/pdfjs/web/viewer.mjs 文件中，搜索关键词 “file origin does not match viewer’s”，找到该关键词所在的异常抛出代码段，并将其注释掉。若不进行此注释操作，会触发跨域错误，导致 PDF 文件无法正常加载预览。

在这里插入图片描述

2、预览方案

pdf.js 提供了多种 PDF 预览方案（如基于 canvas 渲染的方案），本文选用 iframe 嵌入预览方式：先将 pdf.js 部署为独立的预览网站，在生产环境中，只需通过 iframe 传入目标 PDF 文件的地址（即 fileUrl），即可快速实现 PDF 预览功能。需要注意的是，此处的 fileUrl 不仅可以是常规的文件地址，也可以是通过 URL.createObjectURL() 方法生成的文件流临时地址。

 <iframe    ref="pdfFrame" width="100%" height="100%" :src="`/pdfjs/web/viewer.html?file=${fileUrl}`" frameborder="0" id="myIframe"></iframe>

3、检索方案

封装一个handleSearch方法传入关键字文案，进行检索查询

入参：接收 query（string类型，即待搜索的关键字文案），并处理空值（默认转为空字符串）。
核心逻辑：
- 通过 pdfFrame.value.contentWindow 获取iframe中pdf.js预览实例的窗口对象；
- 拿到预览实例的 findBar（搜索工具栏）对象，若存在则配置搜索参数（设置关键字、开启全量高亮、关闭大小写敏感）；
- 触发 find（执行搜索）和 highlightallchange（应用高亮）事件，完成检索与高亮；
- 异常捕获：通过try-catch处理搜索过程中的错误，打印错误日志便于排查。
  通过关联pdf.js的原生 findBar 能力，封装成简洁的检索方法，同时通过加载状态控制和异常处理，保证搜索功能的稳定性与可用性。

/*** 接收关键字文案作为参数* @param {string} query - 要搜索的文案*/const handleSearch= (query) => {const searchText = query ||''try {// 获取PDF Viewer的相关对象const frameWindow = pdfFrame.value.contentWindow;const findBar = frameWindow.PDFViewerApplication.findBar;if (findBar) {// 设置搜索参数findBar.findField.value = searchText;findBar.highlightAll.checked = true; // 高亮所有匹配项findBar.caseSensitive.checked = false; // 不区分大小写// 搜索和高亮findBar.dispatchEvent(new Event('find'));findBar.dispatchEvent(new Event('highlightallchange'));}} catch (error) {console.error('PDF搜索失败:', error);}
};const pdfFrame = ref(null);
const isPdfLoaded = ref(false);
// 监听iframe加载完成
onMounted(() => {const frame = pdfFrame.value;//监听 iframe 加载状态，确保在 PDF 加载完成后才执行搜索操作if (frame) {frame.onload = () => {isPdfLoaded.value = true;console.log('PDF viewer loaded successfully');};}
});