[With code] Create online pdf annotation(pdf highlight, pdf underline) based on pdf.js


I have figured out the best solution of pdf.js annotation, only use pdf.js dist, and it is very easy to import into your project !

Keywords: pdf.js , annotation , demo , sourcecode , pdf.js-dist , import.

Demo and source code

Demo and source code are in : https://demos.libertynlp.com/#/pdfjs-annotation. I only used the pdf.js-dist, which make this annotaion application could be imported and used very easily in your project.

Play Video

demo video


① highlight : highlight selected text;

② underline : underline selected text;

③ output annotations : output annotations for importing;

④ import annotations : import annotations for current file;

⑤ download annotations : download annotations and comments text;

⑥ undo annotations : undo annotations in current page;

⑦ help : open help file;


I have figureed out the best solution of pdf.js annotation using only pdf.js-dist, and I put the live demo in https://demos.libertynlp.com/#/pdfjs-annotation. Waiting for your visiting and using. 

About how to import pdf.js-dist, pleae read the related articles.

Related articles

If yuo have any question or need any help 

you can leave a comment or connect me with weichaoxu1998@gmail.com

Edit Template

Leave a Reply

Your email address will not be published. Required fields are marked *

Chaoxu Wei

Master student at Tongji University (Writer & Blogger)

Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me weichaoxu1998@gmail.com, thank you very much!


Edit Template

“There are many people in the world who want to work hard but can’t, and people who work too hard and are exhausted. Please don’t use your efforts only to chase your own victory, please use them to help others.”





Yangpu District, Shanghai