How to load annotations programatically?

[limaho]

Hi 👋,

I’m using EmbedPDF and would like to load existing annotations dynamically from my database (e.g., highlights, comments, shapes, etc.).

Is there a way to inject or restore annotations programmatically after initializing the viewer?
If so, could you provide an example or point me to the relevant API/method?

Thanks in advance!

[bobsingor]

Hi @limaho,

Yes that is certainly possible, for React you can read about it here:
https://www.embedpdf.com/docs/react/plugins/plugin-annotation.
For Vue:
https://www.embedpdf.com/docs/vue/plugins/plugin-annotation

There is a function:
importAnnotations(..) | Imports an array of annotations into the viewer.

Are you planning to use the React or Vue? or the PDF Snippet?

The PDF snippet is lacking documentation and will try to get to that as soon as possible.

[h-sigma]

Hi, that is absolutely fantastic. Is this possible without Vue/React, i.e. using raw JS or one of the packages without framework dependencies?

[tranphongdev]

@bobsingor Could you show me some sample data that can be imported? Thanks!

[marco-streng]

Hi togehter 👋🏻

We are using PDFViewer together with the annotation plugin and load annotations programmatically via
annotationPlugin.importAnnotations().

This works as expected for geometry annotations (arrow, rectangle, line, etc.).

However, for Free Text annotations (type: 3) the behavior is different:

• The text box is restored, but the text content is not shown
• When reading annotations back from the engine, the returned JSON:
  • got empty contents property
  • resets properties to defaults (e.g. fontSize: 0, fontColor: "#000000", flags removed)

So after saving again, the Free Text annotation loses its content and styling, while geometry annotations remain intact.

Is this a known limitation of Free Text annotations when using PDFViewer + annotationPlugin with importAnnotations()?