ElasticPDF-专为公司业务及在线协同设计和开发的 PDF 批注插件代码源码库(基于pdf.js纯离线JavaSript)

pdf 批注插件库源代码 公司业务专用 在线协同多人编辑

大家好,欢迎关注我们的PDF编辑开发包 ElasticPDF,产品基于 pdf.js 增加了批注功能,可编辑PDF中的原有批注并导出为标准格式批注(专业版),并且专为公司业务和在线协同多次编辑的需求做了特殊的设计和开发。产品上线以来已经服务了全球各地多家公司,现在我们不仅有专业成熟的产品,更有专业、前沿的服务。

封面.png

0 ElasticPDF 介绍及产品

0.1 总体介绍

ElasticPDF 基于开源 pdf.js,增加了多种开箱即用的 PDF 批注功能。代码包延续了 pdf.js-dist 独立且完全离线的结构风格,仅增加了用于支持批注的离线 Javascript 代码,可以快速完美集成到任何可以运行 Javascript, HTML, CSS 的项目环境中,在公网及内网环境都可以完美的运行。

项目结构-中文.pngß

0.2 产品信息

根据不同的功能及预算需求,目前有两个版本的产品可供选择,其中专业版支持编辑PDF中的原有批注并且导出为标准批注供其他PDF编辑器查看和修改,产品 Demo 地址如下:

① 批注合成版: https://demos.libertynlp.com/#/pdfjs-annotation
② 专业批注版: https://www.elasticpdf.com/demo

另外专业版还支持 上移、下移、置顶、置底、插入空页、删除页面页面顺序调整及提取页面等功能,后续将支持更多页面操作并上线文字、图形等内容编辑功能

页面编辑.png

1 批注功能介绍

1.1 多种实用批注

基于 pdf.js 的渲染结果,我们完全重写所有的批注逻辑,支持高亮、下划线、删除线,签名、插图,文本框,多边形,超链接,橡皮擦,画笔等多种类型的批注,且已经完成各种批注图形构建的技术储备,后续将逐步支持更多类型的批注。

批注功能.png

1.2 多种内置回复

ElasticPDF 同样支持完整的批注注释和回复功能,可以对批注添加注释文本,然后其他用户可以对批注做出接受、拒绝、取消、完成、无、标记、不标记等 7 种内置回复以及输入自定义回复。

批注回复.png

1.3 批注全属性修改

选中创建的批注后可以修改对应的颜色、位置、旋转、缩放等图形属性。

批注位置形状及属性修改.png

2 批注管理及在线协同功能

2.1 轻松接入及管理用户

从对多家客户服务的实践中,我们总结并且形成了公司或OA流程中最常用的多个API,包括权限控制、用户设置、批注的全量及增量导入导出、批注的标准回复、缩略图以及开放的全流程可掌控的源码,可以有效降低插件接入业务所需的时间和技术、人力投入。

具体来说,拿到代码包后放入项目文件夹即可嵌入使用,无需繁琐的配置环境、安装依赖等操作。

在线协同功能.png

// 简单初始化函数,可以快捷设置语言、模式等
function initialPDFEditor() {
	var elasticpdf_viewer = document.getElementById('elasticpdf-iframe').contentWindow;
	var pdf_url = 'tutorial.pdf';
	elasticpdf_viewer.postMessage({
		"source": "test-elasticpdf",
		"function_name": "initialApp",
		"content": {
			'language': 'zh-cn',              // 交互语言
			'pdf_url': pdf_url,               // pdf链接
			'display_annotation_list': true,  // 默认展示批注列表
			'read_only_model': false,         // 只读模式,无法编辑批注
			'member_info': {                  // 用户信息
				'id': 'elasticpdf_id',
				'name': 'elasticpdf',
			},
			'show_reply_panel': true,         // 点击页面批注是否弹出批注编辑面板
			'report_time_interval': 500,      // 事件回报时间间隔,单位毫秒,用在滚动,批注数值修改上
		}
	}, '*');
}

