Draw real time annotation

Question

I want to draw real-time annotations. like I have two tabs open in chrome. Same PDF opens in both tab and now if the user draws annotation in one tab then this annotation details should be saved in the database, and this annotation should be drawn in another tab, which is opened with the same PDF.

For this, I need to save annotation details (which is useful for draw annotation at the time of document load) in the database as the user finished the annotation drawing. here I want to know how will I get these details?

Using saved annotation detail how to draw annotation?

I want to do this using Javascript/JQuery and AJAX, and for the backend, I'm using Laravel framework of PHP and MySql Database.

Thank you.

Akshaya Arivoli · Accepted Answer

Hi Monika,

Sorry for the delay.

Currently, we do not have support for Collaborative Editing in PDF Viewer. However, we can track the annotations with the events(annotationAdd, annotatinMove, annotationResize,..) available in PDF Viewer. Using those events we can achieve your requirement (i.e, when an annotation is added we can get the annotation details in the annotationAdd event, with that details we can import the annotation in another PDF Viewer opened in another tab) as a workaround.

Our PDF Viewer supports to Import/Export annotations as JSON from the code behind. Using that we can export the annotations as JSON object in the ‘annotationAdd’ event, then we can import that annotation using the importAnnotation(). Refer to the following code snippet for the same,

viewer.annotationAdd = args => {

viewer.exportAnnotationsAsObject().then(function(value) {

var exportData = value;

alert(exportData);

});

};

We can also export the annotation using the below code snippet:

viewer.annotationAdd = args => {

viewer.exportAnnotation();

};

We can import the annotations to another tab using the following code snippet.

<button id="import">Import</button>

document.getElementById("import").addEventListener("click", function() {

viewer.importAnnotation();

});

Sample: https://stackblitz.com/edit/uapwfl-bychfz?file=index.ts

Refer to the below API links,

https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importannotations

https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportannotations

https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportannotationsasobject

Kindly try it and revert us with more details if you need further assistance.

Regards,

Akshaya

Akshaya Arivoli · Answer

Hi Monika,   
  
Thank you for contacting Syncfusion support.    

We are currently checking on your query and we will update you with further details on December 29, 2020  

Regards, 
Akshaya