当前位置: 首页 > Web前端 > HTML

【源码】PDF.js注解插件库(纯JS),创建和保存PDF注释(PDF高亮-签名-插图-截图-文本框-画笔-多边形)

时间:2023-03-28 19:40:17 HTML

基于PDF.js开发的PDF注释插件库支持多种注释类型,支持写注释到pdf和省去了它们,是目前纯前端JavaScript最好的实现方案。完美支持老式浏览器、手机、平板等移动设备,只使用PDF.jsdist版本,可以轻松集成到任何项目中。Demo和源码Demo和源码在:https://demos.libertynlp.com基于pdf.js-dist开发的Annotation标注插件库,可以方便的集成到任何项目中。功能演示视频:https://www.bilibili.com/video...功能模块①下载文件:将评论标记保存为pdf文件②文字高亮:高亮滑动的文字③文字下划线:给滑动添加给文字加下划线④文档截图:PDF页面截图并保存为PNG图片⑤评论列表:打开评论列表并编辑(复制/删除/转到)⑥选中的对象:选择评论对象并修改(位置/X轴缩放/Y轴缩放/旋转)⑦SelectedObject:选中标注对象并修改(颜色/角度/大小/位置/透明度)⑧InsertImage:插入电子签名等本地图片⑨画笔工具:使用画笔工具在当前页面自由绘制⑩文本框工具:在当前页面添加输入文本框?多边形工具:添加和编辑箭头/矩形/圆形?编辑注释:复制、删除和转到注释?导出annotations:导出完整的结构体Json注解,可以保存到服务器,echoed?导入注释:导入完整的结构注释echo?下载注释:将当前文件注释和注释导出为txt格式文档?切换语言:将提示语言切换为英文?帮助文档:打开帮助文档功能demo1-自动高亮和下划线:会对选中的文字进行高亮或下划线,支持通过触摸屏对文本进行高亮/下划线,完美支持手机、平板等移动设备。2-插入图片:插入图片,如添加电子签名、公章等。3-编辑对象:勾选注释修改位置、X轴缩放、Y轴缩放和旋转。4-添加文本框和编辑文本:添加文本框,双击编辑文本,支持缩放变形后编辑。5-编辑对象属性:选中注释修改填充色、边框色、背景色、透明度和删除。6-添加和编辑多边形:添加和编辑箭头、矩形、圆形和其他多边形。7-BrushDraw&AutoSmooth:激活画笔以自由绘制并自动平滑路径。8-截图:添加截图框,修改位置大小和编辑截图注释,确认后对当前位置图片进行截图并保存为PNG图片。9-打开和操作注释列表:打开注释列表和操作注释,包括转到注释和flash、复制文本、添加注释和删除单个注释、清除页面注释、清除文档注释。10-导出导入注解:导出JSON格式的注解,可保存到数据库,重新加载为PDF文件;从JSON文件导入注释并将其显示在PDF上。11-切换提示语言:切换操作按钮和提示的语言。目前支持中文和英文,也支持其他语言包。12-写注释和下载文档:将所有注释写成PDF并下载文档。总结基于pdf.js-dist的PDF标注插件库是目前最好的解决方案。可以在网页上以纯JavaScript实现pdf注释和导出。Demo和源代码在https://demos.libertynlp.com等你访问。欢迎继续关注,会持续更新pdf.js开发教程。任何pdf.js自定义开发需求,请随时通过电子邮件与我联系:weichaoxu1998@gmail.com。