How to initally add anotation in Next js

Question

this is my next JS app to view pdf. here I need to add some anotationdata initially. how will I do that. the annotation data will be JSON data.

Chinnamunia Karthik Chinna Thambi · Accepted Answer

Hi Nayan,When loading the
document the documentLoad event is triggered within this event you can import
the annotation using importAnnotation method. We have provided the code snippet
and sample for this functionality.Code snippet:

const documentLoad = (args: any) => {
      var viewer = document.getElementById('container').ej2_instances[0];
      viewer.importAnnotation(data);
   
  }

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImportAnnotationNextJS-1106601612.zipRun the sample by
executing the following commands: `npm install` and `npm run dev`.Additionally,
you can add new annotations using the addAnnotation method. Please refer to the below demo link for
this functionality.Demo: https://ej2.syncfusion.com/react/demos/#/material3/pdfviewer/annotations

Nayan Prasad P K · Answer

How will i get the data for the annotation?

Chinnamunia Karthik Chinna Thambi · Answer

Hi Nayan,You can get the
annotation data using exportAnnotationAsObject method. We have provided the
code snippet, sample and documentation below for your reference.Code snippet:

let exportObject;
   
  const exportAnnotationAsObject = () => {
      viewer.exportAnnotationsAsObject().then(function (value) {
          exportObject = value;
          console.log(exportObject);
   
    });
  };
   
  const importAnnotation = () => {
      viewer.importAnnotation(JSON.parse(exportObject));
  };

Sample:  https://stackblitz.com/edit/github-hslfxx-htzvkd?file=pages%2Findex.tsxDocumentation:  https://ej2.syncfusion.com/react/documentation/pdfviewer/how-to/import-export-annotation-object