How to annotate pdf file in Angular 2

Question

I am new to Angular.

Currently, I have a application that renders pdf file.

I want to annotate/make changes on the pdf file. Like adding drawings: circle, lines or even text.

How can I do that in Angular 2?

Answer 1

You could use the pdf-annotate.js plugin that works on pdf.js . It can be used to create the following annotations.

• Area
• Drawing
• Highlight
• Point
• Strikeout
• Textbox

For examples, follow the links inhttps://github.com/instructure/pdf-annotate.js/tree/master/docs .

If you need more examples, you can refer to the tests that are available in the render folder. Following is an example to render a line.

import renderLine from '../../src/render/renderLine';

let line = renderLine({
      rectangles: [
        {
          x: 25,
          y: 50,
          width: 100
        }
      ]
    });

Answer 2

Adobe's pdf-embed Javascript API can be used to do this. It is free to use.

https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html

Check out the demo at

https://documentcloud.adobe.com/view-sdk-demo/index.html#/view/FULL_WINDOW/Bodea%20Brochure.pdf

It supports text comments, sticky notes, highlighting, and drawing. There is a save callback to save the changes to your own storage.