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

news2025/2/12 15:10:25

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

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

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

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

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

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

效果展示

     1、添加自由线: 2、添加文字标注(可以对文字标注进行拖动位置,放大缩小)

3、添加矩形和箭头(添加后可调整位置,大小)

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

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

提供源码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2296898.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

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

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

EF Core中实现值对象

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

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

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

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

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

11.swagger使用

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

java高级知识之集合

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

deepseek + kimi 高效生成PPT

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

好好说话:深度学习扫盲

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

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

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

Kubernetes控制平面组件:etcd(一)

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

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

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

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协议了,网上有不少资料都是叙述此协议的。 下面将是我本次设计的一些局部设计汇总,如果对读者有…

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

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

Datawhale 组队学习 Ollama教程 task1

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

大模型基本原理(二)——ChatGPT的工作原理

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

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

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

51c自动驾驶~合集50

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

论文阅读:MGMAE : Motion Guided Masking for Video Masked Autoencoding

MGMAE:Motion Guided Masking for Video Masked Autoencoding Abstract 掩蔽自编码(Masked Autoencoding)在自监督视频表示学习中展现了出色的表现。时间冗余导致了VideoMAE中高掩蔽比率和定制的掩蔽策略。本文旨在通过引入运动引导掩蔽策略&#xff0…

【嵌入式Linux应用开发基础】文件I/O基础编程

目录 一、文件I/O简介 二、文件描述符 2.1. 唯一性 2.2. 抽象性 2.3. 有限性 三、文件操作函数 四、标准文件I/O函数 五、文件执行权限 5.1. 权限类型 5.2. 权限分配对象 5.3. 权限表示方法 5.4. 权限设置命令 5.5. 权限设置的重要性 5.6. 实例说明 六、设备文件…

【JS】实现一个hexo插件并发布

hexo插件生成 在你的 hexo blog 目录,找到 node_modules. 新建一个文件夹。然后执行 npm init npm 会引导你生成 package.json 这是你的包的描述文件。需要注意的是,所有的 hexo 插件必须以 hexo - 开头,否则 hexo 不会加载。 如果hexo g中没…