Hello everyone, welcome to our PDF editing development kit ElasticPDF. The product is based on pdf.js and adds annotation features. It can edit the original annotations in PDF and export them as standard format annotations (professional version), and is specially designed and developed for the needs of company business and online collaborative multiple editing.

We have served many companies around the world since ElasticPDF launched. Now we not only have professional and mature products, but also professional and cutting-edge services.

0 Introduction and products

0.1 Introduction

ElasticPDF is based on the open source pdf.js, and adds a variety of out-of-the-box PDF annotation features. The code package continues the independent and completely offline structure style of pdf.js-dist, and only adds offline Javascript code to support annotations. It can be quickly and perfectly integrated into the any project that can run Javascript, HTML, CSS environment, and can run perfectly in the public network and intranet environment.

0.2 Products

According to different functional and budget requirements, there are currently two versions of the product to choose from. The professional version supports editing the original annotations in PDF and exporting them as standard annotations for other PDF editors to view and modify. The product Demos address are as follows:

① Annotation synthesis version: https://demos.libertynlp.com/#/pdfjs-annotation
② Professional annotation version: https://www.elasticpdf.com/demo

In addition, the professional version also supports functions such as up,down, top, bottom, insert blank pages, delete pages, and other page reorganization and page extraction functions. In the future, it will support more page operations and launch features to edit text, graphics and other content in pdf.

1 Annotation Features

1.1 Multiple practical annotation features

Based on the rendering results of pdf.js, we completely rewrote all the annotation logic to support multiple types of annotations such as highlight, underline, strikethrough, signature, illustration, text box, polygon, hyperlink, eraser, brush, etc. We have completed the technical reserves for building various annotation graphics, and will gradually support more types of annotations in the future.

1.2 Useful built-in reply selections

ElasticPDF also supports the complete Annotation and Reply feature, which allows users to add comment text to annotations, and then others can make 7 built-in replies to the annotations, including Accept, Reject, Cancel, Complete, None, Mark, Unmark, as well as enter custom replies.

1.3 Modify all properties of annotations

Users can modify the corresponding graphic properties such as color, position, rotation, scale after selecting the created annotations.

2 Online collaboration Functions and APIs

2.1 Easily intergrate and user control

From the practice of serving many customers, we have summarized and formed several of the most commonly used APIs in the company or OA process, including authority control, user settings, full and incremental import and export of annotations, standard replies to annotations, thumbnails and open full-process controllable source code, which can effectively reduce the time, technology and manpower investment required for plug-in access to the business.

Specifically, after getting the code package, developers can put it into the project folder and embed it for use without the need for tedious configuration environment, installation dependencies and other operations.

// simple initial funtion to set GUI language, model
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',              // GUI language
			'pdf_url': pdf_url,               // pdf url
			'display_annotation_list': true,  // show annotation list on right
			'read_only_model': false,         // read model, can't edit annotations
			'member_info': {                  // set member info
				'id': 'elasticpdf_id',
				'name': 'elasticpdf',
			},
			'show_reply_panel': true,         // show reply panel or not when clicking annotation on pages
			'report_time_interval': 500,      // event report interval time, using on scroll or other
		}
	}, '*');
}
Copy Code

2.2 Manage annotations separately

In terms of annotation management, ElasticPDF supports managing annotations separately from the original PDF. Specifically, annotations can be fully or incrementally exported and imported in JSON format, further reducing the amount of data.

In online collaboration or multi-person and multi-batch review scenarios, only one original PDF is needed, and the corresponding small-volume JSON annotation file can be maintained. In specific scenarios, by selecting the corresponding annotation file for different users and batches, you can continue editing and sending it back, saving storage, bandwidth costs and transmission time.

The JSON annotation data structure is shown below. It is intuitive and easy to understand. It contains information such as location, color, and created user, and is easy to perform further operations such as merging and filtering in the business.

{
	"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": ""
}
Copy Code

2.3 Write annotations to PDF

In addition to importing and exporting annotations independently, ElasticPDF also supports writing annotations into PDF. The professional version (source code open access) writes the annotations as standard PDF annotations, which can be opened and edited in other PDF editors.

Open the document exported by ElasticPDF in other editors to continue editing annotation colors, comments, replies, etc.

3 Integrating Services and Cases

Based on our experience in serving global customers, we have compiled many tutorials on how to intergrate our product to common front-end frameworks and published it on the official website as blogs, including HTML, Jquery, Vue, React, Angular, Uni-app, etc. Other frameworks can be deployed as long as they support HTML, Javascript and css. Please feel free to contact us to discuss your needs.

Summary

In general, ElasticPDF is very suitable for corporate business and application scenarios of multiple editing and online collaboration. We not only have mature products, but also have extensive technical reserves, covering all kinds of PDF processing needs.

What you get from us is not only simple and easy-to-use code, but more valuable is cutting-edge, professional technology and services. Welcome to contact us to learn more and choose us like users in many countries around the world.

Tips: This article was first published on https://www.elasticpdf.com ，Please indicate the source when republishing: https://www.elasticpdf.com/blog/pdf-annotation-library-designed-company-business-online-collaboration.html