当前位置: 首页 > news >正文

使用 React 16+Webpack 和 pdfjs-dist 或 react-pdf 实现 PDF 文件显示、定位和高亮

写在前面

在本文中,我们将探讨如何使用 React 16+Webpack 和 pdfjs-dist 或 react-pdf 库来实现 PDF 文件的显示、定位和高亮功能。这些库提供了强大的工具和 API,使得在 Web 应用中处理 PDF 文件变得更加容易。

项目设置

首先,我们需要创建一个新的 React 项目并安装所需的依赖。可以使用 create-react-app 工具来快速生成项目骨架:

npx create-react-app pdf-viewer
cd pdf-viewer

接下来,安装 pdfjs-dist 或 react-pdf 库:

# 使用 pdfjs-dist
npm install pdfjs-dist# 或者使用 react-pdf
npm install react-pdf

使用 pdfjs-dist

pdfjs-dist 是一个流行的 JavaScript 库,用于在浏览器中解析和显示 PDF 文件。以下是使用 pdfjs-dist 实现 PDF 文件显示、定位和高亮的步骤:

  1. 导入 pdfjs-dist

在你的 React 组件中导入 pdfjs-dist:

import { PDFDocument } from 'pdfjs-dist';
  1. 加载 PDF 文件

使用 PDFDocument 类从 URL 或文件对象加载 PDF 文档:

const pdfUrl = 'https://example.com/sample.pdf';PDFDocument.load(pdfUrl).promise.then((pdf) => {// PDF 加载完成后的处理逻辑
});
  1. 显示 PDF 页面

获取 PDF 文档的第一页并将其渲染到 canvas 元素中:

const canvas = document.getElementById('pdf-canvas');
const ctx = canvas.getContext('2d');pdf.getPage(1).then((page) => {const viewport = page.getViewport({ scale: 1 });canvas.height = viewport.height;canvas.width = viewport.width;const renderContext = {canvasContext: ctx,viewport,};page.render(renderContext);
});
  1. 定位到特定页面

使用 getPage() 方法获取指定页码的页面对象:

const targetPageNumber = 3;
pdf.getPage(targetPageNumber).then((page) => {// 定位到目标页面的处理逻辑
});
  1. 高亮文本

使用 getTextContent() 方法获取页面上的文本内容,并使用 canvas API 在文本位置绘制高亮矩形:

page.getTextContent().then((textContent) => {const items = textContent.items;for (let i = 0; i < items.length; i++) {const item = items[i];if (item.str === 'Hello, world!') {const transform = page.getTransform(item.transform);const x = transform[4];const y = transform[5];const width = item.width;const height = item.height;ctx.fillStyle = 'rgba(255, 255, 0, 0.5)';ctx.fillRect(x, y, width, height);}}
});

使用 react-pdf

react-pdf 是一个专门为 React 应用设计的 PDF 查看器组件。以下是使用 react-pdf 实现 PDF 文件显示、定位和高亮的步骤:

  1. 导入 react-pdf

在你的 React 组件中导入 react-pdf:

import { Document, Page } from 'react-pdf';
  1. 加载 PDF 文件

使用 Document 组件加载 PDF 文档:

const pdfUrl = 'https://example.com/sample.pdf';<Document file={pdfUrl}><Page pageNumber={1} />
</Document>
  1. 显示 PDF 页面

使用 Page 组件渲染 PDF 页面:

const pdfUrl = 'https://example.com/sample.pdf';<Document file={pdfUrl}><Page pageNumber={1} />
</Document>
  1. 定位到特定页面

通过更改 Page 组件的 pageNumber 属性来定位到指定页码:

const targetPageNumber = 3;<Document file={pdfUrl}><Page pageNumber={targetPageNumber} />
</Document>
  1. 高亮文本

react-pdf 不直接支持高亮文本功能,但可以通过自定义渲染函数来实现。例如,可以使用 onLoadSuccess 回调获取 PDF 文档的文本内容,并在渲染页面时绘制高亮矩形:

