Coordinates of Annotated Text

[Maral]

Hi,

I am using Pdf Viewer in Razor Pages and I would like to have annotation markups on my pdf file. Is there any way to save the coordinates of the highlighted text in terms of document coordinates? I would like to later use these coordinates to edit my original pdf on the back-end.

Thanks,

Maral

[Akshaya Arivoli]

Hi Maral, 

Thank you for contacting Syncfusion support. 

EJ2 PDF Viewer supports TextMarkup annotations also we are providing support to Import/Export annotation details in PDF Viewer from the version 17.2.0.46. Using that you can save the coordinates of the annotation as per your requirement. Please find the API for Import/Export annotation details in PDF viewer from the below, 

Import/Export Annotation API 

 

Method 

API	Parameter	Return Type	Description
exportAnnotations	-	void	To Export the loaded document annotation object as json file.
importAnnotations	importData	void	Import the annotation details in loaded document.

 

Parameter	Data Type	Description
importData	any	Specifies the data for the import annotations it can be json file name or json object

 

We have updated the controller code for the implementation of Import/Export annotations in PDF Viewer. We have created simple sample with the updated code and shared the same in the following location, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_RazorPages-1405868634  

We have also shared the template of the JSON data for importing the annotation in PDF Viewer 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/PDF_Succinctly1406032788  

Please try this and let us know if you have any concerns on this. 

Regards,
Akshaya 

[Maral]

Hi Akshaya,

Thank you for your reply. I used your previous responses to upgrade the EJ2 version and I imported the new annotation methods to my model.

Thank you for your kind help.

Kind Regards,

Maral

[Akshaya Arivoli]

Hi Maral, 

We are glad to hear that your issue is resolved.  

Regards, 

Akshaya 

[Maral]

Hi,

I used your code to test the import/export annotation and it works perfectly. I am generating my annotation information outside of syncfusion and I would like to import them. I have already stored my annotation information in the json template you provided me with. These annotation information are collected page by page for a pdf file of multiple pages. I was wondering if I can include the pageNumber as one of the keys in my json file so that pdfviewer could associate annotations to each page. I checked the Response of RenderPdfPages call and I saw pageNumber is also included while each page is loaded during scrolling. Could you please kindly advice. 

Thank you for your time.

Kind Regards,

Maral

[Maral]

Hi,

I just realized from looking at the hard coded json object, that the page index is considered as keys. I get it now. My problem is solved.

Thank you again for providing the sample code.

Kind Regards,

Maral

[Akshaya Arivoli]

Hi Maral, 

We are glad to hear that the issue is resolved. 

Regards, 

Akshaya 

[Maral]

Hi,

I have a json file in the same format that you attached as a template containing my pdf annotations:

{"pdfAnnotation": {"0": {"measureShapeAnnotation": [], "shapeAnnotation": [], "stampAnnotations": [], "stickyNotesAnnotation": [], "textMarkupAnnotation": [{"AnnotName": "", "AnnotType": "textMarkup", "Author": "Guest", "Bounds": [{"Bottom": 0, "Height": 0, "IsEmpty": 0, "Left": 0, "Location": {"IsEmpty": 0, "X": 0, "Y": 0}, "Right": 0, "Size": "", "Top": 0, "Width": 0, "X": 0, "Y": 0}], "Color": "#00FF00", "Comments": 0, "ModifiedDate": "9/5/2019, 10:51:53 AM", "Note": "", "Opacity": 1.0, "Rect": {"bottom": 0.0, "left": 0.0, "right": 0.0, "top": 0.0}, "State": "", "StateModel": "", "Subject": "Highlight", "TextMarkupAnnotationType": "Highlight"}]}, "4": {"measureShapeAnnotation": [], "shapeAnnotation": [], "stampAnnotations": [], "stickyNotesAnnotation": [], "textMarkupAnnotation": [{"TextMarkupAnnotationType": "Highlight", "Author": "Guest", "ModifiedDate": "9/5/2019, 10:51:53 AM", "Subject": "Highlight", "Note": "", "Bounds": [{"Location": {"IsEmpty": 0, "X": 46.941172395833334, "Y": 1101.2399044062502}, "Size": "26.11764479166667, 10.588234374999956", "X": 46.941172395833334, "Y": 1101.2399044062502, "Width": 34.73646757291667, "Height": 14.082351718749942, "Left": 46.941172395833334, "Top": 1101.2399044062502, "Right": 81.67763996875001, "Bottom": 1115.322256125, "IsEmpty": 0}], "Color": "#00FF00", "Opacity": 1.0, "Rect": ................................

}]}}}

I was wondering how I can render my pdf page with this annotations in the importAnnotation action method.

Thanks,

Maral

[Maral]

Hi,

So I was able to pass my json dictionary from server side to client side using ajax call. I used my success property to pass the data to importAnnotation() function. This event get triggered on select on a dropdown list. Every-time I select a different item from the drop dow list I want previous annotations to be cleared from my pdf file and new ones imported. How can I clear previous annotations on every select?

Thanks,

Maral

[Sabari Anand Senthamarai Kannan]

Hi Maral, 

 

Thank you for the update. 

 

We are glad to hear that you are able to import the annotations using importAnnotations() method of the PDF Viewer control. When we analyzed your query, we came to know that you are importing the multiple JSON files to import the annotations on dropdown list select event and trying to clear the previously imported annotations in the PDF Viewer control. We do not support clearing all the annotations loaded in the PDF Viewer control. However, we will analyze to clear all the annotations in the PDF Viewer control and update you with more details on October 8, 2019. 

 

Regards, 

Sabari Anand 

[Maral]

Hi,

