PDF Viewer with annotations in Angular

Question

Hi,

I am a beginner of Angular. I am working on a sample application wherein I want to load a PDF file, view, edit and save it. In addition, I also want to perform annotations like write comments, adding shapes, images, etc.

I had come across this PDFTron Webviewer (https://www.pdftron.com/samples/web/samples/viewing/viewing/

) which has all the features I am looking for, but it’s a licensed one.

I have tried “pdf-viewer”, “ng2-pdfjs-viewer”, but these have only basic features like open file, download, print and traverse through pages, zoom-on, zoom-out.

Please help me in how to add comments and do annotations in the PDF file from Angular application.

Thanks in advance.

Sivakumar Koneti · Answer

Read this two links https://stackblitz.com/edit/ng2-pdf-viewer https://www.npmjs.com/package/ng2-pdf-viewer

Mohamed Abedallah · Answer

I am not aware of a free toolkit that has advanced PDF features. However, you can try HTML5/JS DocumentViewer control from LEADTOOLS that supports loading PDF and adding annotations objects. As well as saving PDF with added annotations. You can check the online Document Viewer here: https://demo.leadtools.com/JavaScript/DocumentViewer/ This JS code shows how to pass the PDF URL to the viewer and load it: // Load the PDF File var documentOptions = new lt.Documents.LoadDocumentOptions(); lt.Documents.DocumentFactory.loadFromUri( "http://PDFURL" , documentOptions).done( function (document) { // Set in the viewer documentViewer.setDocument(document); }); }; For more information, see this link: https://www.leadtools.com/help/leadtools/v20/dh/javascript/to/uploading-using-the-document-library.html

Vanitha Avancha · Answer

Hi Sivakumar, Thanks for the prompt response. I have already tried " ng2-pdf-viewer". I am able to view, download, perform zoom-in, zoom-out etc. But, I am not able to add annotations or write comments or edit the PDF file in the viewer.