ElasticPDF-新国产 PDF 编辑器开发框架(基于 pdf.js Web PDF批注开发,实现高亮/多边形/橡皮擦/历史记录/保存注释文字)

摘要: ElasticPDF 是一款新国产 PDF 编辑器开发框架,基于开源 pdf.js 的渲染框架,增加了批注功能,支持全离线运行,适用于公网及内网系统。代码包结构延续了 pdf.js-dist 简洁的风格,兼容所有主流浏览器,不仅可以部署于 Web 项目,也可以嵌入任意桌面端和移动端项目中。

关键词: Web PDF编辑器,pdf.js,PDF批注,内网可用,任意项目可用

1 技术优势

ElasticPDF 延续了 pdf.js-dist 的架构风格,全部使用朴素 Javascript 代码开发,简单来说 是在 pdf.js-dist 代码包中增加了几个 js 文件,无需任何在线依赖即可运行, 因而非常适合作为功能模块整合到其他项目中。

不仅可以部署于公网环境应用,独立、简洁的特点也让其拥有完全透明和可控的安全性,因而被选择部署于众多内网系统中。

经过多年的研发,即使是只依赖 HTML,CSS 和 Javascript 运行的产品,批注等功能的产品力也已接近世界一流的PDF编辑器(比如 Adobe Acrobat),具体为批注可以以标准格式写入pdf中,包括注释的任意语言的文字,之后可以再在其他编辑器中编辑。

另外还可以将 批注独立导出为 JSON 格式,便于入库和重载回显,在云端协同的系统中非常便利和经济,因为只需要一个在线原文档和保存数量级通常不到 1M 的批注文件,而不再需要把批注合并到文档中一起保存到后端数据库,可以节省很多流量、宽带和储存费用。

2 在线 Demo 地址

针对于不同项目的开发需求,目前有两个版本的产品可供选择(非免费) ,两者在授权方式和最终批注写入 PDF 的技术效果上有区别,具体以在线 Demo 网站的说明和运行效果为准。

① 批注合成版:https://demos.libertynlp.com/#/pdfjs-annotation

② 标准批注版:https://www.elasticpdf.com/demo

功能概览.png

3 功能展示

除以下功能外,其他功能也在持续开发中,另外几乎所有功能都可以定制开发。

3.1 批注功能

① 文本高亮

无论是桌面端、平板端或者手机都可以精确选择文本,支持跨页高亮,高亮后内容可以修改颜色等属性。


1-highlight.gif

② 下划线

与高亮功能类似,实现了多种设备文本的精确选择,批注生成后可以修改批注颜色、线条粗细等

2-underline.gif

③ 插入图片

支持以选取文件或者拖入的方式来插入图片,之后可以对图片的大小、位置、方位、不透明度等实现流畅的修改

3-insert image.gif

④ 屏幕截图

绘制矩形框后可截取当前文档的部分内容,并可以修改矩形框位置后再次截图

4-screen shot.gif

⑤ 自由绘制

可以随意调整笔刷的大小、颜色和不透明度,然后在文档上自由的绘制,在设置不透明度较小时还可以用来高亮扫描件文本


5-brush.gif

⑥ 添加文本

可以以插入和拖入的方式来创建文本批注,支持所有语言,创建后可以拖动的方式修改字体形状、字体大小等

6-add text.gif

⑦ 多边形

支持创建箭头、直线、矩形、圆形(椭圆)、对勾和身份印章等多边形,生成后的批注支持颜色、大小、位置方位等的修改

7-polygon.gif

⑧ 超链接

通过绘制矩形框或者选取文字后创建超链接对象,之后可以链接到 URL、页码、在线文档等

8-hyperlink.gif

3.2 批注管理功能

① 橡皮擦

超强橡皮擦功能,可以局部擦除批注对象,擦除过程中轨迹可见,且擦除后的文本仍然可编辑


9-eraser.gif

② 撤销 & 重做 批注

撤销或者重做批注,包括批注的生成、修改等各类编辑以及删除等操作


10-undo redo.gif

③ 导出 & 导入 JSON 批注

支持将批注文档导出为 JSON 文件,之后再次加载 JSON 文件实现完美的回显,是多端同步的最佳方案


11-output import annotation.gif

④ 批注连接线 & 双语

将右侧列表中的批注与页面的图形对象相连,每一页都单独控制;所有页面操作都支持中英文双语


12-multilanguage connecting line.gif
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容