Thank you very much for your prompt reply. Yes, as you mentioned I need to clear all previous annotations and import new ones on drop down list select event. I very much appreciate you analyzing a solution for my application.  I will wait for your update on October 8th. Please let me know if there is no way around this so I can adopt a different approach.

Thank you again for your time,

Maral

[Sabari Anand Senthamarai Kannan]

Hi Maral, 

  

We have analyzed the feasibility to clear all the annotations in the PDF Viewer control and consider it as usability feature. The implementation of the usability feature will be included in our weekly release on October 23rd, 2019. You can track the status of this feature with the below feedback link. 

  

https://www.syncfusion.com/feedback/9369/remove-the-annotation-collection-from-the-pdf-document 

  

Regards, 

Sabari Anand 

[Maral]

Hi Sabari,

That is great news. Thank you very much. I will wait until the feature is released. This is very helpful for our project.

Thanks,

Maral

[Maral]

Hi,

I hope you are having a nice day.

I was wondering if the feature to clear all the annotations in the PDF viewer control is released yet. We are waiting to incorporate this feature into our project.

Thanks,

Maral

[Akshaya Arivoli]

Hi Maral, 

Sorry for the inconvenience caused.  

We have implemented the feature “support to clear all the annotations” and the implementation is included in our latest release v17.3.0.19. Kindly upgrade to this version to get the implementation. Please find the API details and the code snippet from the below,  

API details:    

API	Parameter	Return Type	Descriptions
deleteAnnotations()	-	void	To delete the annotation collections in the PDF Document.

  

 Code Snippet:  

<buttn id="delete">Delete Annotations</button> 

<ejs-pdfviewer id="pdfViewer" style="height:600px" serviceUrl="/api/PdfViewer" documentPath="PDF Succinctly.pdf"></ejs-pdfviewer> 

 

    document.getElementById('delete').addEventListener('click',()=>  

    { 

        var viewer = document.getElementById('pdfViewer').ej2_instances[0]; 

    viewer.deleteAnnotations();  

})  

 

   

Packages link:  

https://www.nuget.org/packages/Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows/   

https://www.nuget.org/packages/Syncfusion.EJ2.JavaScript/  

Regards,  

Akshaya  

[Maral]

Hi,

Awesome. Thank you very much. Could you please kindly share the code as well. I am a mac user and I use razorpages.

Thank you again,

Kind Regards,

Maral

[Akshaya Arivoli]

Hi Maral, 

Please find the code snippet to delete all the annotations from the PDF Viewer in RazorPages, 

 

<button onclick="deleteAnnotations();">Delete Annotations</button> 

<div class="control-section"> 

    <ejs-pdfviewer id="pdfviewer" serviceUrl="/Index" documentPath="PDF Succinctly.pdf"></ejs-pdfviewer> 

</div>  

function deleteAnnotations() { 

 

        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; 

        pdfViewer.deleteAnnotations();  

    }    

We have also created the sample for the same and shared in the below link, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_RazorPages9498954  

Note: Please find the list of packages with their respective environments from the below, 

• Windows - Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows
• Linux - Syncfusion.EJ2.PdfViewer.AspNet.Core.Linux 
• IOS-  Syncfusion.EJ2.PdfViewer.AspNet.Core.OSX 

Please try this and let us know if you have any concerns on this 

Regards, 

Akshaya 

[Maral]

Hi,

Thank you again for releasing this delete annotation feature. I tested it and it's working. :)

However, my problem still remains. The reason is that the function only works if the importAnnotation() and deleteAnnotation() APIs is used in the .cshtml file and the importAnnotation() method in the .cs file is not working. I am passing the json template you previously provided me with and pass it to the pdfviewer for annotation. However, if I use the deleteAnnotation() once I can not import another annotation. Could you please provide me with a code for working importAnnotation() method that uses the json file rather than annotations hard coded in the .cshtml file.

Thanks,

Maral

[Akshaya Arivoli]

Hi Maral,  

We are unable to reproduce the reported issue with the details provided in the incident. We have shared the sample in which we have tried to reproduce the reported issue in the below link, 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/PDFVIE~21758086019  

 

Note: Kindly ensure that the json file is present in the location provided in the GetDocumentPath() in the Index.cs. 

 

Please try this and revert us with more details about your issue, modified sample, replication procedure and error details. These details will be helpful for us to investigate more on your issue and assist you better. 

 

Regards, 

Akshaya 

[Mohamed]

We use Syncfusion angular PDF viewer and its annotations in a web-based document approval cycle   we are trying a use case depending on extracting the coordinates of the rectangle annotations and pass it to other document extraction library to extract the PDF data based on the rectangle (X,Y, Width, height)

We are able to allow the user to use PDF annotation in the angular web viewer and we can get the annotation left,top,width and height attributes however There is a difference between coordinates determined on the document from the web page having the embedded PDF viewer, and the actual rectangular annotations coordinates on the document. In other words, the embedded Synfusion PDF viewer gives the coordinates data based on the web page dimensions instead of the actual document dimensions. Accordingly, the extraction does not work correctly.

Therefore, we need to know if there a way that we access the actual document coordinates of rectangular annotations.

[Akshaya Arivoli]

Hi Mohamed, 

  

Thank you for contacting Syncfusion support. 

  

We are converting the page coordinates from point to pixel in our PDF Viewer and the annotation coordinates will be based on that. So suspect that we need to convert back(annotationbounds.X /(96 / 72)) to get the PDF actual coordinates. Can you please try it and if you have any concerns revert us with more details about your requirement. It will be helpful for us to investigate further and assist you better. 

  

Regards, 

Akshaya