2.2 独立管理批注

在批注管理方面,ElasticPDF 支持将批注与原 PDF 分别管理,具体来说,可以以 JSON 格式全量或增量导出导入批注,让数据量进一步减小。在云端协同或多人多批次审核场景中,都只需要一个原始 PDF,转而维护对应的小体积 JSON 批注文件即可,具体场景中通过为不同的用户和批次选择对应的批注文件回显即可继续编辑和回传,节省存储、带宽费用以及传输时间。

JSON批注数据结构如下所示,具备直观易懂的特点,包含位置、颜色、创建用户等信息,易于在业务中做合并、筛选等进一步的操作。

{
	"type": "rect",
	"left": 225.7,
	"top": 234,
	"width": 242,
	"height": 116,
	"fill": "rgba(255,237,0,0.3)",
	"stroke": "rgba(17,153,158,1)",
	"strokeWidth": 1,
	"scaleX": 1,
	"scaleY": 1,
	"angle": 0,
	"opacity": 1,
	"visible": true,
	"backgroundColor": "",
	"erasable": true,
	"id": "1749049687394_1",
	"member_id": "elasticpdf_id",
	"member_name": "elasticpdf",
	"my_type": "rectangle",
	"comment": "",
	"relative_position": [
		0.3156577797202797,
		0.2314540059347181,
		0.33986013986013985,
		0.11572700296735905,
		0.3156577797202797,
		0.2314540059347181,
		0.3384615384615385,
		0.11473788328387735,
		0.0013986013986013986
	],
	"backup_opacity": 1,
	"page_width": 715,
	"page_height": 1011,
	"page_number": 1,
	"anno_img": ""
}

2.3 导出标注至PDF

除了将批注独立导入导出,ElasticPDF 同样支持将批注写入 PDF 中,其中专业版(源码开放获取)写入结果为标准 PDF 批注,可在其他 PDF 编辑器打开并且继续编辑

elasticpdf创建批注.png

在其他编辑器中打开 ElasticPDF 导出的文档,可以继续编辑批注颜色、评论和回复等。

其他编辑器继续编辑.png

3 接入服务及案例

从以往服务全球客户的经验中,我们整理出了常用前端框架的接入教程并且以博客的形式发布在了产品官网,包括 HTML,Jquery,Vue,React,Angular,Uni-app 等,其他更多框架只要支持HTML,Javascript 和 css 即可部署,欢迎与我们联系沟通需求。

博客教程.png

总结

总的来说,ElasticPDF 非常适合公司业务以及多次编辑、在线协同的应用场景,我们不仅有成熟的产品,更有广阔的技术储备,涵盖各类pdf处理的需求,从我们这里获取的将不只是简单易用的代码,更有价值的是前沿、专业的技术和服务,欢迎联系我们了解更多并与全球多个国家的用户一样选择我们。

客户地图.png

温馨提示:本文首发于 https://www.elasticpdf.com ,转载请注明出处:https://www.elasticpdf.com/blog/pdf-annotation-library-designed-company-business-online-collaboration-zh.html

留言
邮箱*
内容*
验证码*
logo

Welcome to contact us

elasticpdf@gmail.com

目录 Content

0 ElasticPDF 介绍及产品

0.1 总体介绍

0.2 产品信息

1 批注功能介绍

1.1 多种实用批注

1.2 多种内置回复

1.3 批注全属性修改

2 批注管理及在线协同功能

2.1 轻松接入及管理用户

2.2 独立管理批注

2.3 导出标注至PDF

3 接入服务及案例

总结

媒体 Media

封面.png

项目结构-中文.png

页面编辑.png

批注功能.png

批注回复.png

批注位置形状及属性修改.png

在线协同功能.png

elasticpdf创建批注.png

其他编辑器继续编辑.png

博客教程.png

客户地图.png

// 统计访问量