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

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

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

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

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

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

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

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

效果展示

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

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

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

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

提供源码

相关文章:

  • D365(Dynamics 365 CE/PO)审计记录(Audit)一点点分析
  • linux下c++连接mysql
  • 数据结构:哈夫曼树
  • 【SpringBoot实现全局API限频】 最佳实践
  • Ceph集群搭建2025(squid版)
  • 【机器学习】线性回归与一元线性回归
  • Oracle日常管理(8)——DB日常管理(1)
  • Python(二十)实现各大跨境船公司物流查询新增[ARKAS Line]船司
  • YOLOv11-ultralytics-8.3.67部分代码阅读笔记-plotting.py
  • 【ESP32接入国产大模型之Deepseek】
  • 2.5 模块化迁移策略:从传统项目到模块化系统
  • 算法——结合实例了解启发式搜索
  • 网络安全的现状如何?
  • LabVIEW 中dde.llbDDE 通信功能
  • linux中top命令详解
  • linux 释放9090端口
  • 多模态识别和自然语言处理有什么区别
  • 100N10-ASEMI小家电专用MOS管100N10
  • 51单片机俄罗斯方块开机动画
  • TypeScript装饰器 ------- 学习笔记分享
  • 基于html5的旅游网站的设计/网站模板之家
  • wordpress 上传网站/seo月薪
  • 万户网络网站顾问/网络市场营销
  • 做网站后端用户用什么写/seo按照搜索引擎的
  • 嘉兴网络项目建站公司/爱站网关键词密度
  • 做网站要多少的服务器/余姚网站seo运营