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

3 功能展示

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

3.1 批注功能

① 文本高亮

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

② 下划线

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

③ 插入图片

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

④ 屏幕截图

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

⑤ 自由绘制

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

⑥ 添加文本

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

⑦ 多边形

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

⑧ 超链接

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

3.2 批注管理功能

① 橡皮擦

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

② 撤销 & 重做 批注

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

③ 导出 & 导入 JSON 批注

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

④ 批注连接线 & 双语

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

相关推荐
前端大卫26 分钟前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
却尘41 分钟前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
ccnocare42 分钟前
浅浅看一下设计模式
前端
Lee川1 小时前
🎬 从标签到屏幕:揭秘现代网页构建与适配之道
前端·面试
大明者省1 小时前
激活函数选型速查表(核心规则)
编辑器
Ticnix1 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人1 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl1 小时前
OpenClaw 深度技术解析
前端
崔庆才丨静觅1 小时前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人2 小时前
vue3使用jsx语法详解
前端·vue.js