The latest articles on DEV Community by Chaoxu Wei (@chaoxuwei). https://dev.to/chaoxuwei https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1029049%2F2423a858-8553-4d29-89fd-88aac2d100c4.jpeg https://dev.to/chaoxuwei en Chaoxu Wei Sat, 18 Feb 2023 03:47:06 +0000 https://dev.to/chaoxuwei/pdfjs-annotation-library-in-pure-javascript-create-and-save-pdf-annotation-pdf-highlightsignature-pdfjs-375i https://dev.to/chaoxuwei/pdfjs-annotation-library-in-pure-javascript-create-and-save-pdf-annotation-pdf-highlightsignature-pdfjs-375i <h2> Demo and Source code </h2> <p>Demo and source code: <strong><a href="https://demos.libertynlp.com">https://demos.libertynlp.com</a></strong><br> the best solution of pdf.js annotation, only use <strong>pdf.js-dist</strong>, support <strong>old browser, smart phone and mobile device</strong>, very easy to import into your project.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_5H7b2UB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zi90zcsw0df0kbfzyzzh.JPG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_5H7b2UB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zi90zcsw0df0kbfzyzzh.JPG" alt="Image description" width="880" height="495"></a></p> <h2> Function </h2> <p><strong>① download :</strong> save pdf with annotations mark<br> <strong>② highlight :</strong> highlight selected text;<br> <strong>③ underline :</strong> underline selected text;<br> <strong>④ screenshot:</strong> screenshot pdf save as png;<br> <strong>⑤ polygon:</strong> add textbox/arrow/rectangle/circle;<br> <strong>⑥ free draw:</strong> free draw and auto smooth;<br> <strong>⑦ image:</strong> insert image (forexample signature);<br> <strong>⑧ edit:</strong> edit annotation ( copy/delete/add comment/navigate );<br> <strong>⑨ output annotations :</strong> output annotations for importing;<br> <strong>⑩ import annotations :</strong> import annotations for current file;<br> <strong>⑪ download txt :</strong> download annotations and comments text;<br> <strong>⑫ clear:</strong> clear one/page/file annotation;<br> <strong>⑬ undo annotations :</strong> undo annotations in current page;<br> <strong>⑭ help :</strong> open help file;</p> <h2> Demonstrate Video </h2> <p>Youtube tutorial video:<br> <iframe width="710" height="399" src="https://www.youtube.com/embed/ea_0N89-pm8"> </iframe> </p> <h2> Summarize </h2> <p>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 <a href="https://demos.libertynlp.com">https://demos.libertynlp.com</a></p> <p>Waiting for your visiting and using. </p> pdfjs javascript annotation