PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js

基于 PDF.js 开发了 PDF 批注注释插件库,支持多种批注类型,支持写入批注到pdf中并保存,为目前纯前端 JavaScript 最佳实现方案,完美支持 老版浏览器、手机、平板 等移动端设备,仅使用 PDF.js dist 版本,可以方便集成到任意项目中。
(注:非免费,面向公司用户)

Demo地址

Demo地址在:https://demos.libertynlp.com
基于 pdf.js-dist 开发的批注注释插件库,可以方便集成到任意项目中。

功能演示视频:https://www.bilibili.com/video/BV1Le4y1c7Vy

中文封面.JPG

功能模块

① 下载文件 : 把批注标记保存到pdf文件中
② 文本高亮 : 高亮滑选的文本
③ 文本下划线 : 给滑选的文本增加下划线
④ 文档截图: 截图PDF页面并保存为PNG图片
⑤ 注释列表 : 打开注释列表并编辑 (复制/删除/前往)
⑥ 选中对象 : 选中批注对象并修改 (位置/X轴缩放/Y轴缩放/旋转)
⑦ 选中对象 : 选中批注对象并修改 (颜色/角度/大小/位置/透明度)
⑧ 插入图片 : 插入本地图片如电子签名
⑨ 画笔工具 : 在当前页面使用画笔工具自由绘制
⑩ 文本框工具 : 给当前页面添加可输入文本框
⑪ 多边形工具: 增加并编辑 箭头/矩形/圆形
⑫ 编辑注释: 复制、删除和前往批注
⑬ 导出注释 : 导出完整结构Json标注,可保存到服务器并回显
⑭ 导入标注 : 导入完整结构标注回显
⑮ 下载标注 : 导出当前文件标注和评论为txt格式文档
⑯ 切换语言 : 切换提示语言至英文
⑰ 帮助文档 : 打开帮助文档

功能演示

1-自动高亮和下划线: 将选中文本高亮或者添加下划线,支持通过触屏来高亮/下划线文字,完美支持手机、平板等移动端设备。

1-自动高亮和下划线.gif

2-插入图片: 插入图片,例如添加电子签名、公章等。

2-插入图片.gif

3-编辑对象: 选中批注可修改位置、X轴缩放、Y轴缩放和旋转。

3-编辑对象.gif

4-添加文本框并编辑文字: 添加文本框,双击后可编辑文字,支持缩放变形后仍可编辑。

4-添加文本框并编辑文字.gif

5-编辑对象属性: 选中批注可修改填充色、边框色、背景色、透明度和删除。

5-编辑对象属性.gif

6-添加并编辑多边形: 添加并编辑箭头、矩形框、圆形等多种多边形。

6-添加并编辑多边形.gif

7-画笔绘制并自动平滑: 激活画笔自由绘制并自动平滑路径。

7-画笔绘制和自动平滑.gif

8-屏幕截图: 添加截屏框,修改位置大小并编辑截屏批注,确认后截屏当前位置图像并保存为PNG图片。

8-屏幕截图.gif

9-打开及操作批注列表: 打开批注列表并操作批注,包括前往批注并闪烁、复制文本、增加评论和删除单个批注、清除页面批注、清除文档批注。

9-打开及操作批注列表.gif

10-导出及导入批注: 导出批注为JSON格式,可被保存至数据库并重载至PDF文件;从JSON文件中导入批注并显示在PDF上。

10-导出及导入批注.gif

11-切换提示语言: 切换操作按钮及提示的语言,目前支持中文和英文,支持拓展其他语言包。

11-切换提示语言.gif

12-批注写入并下载文档: 将所有批注写入PDF并下载文档。

12-批注写入并下载文档.gif

总结

基于 pdf.js-dist 完成的PDF批注注释插件库,为目前最佳解决方案,可以在 Web端纯JavaScript 实现pdf的批注和导出
Demo和源码 https://demos.libertynlp.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容