We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Coordinates of Annotated Text

Thread ID:

Created:

Updated:

Platform:

Replies:

147267 Sep 4,2019 04:20 PM UTC Apr 7,2020 02:38 PM UTC ASP.NET Core - EJ 2 20
loading
Tags: PDF Viewer
Maral
Asked On September 4, 2019 04:20 PM UTC

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 [Syncfusion]
Replied On September 5, 2019 06:29 AM UTC

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, 


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


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

Regards,
Akshaya 


Maral
Replied On September 5, 2019 07:13 PM UTC

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 [Syncfusion]
Replied On September 6, 2019 05:00 AM UTC

Hi Maral, 

We are glad to hear that your issue is resolved.  

Regards, 
Akshaya 


Maral
Replied On September 27, 2019 10:41 PM UTC

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
Replied On September 27, 2019 11:48 PM UTC

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 [Syncfusion]
Replied On September 30, 2019 09:41 AM UTC

Hi Maral, 

We are glad to hear that the issue is resolved. 

Regards, 
Akshaya 


Maral
Replied On October 3, 2019 07:52 AM UTC

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
Replied On October 4, 2019 12:57 AM UTC

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 [Syncfusion]
Replied On October 4, 2019 08:38 AM UTC

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
Replied On October 4, 2019 01:45 PM UTC

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 [Syncfusion]
Replied On October 8, 2019 01:31 PM UTC

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. 
  
  
Regards, 
Sabari Anand 


Maral
Replied On October 9, 2019 05:10 AM UTC

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
Replied On October 23, 2019 08:09 PM UTC

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 [Syncfusion]
Replied On October 24, 2019 06:16 AM UTC

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:  


Regards,  
Akshaya  


Maral
Replied On October 24, 2019 06:07 PM UTC

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 [Syncfusion]
Replied On October 25, 2019 10:29 AM UTC

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, 



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
Replied On October 26, 2019 01:53 AM UTC

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 [Syncfusion]
Replied On October 28, 2019 08:14 AM UTC

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, 
 
 
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
Replied On April 7, 2020 02:04 AM UTC

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 [Syncfusion]
Replied On April 7, 2020 02:38 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon