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

前端实现在PDF上添加标注(1)

article 2026/4/26 14:53:35

        前段时间接到一个需求，用户希望网页上预览PDF，同时能在PDF上添加文字，划线，箭头和用矩形框选的标注，另外还需要对已有的标注进行修改，删除。

        期初在互联网上一通搜索，对这个需求来讲发现了两个问题。

        第一：有些同行给的方案不符合预期。大多数是在PDF的上面加一层透明层，然后再在这个透明层上面添加文字。这样做批注不能随PDF滚动或放大缩小而跟随，回显也是一个麻烦事，可以说没办法回显。

        第二：有些很强，功能很全面的给PDF添加批注的插件，完全符合需求，但是需要支付几百上千的费用。

        因此只能硬着头皮开发了。

        主要用 pdfjs + pdfjs-dist + jspdf + fabric实现，最终完美完成用户需求

效果展示：

     1、添加自由线： 2、添加文字标注（可以对文字标注进行拖动位置，放大缩小）

3、添加矩形和箭头（添加后可调整位置，大小）

4、删除已经添加过的批注，以及将添加批注的PDF导出，带批注的PDF。

另外还能有很多其他的批注都能实现，比如添加图片，修改颜色，修改画笔粗细等等。

提供源码

相关文章：

前端实现在PDF上添加标注(1)

前段时间接到一个需求，用户希望网页上预览PDF，同时能在PDF上添加文字，划线，箭头和用矩形框选的标注，另外还需要对已有的标注进行修改，删除。 期初在互联网上一通搜索，对这个需求来讲发现了两个问…...

编程日记 2026/4/17 13:30:56

【CXX-Qt】1.1 Rust中的QObjects

本文涉及到了使用CXX-Qt将Rust、C和QML集成到Qt应用程序中的各个方面。下面，我将提供一个简单的示例，演示如何使用CXX-Qt来创建一个Rust结构体并将其作为QObject子类暴露给C和QML。 一、设置CXX-Qt环境 首先，确保您已经安装了Rust、CXX和CX…...

编程日记 2026/2/20 0:39:36

操作系统中的任务调度算法

一、引言 在操作系统中，任务调度算法是核心组件之一，它负责合理分配有限的 CPU 资源，以确保系统的高效运行和良好的用户体验。任务调度的目标是实现公平性、最小化等待时间、提高系统吞吐量，并最大化 CPU 的利用率。不同的任务调…...

编程日记 2026/4/5 9:23:55

GitCode 助力 Easy-Es，革新 Elasticsearch 开发体验

项目仓库（点击阅读原文链接可直达） https://gitcode.com/dromara/easy-es 项目背景：填补 Elasticsearch ORM 框架空白 在 Java 开发领域，Excel 和 Elasticsearch 的代码编写难度一直名列前茅，尤其是 Elasticsearch&a…...

编程日记 2026/4/22 21:32:18

线程同步（互斥锁与条件变量）

文章目录 1、为什么要用互斥锁2、互斥锁怎么用3、为什么要用条件变量4、互斥锁和条件变量如何配合使用5、互斥锁和条件变量的常见用法 参考资料：https://blog.csdn.net/m0_53539646/article/details/115509348 1、为什么要用互斥锁 为了使各线程能够有序地访问公共…...

编程日记 2026/3/17 0:13:06

EF Core中实现值对象

