当前位置： 首页 > article >正文

PDF预览-搜索并高亮文本

article 2026/2/3 14:33:36

在PDF.js中实现搜索高亮功能可以通过自定义一些代码来实现。PDF.js 是一个通用的、基于Web的PDF阅读器，它允许你在网页上嵌入PDF文件，并提供基本的阅读功能。要实现搜索并高亮显示文本，你可以通过以下几个步骤来完成：

1. 引入PDF.js库

首先，确保你的项目中已经包含了PDF.js库。你可以从PDF.js的GitHub页面下载库文件，或者使用CDN链接。

例如，你可以在HTML文件的<head>部分添加以下代码来引入PDF.js：

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

2. 加载PDF文档

使用PDF.js加载PDF文档。这通常涉及使用pdfjsLib.getDocument方法。

var loadingTask = pdfjsLib.getDocument('path/to/pdf');loadingTask.promise.then(function(pdf) {console.log('PDF loaded');// 接下来可以进行搜索和渲染等操作}, function (reason) {// PDF加载失败的处理console.error(reason);});

3. 实现搜索功能

搜索功能需要你遍历PDF的每个页面，查找匹配的文本。你可以使用pdf.getPage(pageNumber)来获取每个页面，然后使用正则表达式或者简单的字符串匹配方法来查找文本。

function searchPDF(pdf, searchTerm) {var totalPages = pdf.numPages;for (var pageNum = 1; pageNum <= totalPages; pageNum++) {pdf.getPage(pageNum).then(function(page) {var textContent = page.getTextContent();var items = textContent.items;var found = false;items.forEach(function(item) {if (item.str.includes(searchTerm)) {found = true;highlightText(item, searchTerm); // 自定义函数来高亮文本}});if (found) {page.render({}); // 重新渲染页面以显示高亮}});}}

4. 高亮文本

为了高亮文本，你可以创建一个函数来修改文本项的样式。这通常涉及到修改canvas的上下文或者在渲染时直接修改文本的样式。由于直接在canvas上操作比较复杂，一个简单的方法是在渲染前修改文本内容，使其包含包围高亮文本的HTML元素（如果你是在一个支持HTML渲染的环境中，如某些特定的浏览器或框架）。例如：
 

function highlightText(item, searchTerm) {var startIndex = item.str.indexOf(searchTerm);if (startIndex !== -1) {var preMatch = item.str.substring(0, startIndex);var match = item.str.substring(startIndex, startIndex + searchTerm.length);var postMatch = item.str.substring(startIndex + searchTerm.length);item.str = preMatch + `<span style="background-color:yellow">${match}</span>` + postMatch;}}

注意：直接在getTextContent().items中修改item.str可能不会直接反映到渲染结果上，因为getTextContent()返回的是纯文本内容。一个更好的方式是使用renderTask的viewport和canvas来绘制文本，并在绘制时应用高亮。这种方法需要对PDF.js的渲染过程有更深入的了解，通常涉及到自定义渲染逻辑或使用第三方库来辅助。例如，你可以考虑使用pdf-lib库来处理更复杂的文本操作。

5. 自定义渲染逻辑（高级）

如果你需要更精细的控制（如直接在canvas上绘制高亮），你可能需要自定义渲染逻辑，这通常涉及到重写或扩展PDF.js的渲染器。这通常比上述简单方法更复杂，涉及到对PDF内容的详细解析和绘图。对于大多数基本用途，简单的HTML包裹可能就足够了。如果你需要更专业的处理，可以考虑使用其他库或工具，如pdf-lib进行更高级的文本操作。

结论

对于大多数基本应用场景，通过HTML包裹文本的方式来高亮搜索结果是一个简单且有效的方法。对于更复杂的需求，考虑使用专业的PDF处理库或深入研究PDF.js的渲染机制来实现更高级的功能。

相关文章：

PDF预览-搜索并高亮文本

在PDF.js中实现搜索高亮功能可以通过自定义一些代码来实现。PDF.js 是一个通用的、基于Web的PDF阅读器&#xff0c;它允许你在网页上嵌入PDF文件&#xff0c;并提供基本的阅读功能。要实现搜索并高亮显示文本&#xff0c;你可以通过以下几个步骤来完成&#xff1a; 1. 引入PDF…...

编程日记 2025/11/12 20:46:15

【备赛】蓝桥杯嵌入式实现led闪烁

原理 由于蓝桥杯的板子带有锁存器&#xff0c;并且与lcd屏幕有冲突&#xff0c;所以这个就成了考点。 主要就是用定时器来实现&#xff0c;同时也要兼顾lcd的冲突。 一、处理LCD函数 首先来解决与lcd屏幕冲突的问题&#xff0c;把我们所有用到的lcd函数改装一下。 以下是基…...

编程日记 2026/1/26 19:27:25

【Python】贝叶斯，条件概率是怎么回事儿

【Python】贝叶斯&#xff0c;条件概率是怎么回事儿 一、原理简介1.1 贝叶斯定理1.2 朴素贝叶斯假设 二、算法实现过程2.1 数据准备与预处理2.2 模型训练与预测2.2.1 高斯朴素贝叶斯 - 对应连续型数据2.2.2 多项式朴素贝叶斯 - 离散型数据 2.3 模型评估 三、算法优缺点分析3.1 …...

编程日记 2026/2/1 6:34:11

Flink介绍——实时计算核心论文之Storm论文详解

引入 我们通过以下两篇文章&#xff0c;深入探索了S4是如何抽象流式计算模型&#xff0c;如何设计架构和系统&#xff0c;存在那些局限&#xff1a; 论文详解论文总结 Yahoo推出的S4 并没有在历史舞台上站稳脚跟&#xff0c;在S4的论文发表的同一年&#xff0c;我们今天的主…...

编程日记 2026/1/26 20:05:29

001 使用单片机实现的逻辑分析仪——吸收篇

本内容记录于韦东山老师的毕设级开源学习项目&#xff0c;含个人观点&#xff0c;请理性阅读。 个人笔记&#xff0c;没有套路&#xff0c;一步到位&#xff0c;欢迎交流&#xff01; 00单片机的逻辑分析仪与商业版FPGA的逻辑分析仪异同 对比维度自制STM32逻辑分析仪商业版逻…...

编程日记 2026/1/26 19:40:48

es基本概念

Elasticsearch 的架构与基本概念 Elasticsearch&#xff08;简称 ES&#xff09;是一个开源的分布式搜索和分析引擎&#xff0c;基于 Apache Lucene 构建。它被广泛用于全文搜索、日志分析、实时数据分析等场景。以下是其架构概述及其基本概念的详细解释。 Elasticsearch 的架…...

编程日记 2025/6/6 15:13:54

可以使用费曼学习法阅读重要的书籍

书本上画了很多线&#xff0c;回头看等于没画出任何重点。 不是所有的触动都是有效的。就像你曾经看过很多好文章&#xff0c;当时被触动得一塌糊涂&#xff0c;还把它们放进了收藏夹&#xff0c;但一段时间之后&#xff0c;你就再也记不起来了。如果让你在一本书上画出令自己…...

编程日记 2025/8/24 16:21:04

11-产品经理-创建产品

在“产品”-“仪表盘”内&#xff0c;可以查看系统中关于产品及相关需求的统计。 在“产品”-“产品列表”页面&#xff0c;可以按项目集、项目查看其关联产品。还可以添加产品、编辑产品线、或者导出产品列表。 产品看板&#xff0c;通过看板方式查看产品、产品计划和产品下的…...

编程日记 2026/1/26 20:24:25

JavaScript学习教程，从入门到精通，JavaScript 基础语法全面指南（5）

JavaScript 基础语法全面指南 一、JavaScript 基本概念 JavaScript 是一种轻量级的解释型或即时编译型的编程语言&#xff0c;主要用于网页开发&#xff0c;为网页添加交互功能。 1.1 JavaScript 的特点 解释型语言&#xff1a;不需要编译&#xff0c;由 JavaScript 引擎直…...

编程日记 2025/12/26 15:09:11

低代码开发平台：飞帆制作网页并集成到自己的网页中

应用场景&#xff1a; 有时&#xff0c;我们的网页使用了某个模版&#xff0c;或者自己写的 html、css、javascript 代码。只是网页中的一部分使用飞帆来制作。这样的混合网页如何实现呢&#xff1f; 其实很容易&#xff0c;来体验一下飞帆提供的功能&#xff01; 还记得这个…...

编程日记 2026/1/26 16:53:49

语法: result=log (x)；

LOG( ) 语法: resultlog (x); 参数: x是一个浮点数; 返回值: result等于返回值,是一个浮点数; 功能: 该函数是用来计算浮点数x的自然对数(即ln x);如果x小于或等于0,或x太大,则行为没有定义; 注意:存在error挂起; 如果在编写程序里包含了errno.h头文件,则范围和等级…...

编程日记 2026/1/26 19:53:12

Hibernate核心方法总结

Session中的核心方法梳理 1、save方法 这个方法表示将一个对象保存到数据库中&#xff0c;可以将一个不含OID的new出来的临时对象转换为一个处于Session缓存中具有OID的持久化对象。 需要注意的是&#xff1a;在save方法前设置OID是无效的但是也不会报错&#xff0c;在save方…...

编程日记 2026/1/26 20:59:38

IntelliJ IDEA Maven 工具栏消失怎么办？

一、问题现象与背景 在使用 IntelliJ IDEA&#xff08;简称 IDEA&#xff09;开发 Maven 项目时&#xff0c;偶尔会遇到右侧或侧边栏的 Maven 工具栏&#xff08;显示依赖、生命周期等信息的窗口&#xff09;突然消失的情况。这可能影响开发者快速操作 Maven 构建、依赖管理等…...

编程日记 2026/1/26 18:38:52

消息队列(kafka 与 rocketMQ)

为什么要使用消息队列?作用1: 削峰填谷(突发大请求量问题)作用2: 解耦(单一原则)作用3: 异步(减少处理时间) 如何选择消息队列(kafka&RocketMQ)成本功能性能选择 rocketMQ是参考kafka进行实现的为什么rocketMQ与kafka性能差距很大呢?kafka 的底层数据储存实现rocketMQ 的…...

编程日记 2026/1/26 17:00:27

【STM32】Flash详解

【STM32】Flash详解 文章目录 【STM32】Flash详解1.Flash闪存概念1. 1核心区别&#xff1a;NOR Flash vs. NAND Flash1.2 为什么常说的“Flash”多指 NAND Flash&#xff1f;1.3技术细节对比(1) 存储单元结构(2) 应用场景(3) 可靠性要求 1.4总结 2.STM32内部的Flash2.1为什么是…...

编程日记 2026/1/26 1:10:08

CV - 目标检测

物体检测 目标检测和图片分类的区别&#xff1a; 图像分类&#xff08;Image Classification&#xff09; 目的&#xff1a;图像分类的目的是识别出图像中主要物体的类别。它试图回答“图像是什么&#xff1f;”的问题。 输出&#xff1a;通常输出是一个标签或一组概率值&am…...

编程日记 2026/1/24 16:38:13

node-modules-inspector 可视化node_modules

1、node_modules 每个vue的项目都有很多的依赖&#xff0c;有的是dev的&#xff0c;有的是生产的。 2、使用命令pnpx node-modules-inspector pnpx node-modules-inspector 3、node_modules可视化 4、在线体验 Node Modules Inspector 5、github地址 https://github.com/a…...

编程日记 2026/1/21 18:22:06

远程服务器下载llama模型

适用于有防火墙不能直接从HF上下载的情况 然后&#xff0c;你可以克隆 Llama-3.1-8B-Instruct 模型&#xff1a; git clone https://你的用户名:你的访问令牌hf-mirror.com/meta-llama/Llama-3.1-8B-Instruct用户名&#xff0c;令牌来自huggingface官网 注意&#xff1a;要提…...

编程日记 2026/1/27 4:42:38

Spring 中的 @Autowired 和 @Resource

&#x1f9e9; 一、Autowired 和 Resource 的基本作用 注解来源作用AutowiredSpring 提供&#xff08;org.springframework.beans.factory.annotation.Autowired&#xff09;按类型 自动注入ResourceJDK 提供&#xff08;javax.annotation.Resource&#xff09;默认按名称 注入…...

编程日记 2026/1/21 1:54:24

自定义汇编语言（Custom Assembly Language） 和 Unix Git

1. 什么是自定义汇编语言&#xff08;Custom Assembly Language&#xff09;&#xff1f; 汇编语言&#xff08;Assembly Language&#xff09;是一种低级编程语言&#xff0c;它直接与 CPU 指令集&#xff08;Instruction Set Architecture, ISA&#xff09;对应&#xff0c;…...

编程日记 2026/1/24 9:35:15

Python菜鸟教程(小程序)

目录 一.简易计算器 二.学生成绩分级 三.密码设置 四.作业选择 点赞收藏,评论支持 一.简易计算器 print(-------使用的运算符-------\n) print(1.加号) print(2.减号) print(3.乘号) print(4.除号) Aint(input(请输入第一个数: )) Bint(input(请输入第二个数: )) Fi…...

编程日记 2026/1/28 17:54:34

2011-2019年各省地方财政金融监管支出数据

2011-2019年各省地方财政金融监管支出数据 1、时间&#xff1a;2007-2019年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;行政区划代码、地区、年份、地方财政金融监管支出 4、范围&#xff1a;31省 5、指标说明&#xff1a;地方财政在金融监管方面的支出…...

编程日记 2026/1/22 16:26:39

Java大厂面试题 -- JVM 优化进阶之路：从原理到实战的深度剖析（2）

最近佳作推荐&#xff1a; Java大厂面试题 – 深度揭秘 JVM 优化&#xff1a;六道面试题与行业巨头实战解析&#xff08;1&#xff09;&#xff08;New&#xff09; 开源架构与人工智能的融合&#xff1a;开启技术新纪元&#xff08;New&#xff09; 开源架构的自动化测试策略优…...

编程日记 2026/1/22 15:37:57

SQL LIKE 语句详解

SQL LIKE 语句详解 引言 SQL（Structured Query Language）是用于管理关系数据库的标准语言。在SQL中，LIKE 语句是一种常用的字符串匹配操作符，用于在查询中搜索包含特定模式的字符串。本文将详细介绍 LIKE 语句的用法、规则以及注意事项。 一、什么是 LIKE 语句？ LIKE …...

编程日记 2025/11/28 12:02:52

现代Web应用中的时光机器：深入解析撤销/重做功能的艺术与科学

引言&#xff1a;数字世界的安全网 在现实世界中&#xff0c;我们拥有橡皮擦、撤销键和后悔药&#xff08;比喻意义上&#xff09;。数字世界同样需要这样的安全保障。研究表明&#xff1a; **85%**的用户会在完成复杂表单时犯至少一个错误 提供撤销功能的界面可将用户满意度…...

编程日记 2025/10/19 6:39:43

存储引擎 / 事务 / 索引

1. 存储引擎 MySQL 中特有的术语。 &#xff08;Oracle 有&#xff0c;但不叫这个名字&#xff09; 是一种表存储 / 组织数据的方式 不同的存储引擎&#xff0c;表存储数据的方式不同 1.1 查看存储引擎 命令&#xff1a; show engines \g&#xff08;或大写&#xff1a;G…...

编程日记 2026/1/23 12:27:19

Go语言-初学者日记（八）：构建、部署与 Docker 化

&#x1f9f1; 一、go build&#xff1a;最基础的构建方式 Go 的构建工具链是出了名的轻量、简洁&#xff0c;直接用 go build 就能把项目编译成二进制文件。 ✅ 构建当前项目 go build -o myapp-o myapp 指定输出文件名默认会构建当前目录下的 main.go 或 package main &a…...

编程日记 2025/5/25 0:00:49

【ESP32】ESP32物联网应用：MQTT控制与状态监测

ESP32物联网应用&#xff1a;MQTT控制与状态监测 引言 在物联网时代&#xff0c;远程监测和控制设备已经成为现实生活中常见的需求。本文将介绍如何使用ESP32微控制器配合MQTT协议&#xff0c;实现一个简单而强大的物联网应用&#xff1a;远程状态监测和设备控制。我们将以巴…...

编程日记 2026/1/31 0:15:05

RabbitMQ运维

RabbitMQ运维 一.集群1.简单介绍2.集群的作用 二.搭建集群1.多机多节点搭建步骤 2.单机单节点搭建步骤 3.宕机演示 三.仲裁队列1.简单介绍2.Raft协议Raft基本概念主节点选举选举过程 3.仲裁队列的使用 四.HAProxy负载均衡1.安装HAProxy2.HAProxy的使用 一.集群 1.简单介绍 Ra…...

编程日记 2026/1/23 10:01:14

Ansible 实战：Roles，运维的 “魔法函数”

一、介绍 你现在已经学过tasks和handlers&#xff0c;那么&#xff0c;最好的playbook组织方式是什么呢&#xff1f;答案很简单&#xff1a;使用roles&#xff01;roles基于一种已知的文件结构&#xff0c;能够自动加载特定的vars_files、tasks以及handlers。通过roles对内容进…...

编程日记 2026/1/23 12:32:28