Get Annotated PDF data in background

[Arul Lakshmanan]

Hello, I am working in a React PDF viewer. I want to save the Annotated PDF into the S3 bucket but so far I found only Download option.
I want that PDF data alone like blob. So that I can upload to S3 using our Service. Kindly help us.

[Akshaya Arivoli]

Hi Arul , 

Thank you contacting Syncfusion support. 

We can achieve your requirement by saving the annotated PDF using saveAsBlob(), with that you can get the document data and save it as per your requirement.  

Sample: https://www.syncfusion.com/downloads/support/forum/156763/ze/PDF_Viewer_Load-187454112  

 

Code Snippet: 

 

<button onclick="loadPdf()">Save PDF</button> 

<script> 

  function loadPdf() { 

  

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

        //pdfviewer.load('Hive_Succinctly.pdf', null); 

      pdfviewer.saveAsBlob().then(function (value) { 

var testData = value; 

      var a = document.createElement("a"); 

      document.body.appendChild(a); 

      var url = window.URL.createObjectURL(testData); 

      a.rel='nofollow' href = url; 

      a.download = "PDF_Doc.pdf"; 

      a.click(); 

      window.URL.revokeObjectURL(url); 

      console.log('value', value); 

                var reader = new FileReader(); 

reader.readAsDataURL(testData);  

 reader.onloadend = function() { 

     var base64data = reader.result;                 

     console.log(base64data); 

 

            //var a = JSON.parse(value); 

         

        }// var annotation = a.pdfAnnotation; 

 

        }); 

    }    

 

  </script> 

How to create PDF Viewer web service project with packages, 

https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core  

Please try it and revert us with more details and sample if you still have concerns. These details will be helpful for us to investigate further and assist you with precise solution 

Regards, 

Akshaya 30

[Arul Lakshmanan]

Hi Akshaya Arivoli,

Thanks for your support. It is working.

[Akshaya Arivoli]

Hi Arul, 

We are glad to know that the provided solution working for you. Please revert us if you have any concerns in future. 

Regards, 

Akshaya 

[Arul Lakshmanan]

Hello,

 Another query related to React PDF viewer. 
I want to autosave the PDF while Annotating.
Is there any option with new change event? kind of content changed something like that

What am doing right now is set interval function but it will keep on calling not matter whether new change added or not.

[Akshaya Arivoli]

Hi Arul, 

Thank you for your update. 

We have exposed the annotation events like annotationAdd, annotationMove, annotationResize, annotationPropertiesChange,.. based on that you can find whether any action have been preformed for the annotation and then you can save the same. 

PDF Viewer events: https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#events  

Please try it and revert us with more details about your requirement and the use case if you still need further assistance.  

Regards, 

Akshaya  

[Arul Lakshmanan]

Hi,
Am using reactJS PDF component.

Is there any option to export annotated pdf as a file object?

[Akshaya Arivoli]

Hi Arul,  
    

Thank you for your update.   

  

We can import/export the annotations as a JSON object using our PDF Viewer. We can also export the annotations as a JSON object using the exportAnnotations() API available in PDF Viewer   

  

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

  

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

  

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

Regards,
Akshaya

[Vishal]

hello sir I want to import annotation file when syncfusion load without mannually and export that changes

[Vishal]

how to unique id from localstorage in pdf

[Visvesvar Venkatesan]

Hi Vishal,

1. We have provided a simple sample for importing the annotations on load and exporting annotations on a button click. You can find the sample from the following link.

               Sample - https://stackblitz.com/edit/react-hqtmm9-vvhz9v?file=index.js,index.html

2. We are not clear with the statement Unique ID. If you want to view the PDF document’s id, we have also provided the code in the above sample link for your reference. If your requirement is different, please let us know in details.

Regards,

Visvesvar K V

[Nayan Prasad P K]

i trying to do the same in my next application. but when I call viewer.saveAsBlob() it showing that "Web-service is not listening. PDF Viewer depends on web-service for all it's features. Please start the web service to continue."

do we need separate server for this ?

[Chinnamunia Karthik Chinna Thambi]

Hi Nayan,

Please find the code snippet, sample and documentation for how to get the document base64 string using the saveAsBlob method.

Code snippet:

const saveAsBlob = () => {

    var data;

    var base64data;

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

        data = value;

        var reader = new FileReader();

        reader.readAsDataURL(data);

        reader.onload = () => {

            base64data = reader.result;

            console.log(base64data);

            viewer.load(base64data, null);

        };

    });

};

Sample:  https://stackblitz.com/edit/github-hslfxx-htzvkd?file=pages%2Findex.tsx

Documentation:  https://ej2.syncfusion.com/angular/documentation/pdfviewer/how-to/get-base-string-of-the-loaded-document

The "Web-service is not listening” error occurred for various reasons. To troubleshoot this issue, you can use the Network tab in your browser’s developer tools to gather more information. Please refer the below documentation and share the network tab response to proceed further.

Documentation:  https://ej2.syncfusion.com/angular/documentation/pdfviewer/how-to/webservice-not-listening

Along with the network tab response, Please share the below details.

• Share a modified sample or provide the sample in which the issue can be reproduced.
• If the issue is specific to a particular document, please provide us with a copy of the PDF file.

Note: You don't need a separate server for the saveAsBlob method.