PdfViewer - Restore / render annotations dynamically through Javascript

Question

Hi,I'm trying to save PDF annotations to the database, and then when I reload the document, apply those annotations.I was successful in saving the text annotations using the method you described in this link: https://www.syncfusion.com/kb/9068/how-to-save-and-retrieve-the-annotations-from-the-databaseHowever, I can't find a sensible way of retrieving and injecting the saved annotations back into the viewed PDF file. This would preferrably be done through javascript. From what I could figure out from the code I downloaded from the above link, you're re-rendering the entire PDF file with annotations on the backend, then sending it to the frontend and loading it in the PDF viewer. This doesn't sound reasonable, and I don't have access to C# backend where I could do this, as per your example. My backend is PHP.Since I can send the annotations as a JSON to the frontend (the same way they were initially saved into the database), I need a method on the PdfViewer which can render these annotations on the PDF file I'm currently viewing.Here's the annotation data which I can provide to the frontend and send to PdfViewer - https://paste.laravel.io/80713636-c55a-4779-822d-d5e32df01e2chttps://ej2.syncfusion.com/documentation/api/pdfviewer#addannotation - this method doesn't exist.I've tried digging deeper into the ej2instance of the PdfViewer and messing around with `storeAnnotationCollection` etc., but none of that worked.Can you please provide an example of how I can programmatically render previously saved annotations on the currently viewed PDF document using preferrably Javascript, or as a backup option, PHP?Thank you,regards,Tomislav

Akshaya Arivoli · Accepted Answer

Hi Tomislav, 

Thank you for your update. 

We were unable to reproduce the issue import annotation is not working properly with the provided JSON data(https://paste.laravel.io/ddef94a1-c44e-41e3-9779-f7103caf3012). We have shared the sample in which we have tried in the below link, 

https://stackblitz.com/edit/siegj4-9wo32u?file=index.ts  

  

Please try it and revert us with more details about your issue, code snippet, modified sample and replication procedure. These details will be helpful for us to investigate further and assist you better.   

    
Regards,    
Akshaya

Tomislav Modric · Answer

UPDATE:I was able to use the importAnnotations() method on the ej2instances object, but it's not working correctly. The imported annotation shows up, however clicking anywhere on the document makes it disappear. Additionally, editing the annotation or adding comments to it can't be done. The annotation object I'm importing has the correct structure - the same structure which exportAnnotationsAsObject() provides.Calling annotationCollection() on the ej2Instances object shows the annotation is there, but all of its properties are undefined.Adding a new annotation manually through the PdfViewer user interface works normally, and annotationCollection() shows the newly created annotation correctly, with all of its properties.Here's the screenshot - https://i.imgur.com/mhiFDsw.png

Akshaya Arivoli · Answer

Hi Tomislav , 

Thank you for contacting Syncfusion support. 

We were unable to reproduce the reported issue with the imported annotation. We have shared the sample in which we have tried to reproduce the issue in the below link, 

Vue: https://www.syncfusion.com/downloads/support/forum/158301/ze/Pdf_Viewer_(4)-1903553748  
Web Service: https://www.syncfusion.com/downloads/support/forum/158301/ze/ej2-pdfviewer-web-service_(3)-600762728  

Please try it and revert us with more details about your issue, modified sample with the replication procedure, if you need further assistance.  
Also, we do not have support for PDF Viewer Web service in PHP and we do not have any immediate plans to implement it. Our PDF Viewer control is both server and the client side oriented. PDF viewer control processes the PDF document in the server side(developed with .NET environment) and send the processed PDF data to the client using the Web service to render the PDF document and for further operations in PDF viewer. We can track the status of the feature “Support for PDF Viewer Web Service in JAVA and PHP" using the below feedback link.  

https://www.syncfusion.com/feedback/15231/support-for-pdf-viewer-web-service-in-java-and-php   

Please refer to the below link to create PDF Viewer web service project in .net framework, 

https://www.syncfusion.com/kb/11063/how-to-create-the-pdf-viewer-web-service-application-in-net-core-3-0-and-above-version  
  

Regards,  
Akshaya

Tomislav Modric · Answer

Hello,I've managed to figure out how to properly import the annotations, but I would still consider the PdfViewer to have a buggy behavior regarding this.Annotation object the PdfViewer exports, which does not work properly when importing: https://paste.laravel.io/ddef94a1-c44e-41e3-9779-f7103caf3012What has to be done when importing the annotation object is capitalize some (most) of the object properties, for example "rect" --> "Rect". Here's example of an object that works properly when importing: https://paste.laravel.io/55d1f124-4e61-4f25-88b4-e2deb63edebdHowever, "textMarkupContent", "textMarkupStartIndex", and "textMarkupEndIndex" properties must not be capitalized when importing, or they will not be loaded.You can test these objects on the following example PDF: https://tmweb.dev/example/annotation.pdfRegards,T.M.