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

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

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

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

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

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

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

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

效果展示

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

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

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

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

提供源码

http://www.lryc.cn/news/535076.html

相关文章:

  • 螺旋矩阵 II
  • 【愚公系列】《Python网络爬虫从入门到精通》001-初识网络爬虫
  • 【linux学习指南】模拟线程封装与智能指针shared_ptr
  • 10、Python面试题解析:解释reduce函数的工作原理
  • 【含开题报告+文档+PPT+源码】学术研究合作与科研项目管理应用的J2EE实施
  • MySQL主从复制过程,延迟高,解决应对策略
  • Deepseek模拟阿里面试——数据库
  • 大数据学习之SparkStreaming、PB级百战出行网约车项目一
  • Java 高频面试闯关秘籍
  • 边缘计算网关驱动智慧煤矿智能升级——实时预警、低延时决策与数字孪生护航矿山安全高效运营
  • Oracle认证大师(OCM)学习计划书
  • 力扣 单词拆分
  • 如何在Linux中设置定时任务(cron)
  • C# ASP.NET核心特性介绍
  • Response 和 Request 介绍
  • Spring常用注解和组件
  • Spring中都应用了哪些设计模式?
  • VSCode的安裝以及使用
  • Datawhale 组队学习 Ollama教程 task1
  • 前端技术学习——ES6核心基础
  • 《DeepSeek技术应用与赋能运营商办公提效案例实操落地课程》
  • STM32-知识
  • 线程同步(互斥锁与条件变量)
  • Ubuntu指令学习(个人记录、偶尔更新)
  • Visual Studio 进行单元测试【入门】
  • 【经验分享】Linux 系统安装后内核参数优化
  • linux统计文件夹下有多少个.rst文件行数小于4行
  • 使用开源项目xxl-cache构建多级缓存
  • LVDS接口总结--(5)IDELAY3仿真
  • Vue3(1)