PDF.js annotation library in pure JavaScript. Create and save PDF annotation, (pdf highlight/underline/signature/screenshot/textbox/draw/polygon)- pdf.js

1-Demo and Source code


Demo and source code: https://demos.libertynlp.com
the best solution of pdf.js annotation, only use pdf.js-dist, support old browser, smart phone and mobile device, very easy to import into your project.
Image description


2-Function


① download : save pdf with annotations mark
② highlight : highlight selected text;
③ underline : underline selected text;
④ screenshot: screenshot pdf save as png;
⑤ polygon: add textbox/arrow/rectangle/circle;
⑥ free draw: free draw and auto smooth;
⑦ image: insert image (forexample signature);
⑧ edit: edit annotation ( copy/delete/add comment/navigate );
⑨ output annotations : output annotations for importing;
⑩ import annotations : import annotations for current file;
⑪ download txt : download annotations and comments text;
⑫ clear: clear one/page/file annotation;
⑬ undo annotations : undo annotations in current page;
⑭ help : open help file;


3-Demonstrate Video


Youtube tutorial video：https://youtu.be/ea_0N89-pm8



4-Demonstrate GIF


① Highlight And Underline： Highlight or underline selection text, support touching, perfectly support old browser, smart phone and mobile device.

② Insert Image： Insert image, for example, signature.


③ Modify Annotation： select annotation to modify position, scaleX, scaleY and rotation。


④ Add Text And Edit： Add textbox, double click to edit the text.


⑤ Modify Property： Select annotation to modify FillColor, BorderColor, BackgroundColor, Opacity and Delete.


⑥ Add And Modify Polygon： Add and modify arrow, rectangle, circle.


⑦ Free Draw And Smooth： Free draw and auto smooth.


⑧ ScreenShot： And screenshot rectangle, modify it and the text. Shot current rectangle area and save as PNG image.


⑨ EditAnnotation： Open annotation list and operate them, goto annotation and flick, copy text, add comments and delete.


⑩ Output And Import Annotations： Output annotations in JSON format, can be saved to database and reload in PDF file. Import annotations from JSON file and show them in PDF.


⑪ Change Tips Language： Change tips language (English/Chinese), you can also add your language.


⑫ Save All Annotations And Download： Save all annotations for all page into PDF file and download.


5-Summarize


I have figureed out the best solution of pdf.js annotation using only pdf.js-dist, and I put the live demo and source code in https://demos.libertynlp.com

Waiting for your visiting and using.

评论

发表评论

此博客中的热门博文

How to save annotation comments based on pdf.js? Save English/Non-english, all language comments.(PDF Web highlight).

图片
Have you ever needed to save annotation text comments (English/Non-English)? Live Demo:   https://www.elasticpdf.com/demo It is a common requirement to  add annotation text comments  to various annotation objects such as highlights, underlines, rectangles, etc. in PDF. However, this feature, which seems to be very common in desktop PDF editors such as Adobe Arcbot, cannot be realized in many web-based PDF editors, or some of the products that can realize it are very expensive. In fact, this function is not simple. The fact that the product can realize this function shows that it has basically reached the technical level close to the world-class PDF editor. Video: Save Annotation text comments After a long period of technical accumulation, this feature was finally realized in our pure front-end offline product ElasticPDF based only on pdf.js-dist.  At present, it can save annotations in standard formats and save text comments in all languages(English/Chinese/Spanish a...
阅读全文

ElasticPDF-new PDF editor library (based on pdf.js Web PDF annotation, highlight/polygon/eraser/history/save annotation text)

图片
Abstract:   ElasticPDF is a   new professional PDF editor development library , based on the open source pdf.js-dist, with added annotation features, supporting full offline deploy, and suitable for public and intranet systems. The code structure continues the simple style of pdf.js-dist, is compatible with all mainstream browsers, and can be deployed not only in Web projects, but also embedded in any desktop and mobile projects. Keywords:  Web PDF editor, pdf.js, PDF annotation, available in intranet, available in any project 1 Technical advantages ElasticPDF continues the architectural style of pdf.js-dist, and is developed entirely with simple Javascript code. In short, it adds several js files to the pdf.js-dist code package, and can run without any online dependencies, so it is very suitable for integration into other projects as a functional module. It not only can it be deployed in public network environment applications, but its independent and simple features als...
阅读全文