基于 PDF.js 开发了 PDF 批注注释插件库,支持多种批注类型,支持写入批注到pdf中并保存,为目前纯前端 JavaScript 最佳实现方案,完美支持 老版浏览器、手机、平板 等移动端设备,仅使用 PDF.js dist 版本,可以方便集成到任意项目中。
(注:非免费,面向公司用户)
Demo地址
Demo地址在:https://demos.libertynlp.com
基于 pdf.js-dist 开发的批注注释插件库,可以方便集成到任意项目中。
功能演示视频:https://www.bilibili.com/video/BV1Le4y1c7Vy
功能模块
① 下载文件 : 把批注标记保存到pdf文件中
② 文本高亮 : 高亮滑选的文本
③ 文本下划线 : 给滑选的文本增加下划线
④ 文档截图: 截图PDF页面并保存为PNG图片
⑤ 注释列表 : 打开注释列表并编辑 (复制/删除/前往)
⑥ 选中对象 : 选中批注对象并修改 (位置/X轴缩放/Y轴缩放/旋转)
⑦ 选中对象 : 选中批注对象并修改 (颜色/角度/大小/位置/透明度)
⑧ 插入图片 : 插入本地图片如电子签名
⑨ 画笔工具 : 在当前页面使用画笔工具自由绘制
⑩ 文本框工具 : 给当前页面添加可输入文本框
⑪ 多边形工具: 增加并编辑 箭头/矩形/圆形
⑫ 编辑注释: 复制、删除和前往批注
⑬ 导出注释 : 导出完整结构Json标注,可保存到服务器并回显
⑭ 导入标注 : 导入完整结构标注回显
⑮ 下载标注 : 导出当前文件标注和评论为txt格式文档
⑯ 切换语言 : 切换提示语言至英文
⑰ 帮助文档 : 打开帮助文档
功能演示
1-自动高亮和下划线: 将选中文本高亮或者添加下划线,支持通过触屏来高亮/下划线文字,完美支持手机、平板等移动端设备。
2-插入图片: 插入图片,例如添加电子签名、公章等。
3-编辑对象: 选中批注可修改位置、X轴缩放、Y轴缩放和旋转。
4-添加文本框并编辑文字: 添加文本框,双击后可编辑文字,支持缩放变形后仍可编辑。
5-编辑对象属性: 选中批注可修改填充色、边框色、背景色、透明度和删除。
6-添加并编辑多边形: 添加并编辑箭头、矩形框、圆形等多种多边形。
7-画笔绘制并自动平滑: 激活画笔自由绘制并自动平滑路径。
8-屏幕截图: 添加截屏框,修改位置大小并编辑截屏批注,确认后截屏当前位置图像并保存为PNG图片。
9-打开及操作批注列表: 打开批注列表并操作批注,包括前往批注并闪烁、复制文本、增加评论和删除单个批注、清除页面批注、清除文档批注。
10-导出及导入批注: 导出批注为JSON格式,可被保存至数据库并重载至PDF文件;从JSON文件中导入批注并显示在PDF上。
11-切换提示语言: 切换操作按钮及提示的语言,目前支持中文和英文,支持拓展其他语言包。
12-批注写入并下载文档: 将所有批注写入PDF并下载文档。
总结
基于 pdf.js-dist 完成的PDF批注注释插件库,为目前最佳解决方案,可以在 Web端纯JavaScript 实现pdf的批注和导出
Demo和源码 https://demos.libertynlp.com 。