const pdfUrl = 'https://example.com/sample.pdf';function CustomPage({ pageNumber, width, height }) {const [textContent, setTextContent] = useState(null);useEffect(() => {const page = pdf.getPage(pageNumber);page.getTextContent().then((textContent) => {setTextContent(textContent);});}, [pageNumber]);return (<PagepageNumber={pageNumber}width={width}height={height}render={(page) => {// 在这里绘制高亮矩形if (textContent) {const canvas = page.getCanvas();const ctx = canvas.getContext('2d');//...}}}/>);
}<Document file={pdfUrl}><CustomPage pageNumber={1} width={400} height={600} />
</Document>

总结

在本文中,我们探讨了如何使用 React 16+Webpack 和 pdfjs-dist 或 react-pdf 库来实现 PDF 文件的显示、定位和高亮功能。无论选择哪种库,都可以轻松地在 Web 应用中处理 PDF 文件。记住,根据你的具体需求和项目要求,选择最适合的库和方法。

相关文章:

使用 React 16+Webpack 和 pdfjs-dist 或 react-pdf 实现 PDF 文件显示、定位和高亮

写在前面 在本文中&#xff0c;我们将探讨如何使用 React 16Webpack 和 pdfjs-dist 或 react-pdf 库来实现 PDF 文件的显示、定位和高亮功能。这些库提供了强大的工具和 API&#xff0c;使得在 Web 应用中处理 PDF 文件变得更加容易。 项目设置 首先&#xff0c;我们需要创建…...

驱动开发系列35 - Linux Graphics GEM Buffer Object 介绍

一:概述 在 Linux 内核中,DRM(Direct Rendering Manager)模块 是用于管理显示硬件和图形渲染的核心框架。它负责协调用户空间应用程序(例如 X Server、Wayland Compositors、Mesa 等)和 GPU 硬件之间的通信,是 Linux 图形子系统的重要组成部分。 GEM (Graphics Executio…...

Java常见的异常类有哪些?

对应异常&#xff1a; 空指针 → NullPointerException数据库 → SQLException数组越界 → IndexOutOfBoundsException文件丢失 → FileNotFoundExceptionIO问题 → IOException强制转 → ClassCastException方法找不到 → NoSuchMethodException数组类型错 → ArrayStoreExce…...

清华大学新闻与传播学院沈阳团队出品的《DeepSeek:从入门到精通》104页PDF

前言 本机运行DeepSeek R1大模型文章如下&#xff1a; Windows电脑本地部署运行DeepSeek R1大模型&#xff08;基于Ollama和Chatbox&#xff09;【保姆级万字教程】在Windows计算机部署DeepSeek大模型&#xff0c;给在实验室无外网的同事们用&#xff08;基于Ollama和OpenWebUI…...

增量hdfs数据追平

1、假设客户只改了最近的分区。他不会去修改历史的分区表&#xff0c;如果大量改历史的分区表&#xff0c;那纯纯把hive当mysql用了。这样我们就只能找出变动的表&#xff0c;然后删除&#xff0c;重新迁移。 2、此处是确保他们不会大量改历史分区&#xff0c;只有少部分改&am…...

Linux高并发服务器开发 第十七天(管道缓存区查询大小 管道的优劣 命名管道mkfifo 建立释放映射区mmap/munmap 匿名映射 进程间的通信)

目录 1.pipe管道读写行为 1.1例题&#xff1a;实现父子进程 ls | wc -l 1.2兄弟进程 ls | wc -l 2.管道缓存区 2.1命令查询 2.2函数查询 3.pipe管道的优劣 4.命名管道 fifo 5.mmap 5.1文件进程间通信 5.2建立、释放映射区 5.3匿名映射 6.进程间通信 6.1父子进间通…...

C语言常见概念

目录 第一个C语言程序 main函数 写法&#xff1a; printf和库函数 printf()函数 库函数 关键字 字符和ASCII码表 字符串和\0 转义字符 语句 注释 注释的两种形式 第一个C语言程序 #include<stdio.h>//第一个c语言程序 int main() {printf("Hello World…...

AI代码生成器如何重塑前端开发的工作环境

近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术迅猛发展&#xff0c;深刻地改变着各行各业的工作方式。在软件开发领域&#xff0c;AI写代码工具的出现更是掀起了一场革命&#xff0c;尤其对前端开发工程师的工作环境和协作方式产生了深远的影响。本文将深入探讨AI…...

设计模式-结构型-外观模式

在软件开发中&#xff0c;随着功能的不断迭代&#xff0c;系统会变得越来越复杂&#xff0c;模块之间的依赖关系也会越来越深。这种复杂性会导致代码难以理解、维护和扩展。而外观模式&#xff08;Facade Pattern&#xff09;正是为了解决这一问题而生的。 一、外观模式简介 …...

8.flask+websocket

http是短连接&#xff0c;无状态的。 websocket是长连接&#xff0c;有状态的。 flask中使用websocket from flask import Flask, request import asyncio import json import time import websockets from threading import Thread from urllib.parse import urlparse, pars…...

ARM Cortex-M3/M4 权威指南 笔记【二】架构

一、架构 1.1 架构简介 Cortex-M3/M4 处理器都基于 ARMv7-M 架构。最初的 ARMv7-M 架构是随着 Cortex-M3 处理器一同引入的&#xff0c;而在 Cortex-M4 发布时&#xff0c;架构中又额外增加了新的指令和特性&#xff0c;改进后的架构有时也被称为 ARMV7E-M。要了解 ARM7-M 和…...

HCIA项目实践--静态路由的拓展配置

7.7 静态路由的拓展配置 网络中的两个重要思想&#xff1a; &#xff08;1&#xff09; 实的不行来虚的&#xff1b; &#xff08;2&#xff09; 范围太大&#xff0c;划分范围。&#xff08;分治&#xff09; 7.7.1 负载均衡 &#xff08;1&#xff09;定义 负载均衡是一种网…...

STL中list的模拟实现

文章目录 1. 前言and框架2. 相对完整的框架3. 模拟实现接口1. 迭代器的引入2. 迭代器的区分list迭代器迭代器的构造list迭代器的实现模拟指针解引用前置和前置--后置和--迭代器&#xff01;迭代器-> list的const迭代器迭代器模板迭代器是否需要析构&#xff0c;拷贝构造&…...

计算机网络知识速记:HTTP1.0和HTTP1.1

计算机网络知识速记&#xff1a;HTTP1.0和HTTP1.1 1. 基本概念 1.1 HTTP1.0 HTTP1.0是1996年发布的第一个正式版本&#xff0c;主要用于客户端与服务器之间的简单请求和响应交互。它的设计理念相对简单&#xff0c;适合处理一些基本的网页服务。 1.2 HTTP1.1 HTTP1.1是HTT…...

Apache Kafka 中的认证、鉴权原理与应用

编辑导读&#xff1a;本篇内容将进一步介绍 Kafka 中的认证、鉴权等概念。AutoMQ 是与 Apache Kafka 100% 完全兼容的新一代 Kafka&#xff0c;可以帮助用户降低 90%以上的 Kafka 成本并且进行极速地自动弹性。作为 Kafka 生态的忠实拥护者&#xff0c;我们也会持续致力于传播 …...

DeepSeek自然语言处理(NLP)基础与实践

自然语言处理(Natural Language Processing, NLP)是人工智能领域的一个重要分支,专注于让计算机理解、生成和处理人类语言。NLP技术广泛应用于机器翻译、情感分析、文本分类、问答系统等场景。DeepSeek提供了强大的工具和API,帮助我们高效地构建和训练NLP模型。本文将详细介…...

激光工控机在精密制造中的应用与优势

在精密制造中&#xff0c;激光工控机可以用于许多场景例如 激光切割与雕刻&#xff1a;用于金属、塑料、陶瓷等材料的精密切割和雕刻&#xff0c;适用于汽车、航空航天、电子等行业&#xff1b;可实现复杂图案和高精度加工&#xff0c;满足微米级精度要求。 激光焊接&#xf…...

Docker换源加速(更换镜像源)详细教程(2025.2最新可用镜像,全网最详细)

文章目录 前言可用镜像源汇总换源方法1-临时换源换源方法2-永久换源&#xff08;推荐&#xff09;常见问题及对应解决方案1.换源后&#xff0c;可以成功pull&#xff0c;但是search会出错 补充1.如何测试镜像源是否可用2.Docker内的Linux换源教程 换源速通版&#xff08;可以直…...

12.14 算法练习

1. 每日温度 算法思路 1. 单调栈的作用&#xff1a;记录我们遍历过的元素&#xff0c;与当前的元素方便对比&#xff0c;本质是以空间换时间&#xff1b; 2. 比较当前元素与栈顶元素的大小&#xff0c;当当前元素大于栈顶元素时&#xff0c;持续弹出栈顶元素下标&#xff0c;…...

ASP.NET Core SignalR的分布式部署

假设聊天室程序被部署在两台服务器上&#xff0c;客户端1、2连接到了服务器A上的ChatRoomHub&#xff0c;客户端3、4连接到服务器B上的ChatRoomHub&#xff0c;那么客户端1发送群聊消息时&#xff0c;只有客户端1、2能够收到&#xff0c;客户端3、4收不到&#xff1b;在客户端3…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...