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

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

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

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

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

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

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

效果展示

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

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

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

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

提供源码

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Visual Studio Code中文出现黄色框子的解决办法

Visual Studio Code中文出现黄色框子的解决办法 一、vsCode中文出现黄色框子-如图二、解决办法 一、vsCode中文出现黄色框子-如图 二、解决办法 点击 “文件”点击 “首选项”点击 “设置” 搜索框直接搜索unicode选择“文本编辑器”,往下滑动,找到“Un…

二分算法篇:二分答案法的巧妙应用

二分算法篇:二分答案法的巧妙应用 那么看到二分这两个字想必我们一定非常熟悉,那么在大学期间的c语言的教学中会专门讲解二分查找,那么我们来简单回顾一下二分查找算法,我们知道二分查找是在一个有序的序列中寻找一个数在这个序列…

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

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

怎么在win10系统批量生成下面目录示例文件?

环境: win10系统 问题描述: 怎么在win10系统批量生成下面目录示例文件,刚好有个开源项目要新建 GitHub地址:https://github.com/latiaoge/AI-Sphere-Butler ai-sphere-butler/ # 项目根目录 ├── docs/ …

Java在大数据处理中的应用:从MapReduce到Spark

Java在大数据处理中的应用:从MapReduce到Spark 大数据时代的到来让数据的存储、处理和分析变得前所未有的重要。随着数据量的剧增,传统的单机计算方式已经无法满足处理需求。为了解决这个问题,许多分布式计算框架应运而生,其中Ma…

Pdf手册阅读(1)--数字签名篇

原文阅读摘要 PDF支持的数字签名, 不仅仅是公私钥签名,还可以是指纹、手写、虹膜等生物识别签名。PDF签名的计算方式,可以基于字节范围进行计算,也可以基于Pdf 对象(pdf object)进行计算。 PDF文件可能包…

运放放大器

1 运放是什么 1.1 运算放大器,常用于做信号处理。如:信号放大、滤波、积分、微分、整流、甚至可以用来做电路主控等等。其功能非常强大 1.2 运放的重要特性 虚短 (前提是要有负反馈) 1.2.1 虚短的概念是指运放在正常工作过程中&#xff0c…

UE求职Demo开发日志#28 初期几个流程的实现

1 第一小节流程梳理 进入游戏--> 弹出几个文本框介绍背景--> 接取任务收集资源-> 打怪获得源能结晶--> 场景里获得一些金属碎片--> 用源能和金属修复合成台--> 完成第一个任务--> 接第二个任务,打带精英怪的一波(小怪1换颜…

【Docker】从瀑布开发到敏捷开发

引言 软件开发方法论是指导团队如何规划、执行和管理软件项目的框架。随着软件行业的不断发展,开发方法论也在不断演进。从传统的瀑布开发到现代的敏捷开发,软件开发方法论经历了深刻的变革。本文将详细探讨瀑布开发和敏捷开发的定义、特点、优缺点以及…

Docker安装常用软件说明

1.总体步骤 2.安装tomcat docker run -d -p 8080:8080 --name tomcat1 tomcat:11.0.8 访问tomcat猫首页 出现404 这是正常情况 Docker 默认采用的是 NAT 网络模式,所以会自动创建 IPtable 规则并自动开放端口,所以无需考虑防火墙问题 新版Tomcat已经…

Node.js笔记入门篇

黑马程序员视频地址: Node.js与Webpack-01.Node.js入门 基本认识 概念 定义:Node.js 是一个免费、开源、跨平台的 JavaScript 运行时环境, 它让开发人员能够创建服务器 Web 应用、命令行工具和脚本 作用:使用Node.js 编写服务器端程序 ✓ …

以简单的方式过一生

这本书大体讲述了三方面的内容:工作、生活、人际交往。我目前工作方面的认知需求比较大,就把工作部分的内容看了一下,其他两个方面就略看了,在这里就不展开了。 一、成为结果导向的人: 如何让自己在职场上成为明确结果…

软件工程教育的革命:AI辅助学习与实践

软件工程教育正面临着巨大的挑战。传统的教学模式往往以理论讲解为主,实践机会不足,导致学生难以将理论知识转化为实际技能。此外,繁琐的代码编写和项目搭建过程也常常耗费学生大量时间和精力,影响学习效率。为了解决这些问题&…

访问Elasticsearch服务 curl ip 端口可以 浏览器不可以

LINUX学习 在虚拟机上面的linux上面用docker 部署Elasticsearch项目后,在linux系统内部用curl ip 端口地址的形式可以访问到Elasticsearch。可以返回数据。 但是在本机的浏览器中输入ip 端口,会报错,找不到服务。 ping 和 trelnet均不通。 …

C++引用深度详解

C引用深度详解 前言1. 引用的本质与核心特性1.1 引用概念1.2 核心特性 2. 常引用与权限控制2.1 权限传递规则2.2 常量引用2.3 临时变量保护1. 样例2. 样例3. 测试 三、引用使用场景分析3.1 函数参数传递输出型参数避免多级指针高效传参 3.2 做函数返回值正确使用危险案例 4. 性…

网易易盾接入DeepSeek,数字内容安全“智”理能力全面升级

今年农历新年期间,全球AI领域再度掀起了一波革命性浪潮,国产通用大模型DeepSeek凭借其强大的多场景理解与内容生成能力迅速“出圈”,彻底改写全球人工智能产业的格局。 作为国内领先的数字内容风控服务商,网易易盾一直致力于探索…

【含开题报告+文档+PPT+源码】基于SpringBoot+Vue旅游管理网站

开题报告 本论文探讨了一款采用现代Web开发技术构建的台州市旅游综合信息与服务平台的设计与实现。该系统基于SpringBoot框架,以其轻量级、快速开发和强大的企业级应用支持能力为核心后端技术支撑,结合Vue.js前端框架及ElementUI组件库,为用…

python-leetcode-寻找峰值

162. 寻找峰值 - 力扣&#xff08;LeetCode&#xff09; class Solution:def findPeakElement(self, nums: List[int]) -> int:left, right 0, len(nums) - 1while left < right:mid left (right - left) // 2if nums[mid] < nums[mid 1]:left mid 1else:right …

2.11学习记录

web——CTFHub XSS学习 学习资料&#xff1a;xss&#xff08;跨站攻击&#xff09; 原理 1.黑客发送带有xss恶意脚本的链接给用户 2.用户点击了恶意链接&#xff0c;访问了目标服务器&#xff08;正常的服务器&#xff09; 3.目标服务器&#xff08;正常的服务器&#xff09…

macOS 上部署 RAGFlow

在 macOS 上从源码部署 RAGFlow-0.14.1&#xff1a;详细指南 一、引言 RAGFlow 作为一款强大的工具&#xff0c;在人工智能领域应用广泛。本文将详细介绍如何在 macOS 系统上从源码部署 RAGFlow 0.14.1 版本&#xff0c;无论是开发人员进行项目实践&#xff0c;还是技术爱好者…