前端实现在PDF上添加标注(1)
前段时间接到一个需求，用户希望网页上预览PDF，同时能在PDF上添加文字，划线，箭头和用矩形框选的标注，另外还需要对已有的标注进行修改，删除。
期初在互联网上一通搜索，对这个需求来讲发现了两个问题。
第一：有些同行给的方案不符合预期。大多数是在PDF的上面加一层透明层，然后再在这个透明层上面添加文字。这样做批注不能随PDF滚动或放大缩小而跟随，回显也是一个麻烦事，可以说没办法回显。
第二：有些很强，功能很全面的给PDF添加批注的插件，完全符合需求，但是需要支付几百上千的费用。
因此只能硬着头皮开发了。
主要用 pdfjs + pdfjs-dist + jspdf + fabric实现，最终完美完成用户需求
效果展示：
1、添加自由线：
2、添加文字标注（可以对文字标注进行拖动位置，放大缩小）
3、添加矩形和箭头（添加后可调整位置，大小）
4、删除已经添加过的批注，以及将添加批注的PDF导出，带批注的PDF。
另外还能有很多其他的批注都能实现，比如添加图片，修改颜色，修改画笔粗细等等。
提供源码
相关文章：
前端实现在PDF上添加标注(1)
前段时间接到一个需求，用户希望网页上预览PDF，同时能在PDF上添加文字，划线，箭头和用矩形框选的标注，另外还需要对已有的标注进行修改，删除。 期初在互联网上一通搜索，对这个需求来讲发现了两个问…...
螺旋矩阵 II
螺旋矩阵 II 一、题目描述 给定一个正整数 n，请你生成一个包含 1 到 n^2 所有元素的 n x n 正方形矩阵，元素顺序按顺时针的方式进行螺旋排列。 示例 1：输入：n 3 输出：[[1,2,3],[8,9,4],[7,6,5]]示例 2：…...
【愚公系列】《Python网络爬虫从入门到精通》001-初识网络爬虫
标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主&…...
【linux学习指南】模拟线程封装与智能指针shared_ptr
文章目录 📝线程封装🌉 Thread.hpp🌉 Makefile 🌠线程封装第一版🌉 Makefile:🌉Main.cc🌉 Thread.hpp: 🌠线程封装第二版🌉 Thread.hpp:🌉 Main.cc …...
10、Python面试题解析：解释reduce函数的工作原理
reduce 是 Python 中的一个高阶函数，位于 functools 模块中。它的作用是将一个可迭代对象（如列表、元组等）中的元素依次通过一个二元函数（即接受两个参数的函数）进行累积计算，最终返回一个单一的结果。 1.…...
【含开题报告+文档+PPT+源码】学术研究合作与科研项目管理应用的J2EE实施
开题报告 本研究构建了一套集注册登录、信息获取与科研项目管理于一体的综合型学术研究合作平台。系统用户通过注册登录后，能够便捷地接收到最新的系统公告和科研动态新闻，并能进一步点击查看详尽的新闻内容。在科研项目管理方面，系统提供强…...
MySQL主从复制过程，延迟高，解决应对策略
MySQL主从复制延迟高是常见的性能问题，通常由主库写入压力大、从库处理能力不足或配置不当导致。以下从原因定位、优化策略和高级解决方案三个维度提供系统性解决方法： 一、快速定位延迟原因 1. 查看主从同步状态 SHOW SLAVE STATUS\G关键字段…...
Deepseek模拟阿里面试——数据库
在模拟阿里面试时，数据库部分需要涵盖广泛的知识点，包括基础概念、事务管理、索引优化、数据库设计、高并发处理、分布式数据库等。以下是对这些问题的详细分析和解答： 事务的ACID特性是什么，如何保证？ ACID特性&…...
大数据学习之SparkStreaming、PB级百战出行网约车项目一
一.SparkStreaming 163.SparkStreaming概述 Spark Streaming is an extension of the core Spark API that enables scalable, high-throughput, fault-tolerant stream processing of live data streams. Spark Streaming 是核心 Spark API 的扩展，支持实时数据…...
Java 高频面试闯关秘籍
目录 Java基础篇：涵盖OOP、多线程、集合等基础知识。Java高级篇：深入探讨HashMap、JVM、线程池等高级特性。Java框架篇：介绍Spring、SpringMVC、MyBatis等常用框架。Mysql数据库篇：包含SQL语句、事务、索引等数据库知识。分布式技…...
边缘计算网关驱动智慧煤矿智能升级——实时预警、低延时决策与数字孪生护航矿山安全高效运营
迈向智能化煤矿管理新时代 工业物联网和边缘计算技术的迅猛发展，煤矿安全生产与高效运营正迎来全新变革。传统煤矿监控模式由于现场环境复杂、数据采集和传输延时较高，已难以满足当下高标准的安全管理要求。为此，借助边缘计算网关的实时数据…...
Oracle认证大师（OCM）学习计划书
Oracle认证大师（OCM）学习计划书 一、学习目标 Oracle Certified Master（OCM）是Oracle官方认证体系中的最高级别认证，要求考生具备扎实的数据库管理技能、丰富的实战经验以及解决复杂问题的能力。本计划旨在通过系统化的…...
力扣 单词拆分
动态规划，字符串截取，可重复用，集合类。 题目 单词可以重复使用，一个单词可用多次，应该是比较灵活的组合形式了，可以想到用dp，遍历完单词后的状态的返回值。而这里的wordDict给出的是list&…...
如何在Linux中设置定时任务（cron）
在Linux系统中，定时任务是自动执行任务的一种非常方便的方式，常常用于定期备份数据、更新系统或清理日志文件等操作。cron是Linux下最常用的定时任务管理工具，它允许用户根据设定的时间间隔自动执行脚本和命令。在本文中，我们将详…...
C# ASP.NET核心特性介绍
.NET学习资料 .NET学习资料 .NET学习资料 在当今的软件开发领域中，C# ASP.NET凭借其强大的功能和丰富的特性，成为构建 Web 应用程序的重要技术之一。以下将详细介绍 C# ASP.NET的核心特性。 多语言支持 ASP.NET 支持多种语言进行开发，这使…...
Response 和 Request 介绍
怀旧网个人博客网站地址：怀旧网，博客详情：Response 和 Request 介绍 1、HttpServletResponse 1、简单分类 2、文件下载 通过Response下载文件数据 放一个文件到resources目录 编写下载文件Servlet文件 public class FileDownServlet exten…...
Spring常用注解和组件
引言 了解Spring常用注解的使用方式可以帮助我们更快速理解这个框架和其中的深度 注解 Configuration：表示该类是一个配置类，用于定义 Spring Bean。 EnableAutoConfiguration：启用 Spring Boot 的自动配置功能，让 Spring Boo…...
Spring中都应用了哪些设计模式？
好的！以下是您提到的八种设计模式在 Spring 中的简单示例： 1. 简单工厂模式 简单工厂模式通过传入参数来决定实例化哪个类。Spring 中的 BeanFactory 就是简单工厂模式的应用。 示例代码： // 1. 创建接口和具体实现类 public interface A…...
VSCode的安裝以及使用
c配置: 【MinGw-w64编译器套件】 https://blog.csdn.net/weixin_60915103/article/details/131617196?fromshareblogdetail&sharetypeblogdetail&sharerId131617196&sharereferPC&sharesourcem0_51662391&sharefromfrom_link Python配置: 【簡單ÿ…...
Datawhale 组队学习 Ollama教程 task1
一、Ollama 简介 比喻：Ollama 就像是一个“魔法箱子”，里面装满了各种大型语言模型（LLM）。你不需要懂复杂的魔法咒语（配置），只需要轻轻一按（一条命令），就能让…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...
R语言AI模型部署方案：精准离线运行详解
R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
前端开发者常用网站
Can I use网站：一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use：Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站：MDN JavaScript权威网站：JavaScript | MDN...