目录 值对象优点 值对象的需求 值类型的实现 值类型GEO的实现 值类型MultilingualString的实现 案例：构建表达式树，简化值对象的比较 值对象优点 把有紧密关系的属性打包为一个类型把领域知识放到类的定义中 class shangjia {long id;string nam…...

编程日记 2026/4/22 13:15:54

《从入门到精通：蓝桥杯编程大赛知识点全攻略》（十一）-回文日期、移动距离、日期问题

前言 在这篇博客中，我们将通过模拟的方法来解决三道经典的算法题：回文日期、移动距离和日期问题。这些题目不仅考察了我们的基础编程能力，还挑战了我们对日期处理和数学推理的理解。通过模拟算法，我们能够深入探索每个问题的核心…...

编程日记 2026/4/22 15:50:19

Kubernetes 最佳实践：Top 10 常见 DevOps/SRE 面试问题及答案

1. 如何在 Kubernetes 中设置资源请求和限制？ 资源请求确保容器有最小资源量（CPU/内存），而限制则强制容器消耗的最大资源量。这有助于高效资源分配并防止资源争用。 示例： resources:requests:memory: "256Mi&…...

编程日记 2026/4/20 21:17:45

Docker Compose介绍及安装使用MongoDB数据库详解

在现代容器化应用部署中，Docker Compose是一种非常实用的工具，它允许我们通过一个docker-compose.yml文件来定义和运行多容器应用程序。然而，除了Docker之外，Podman也提供了类似的工具——Podman Compose，它允许我们在…...

编程日记 2026/4/26 2:58:01

科普：数据仓库中的“指标”和“维度”

在数据仓库中，指标和维度是两个核心概念，它们对于数据分析和业务决策至关重要。以下是对这两个概念的分析及举例说明： 一、指标 定义： 指标是用于衡量业务绩效的关键数据点，通常用于监控、分析和优化企业的运营状况。…...

编程日记 2026/4/22 19:32:33

11.swagger使用

菜单位置 未登录接口会返回401 登录的token存储的位置 配置文件swagger配置中将/dev-api修改/...

编程日记 2026/4/22 11:17:58

java高级知识之集合

前言 集合是java开发中的重点内容，需要掌握的东西很多，面试中可问的东西很多，无论是深度还是广度。集合框架中Collection对应的实现类如下所示，这些都是要完全掌握，一个可以分为三大类List集合、Set‘集合以及Map集合…...

编程日记 2026/4/15 6:15:25

deepseek + kimi 高效生成PPT

1.在deepseek中生成ppt大纲 2.将大纲复制到kimi中生成PPT kimi：https://kimi.moonshot.cn/...

编程日记 2026/4/25 8:12:47

hadoop之MapReduce：片和块

假如我现在500M这样的数据，如何存储？ 500M 128M 128M 128M 116M 分为四个块进行存储。 计算的时候，是按照片儿计算的，而不是块儿。 块是物理概念，一个块就是128M ,妥妥的，毋庸置疑。 片是逻辑概念&…...

编程日记 2026/2/20 22:04:18

好好说话：深度学习扫盲

大创项目是和目标检测算法YOLO相关的，浅浅了解了一些有关深度学习的知识。在这里根据本人的理解做一些梳理。 深度学习是什么？ 之前经常听到AI，机器学习，深度学习这三个概念，但是对于三者的区别一直很模糊。 AI&…...

编程日记 2026/4/26 8:56:31

ASP.NET Core的贫血模型与充血模型

目录 概念 需求 贫血模型 充血模型 总结 概念 贫血模型：一个类中只有属性或者成员变量，没有方法。充血模型：一个类中既有属性、成员变量，也有方法。 需求 定义一个类保存用户的用户名、密码、积分；用户必须具有…...

编程日记 2026/4/15 13:28:38

【愚公系列】《Python网络爬虫从入门到精通》001-初识网络爬虫

标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主&…...

编程日记 2026/4/25 4:52:06

Kubernetes控制平面组件：etcd（一）

云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）kubectl 和 …...

编程日记 2026/4/16 3:03:39

2100年芜湖人的一天：张明的生活剪影

2100年芜湖人的一天：张明的生活剪影 破晓 6:30 "沙沙"的微风声轻轻掠过耳畔，杨柳的沙沙声混合着若有若无的鸟鸣，张明的意识从深邃的梦境中缓缓浮现。这并非真实的自然声响，而是他的脑机接口精心编织的唤醒交响曲。量子…...

编程日记 2026/2/22 13:19:33

外贸网站源码 助力企业抢占蛇年市场先机！

在竞争激烈的外贸市场中，蛇年无疑是企业寻求突破与增长的关键一年。外贸网站源码为企业提供了快速搭建专业外贸网站的解决方案，助力企业在新的一年抢占市场先机。 快速上线 时间就是商机，尤其是在蛇年这样充满变数和机遇的年份。外贸网站源码…...

编程日记 2026/4/22 9:24:04

verilog练习：i2c slave 模块设计

文章目录 前言1.结构2.代码2.1 iic_slave.v2.2 sync.v2.3 wr_fsm.v2.3.1 状态机状态解释 2.4 ram.v 3. 波形展示4. 建议5. 资料总结 前言 首先就不啰嗦iic协议了，网上有不少资料都是叙述此协议的。 下面将是我本次设计的一些局部设计汇总，如果对读者有…...

编程日记 2026/4/11 21:16:50

项目6：基于大数据校园一卡通数据分析和可视化

1、项目简介 本项目是基于大数据的清华校园卡数据分析系统，通过Hadoop，spark等技术处理校园卡交易、卡号和商户信息数据。系统实现消费类别、男女消费差异、学院消费排行和年级对比等分析，并通过Web后端和可视化前端展示结果。项目运行便捷&…...

编程日记 2026/4/11 21:14:29

Linux常见系统日志类型

目录 系统日志（/var/log/syslog 或 /var/log/messages） 认证日志（/var/log/auth.log 或 /var/log/secure） Web服务器日志（/var/log/apache2/ 或 /var/log/nginx/） MySQL日志（/var/log/mysql/…...

编程日记 2026/4/21 7:42:19

npm 常用命令大全

npm 常用命令大全 下载包 npm install清理缓存 npm cache clean --force查看当前配置 npm config get registry设置淘宝镜像 npm config set registry https://registry.npmmirror.com查看 npm 版本 npm -vnpm 设置超时时间 npm config set fetch-timeout 600更新依赖 …...

编程日记 2026/2/24 8:39:14

java.io.InvalidClassException

类实现序列问题 如果实现了序列，最好生成序列号，因为类结构发生改变时，会报错 java.io.InvalidClassException 所以实现序列，需要生成序列号 private static final long serialVersionUID 1L;...

编程日记 2026/2/23 16:11:11

Datawhale 组队学习 Ollama教程 task1

一、Ollama 简介 比喻：Ollama 就像是一个“魔法箱子”，里面装满了各种大型语言模型（LLM）。你不需要懂复杂的魔法咒语（配置），只需要轻轻一按（一条命令），就能让…...

编程日记 2026/4/24 19:57:49

大模型基本原理（二）——ChatGPT的工作原理

如何得到一个ChatGPT？ 1、无监督预训练：通过大量的文本数据集进行无监督训练，得到一个基座模型（只会续写文本） 2、监督微调：通过一些人类撰写的高质量对话数据对基座模型进行监督微调，得到一个…...

编程日记 2026/4/26 12:30:38

成为高能量体质：从身体神庙到精神圣殿的修炼之路

清晨五点，当城市还在沉睡，瑜伽垫上的汗水已经折射出第一缕阳光。这不是苦行僧的自虐，而是高能量体质者的日常仪式。在这个能量稀缺的时代，如何把自己修炼成一座小型核电站？答案就藏在身体的每个细胞里。 一、能量管理…...

编程日记 2026/4/11 11:06:28

51c自动驾驶~合集50

我自己的原文哦~ https://blog.51cto.com/whaosoft/13280022 #VLA 主流方案全解析 旨在让智能体在物理世界中通过感知、决策和行动来实现目标，而视觉 - 语言 - 动作（VLA）模型作为其中的关键技术，近年来备受关注。VLA 模型能够…...

编程日记 2026/4/26 5:12:12

测试自动化落地方向

一、视觉回归自动化测试（低成本高回报） 痛点： UI 频繁迭代导致视觉问题难覆盖 方案： 引入Applitools或SikuliX做视觉比对（无需维护元素定位） 关键路径截图比对，自动检测 UI 错位/样式问题 亮点…...

编程日记 2026/4/2 3:56:45