首页 > 网络编程 > JavaScript > javascript技巧 > pdf.js检索对应文本和高亮

pdf.js实现pdf检索对应文本和高亮功能

2025-09-19 10:06:33 作者：前端初见

PDF.js是一个强大的JavaScript库,可以在浏览器中渲染PDF文件,无需依赖任何第三方插件,这篇文章主要介绍了pdf.js检索对应文本和高亮的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

需求场景

本文主要针对网页端 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');
    };
  }
});

使用

handleSearch('你要查询的文案')

4、实现效果

总结

到此这篇关于pdf.js实现pdf检索对应文本和高亮功能的文章就介绍到这了,更多相关pdf.js检索对应文本和高亮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！