Add a shape on user side

[Tuan Ardouin]

Hello,

Is it possible to add a shape directly on the user side ?

Like this :
https://help.syncfusion.com/file-formats/pdf/working-with-shapes

But in javascript/vueJS

Thanks,
Tuan

[Akshaya Arivoli]

Hi Tuan,  

Thank you for Contacting Syncfusion support.  

Our EJ2 PDF Viewer supports to add the Shape annotations using user interface, which will be preserved on while downloading and printing. Also, we can import/export the annotations as JSON data.   

 

UG: https://ej2.syncfusion.com/vue/documentation/pdfviewer/getting-started/   

Demo: https://ej2.syncfusion.com/vue/demos/#/material/pdfviewer/default.html   

Our EJ2 PDF Viewer control is both server and the client side oriented. Please find the below links to create web service project in ASP.NET Core and ASP.NET MVC platforms.       

      

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

ASP.NET MVC:  https://ej2.syncfusion.com/documentation/pdfviewer/how-to/create-pdfviewer-service/       

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

Regards,  

Akshaya  

[Tuan Ardouin]

Hello Akshaya,

Thanks for your reply. 

What interest me the most is :
Also, we can import/export the annotations as JSON data. 

I can't find any reference to that in the Vue documentation, could you point me to it please ?

Thanks,

Tuan

[Mohan Selvaraj]

Hi Tuan ,     

   

Thank you for your update  

   

We can import the form fields as JSON data using our EJ2 PDF Viewer. We have also created the sample for the same and shared in the below link,   

    

JavaScript:  https://stackblitz.com/edit/vfgk35-ktc7wa?file=index.html     

Web Service:     

    

Note: Run the web service project and then the JavaScript. Click on the provided buttons to import/export form fields.   

    

Controller code : https://www.syncfusion.com/downloads/support/forum/157796/ze/PDFViewerWebService_(10)303953807   

    

  [AcceptVerbs("Post")]   

        [HttpPost("ExportFormFields")]   

        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]   

        [Route("[controller]/ExportFormFields")]   

        public IActionResult ExportFormFields([FromBody] Dictionary<string, string> jsonObject)   

    

        {   

            PdfRenderer pdfviewer = new PdfRenderer(_cache);   

            string jsonResult = pdfviewer.ExportFormFields(jsonObject);   

            return Content(jsonResult);   

        }   

    

        [AcceptVerbs("Post")]   

        [HttpPost("ImportFormFields")]   

        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]   

        [Route("[controller]/ImportFormFields")]   

        public IActionResult ImportFormFields([FromBody] Dictionary<string, string> jsonObject)   

        {   

            PdfRenderer pdfviewer = new PdfRenderer(_cache);   

            object jsonResult = pdfviewer.ImportFormFields(jsonObject);   

            return Content(JsonConvert.SerializeObject(jsonResult));   

        }   

    

   

    

    

API Details:   

    

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

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

    

Please try it and revert us with more details about your requirement and the use case, if you still have concerns. These details will be helpful for us to investigate further and assist you better.      

    

Regards,   

Mohan S 

[Tuan Ardouin]

Hello Mohan,

Thanks for your reply but that's not what I'm looking for.

You're talking about forms, but I want to add shapes.

My goal is to have X, Y, width, height of a shape and draw it on the PDF viewer. 

I just want to do this :
https://help.syncfusion.com/file-formats/pdf/working-with-shapes?cs-save-lang=1&cs-lang=asp.net%20core#rectangle

But on the user side, and not re-generate the PDF if I want another shape added or one deleted.

Is that even possible ?

Thank you,
Tuan

[Tuan Ardouin]

Ok so. I understand now that I have to use :

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

to import from a json ?

And

https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#addannotation
to directly add an annotation on the client side.

I'll try that but if you have an example ready that would be awesome !

Tuan

[Akshaya Arivoli]

Hi Tuan, 

Thank you for your update. 

Please find the details of your query from the below, 

Query	Details
Ok so. I understand now that I have to use :  https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#importannotations  to import from a json ?	Yes can import/export using the importAnnotations() and exportAnotations() API available in PDF Viewer.
https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#addannotation to directly add an annotation on the client side. I'll try that but if you have an example ready that would be awesome !	We can add the annotations programmatically using addAnnotation().Please refer to the below code     /* Exposed the addAnnotation method to import the annotation using annotation collection*/  /* To add single annotation */   pdfviewer.addAnnotation(pdfviewer.annotationCollection[0]);  /* To add multiple annotation collections*/  pdfviewer.addAnnotation(pdfviewer.annotationCollection    Sample: https://stackblitz.com/edit/vfgk35-jofvxk?file=index.html   Web Service:  https://www.syncfusion.com/downloads/support/forum/157796/ze/PDFViewerWebService_(10)303953807   We can also get the annotationcollection from the annotation events then we add it using the addAnnotation()    Note: Run the web service project and then the JavaScript. Draw an annotation and click on the Add Annotation button, the same annotation will be added again  Please try it and revert us with more details about your requirement and the use case, if you still have concerns. These details will be helpful for us to investigate further and assist you better.

Regards, 

Akshaya 

[Tuan Ardouin]

Hello,

I'm sorry but your answer didn't really help me.

Yes can import/export using the importAnnotations() and exportAnotations() API available in PDF Viewer. 

-> There is no example or documentation that detail the JSON format that we should provide. Or I couldn't find it.

We can add the annotations programmatically using addAnnotation().Please refer to the below code 

-> Do you have an example that show how to create a shape annotation from scratch please ?

Thanks,
Tuan

[Akshaya Arivoli]

Hi Tuan,  

Thank you for your update.  

Please find the details of your query from the below, 

Query	Details
There is no example or documentation that detail the JSON format that we should provide. Or I couldn't find it.	We have created sample to import/export annotation and shared the same in the below link,    https://stackblitz.com/edit/vfgk35-cavgb7?file=index.html     Web Service:  https://www.syncfusion.com/downloads/support/forum/157796/ze/PDFViewerWebService_(10)303953807      Kindly run the web service project and provide that URL to the serviceUrl property of the PDF Viewer.
Do you have an example that show how to create a shape annotation from scratch please ?	We can use the import annotation API  to add the annotations from code behind in the client side.     If your requirement is add the annotations from the code behind in the server side, please refer to the below link,    https://help.syncfusion.com/file-formats/pdf/working-with-shapes#adding-shapes-to-a-pdf-document     Please try it and  please provide more details about your requirement and the use case. These details will be helpful for us to investigate further and assist you better.

Regards,  

Akshaya   

[Tuan Ardouin]

Hello,

That's what I was looking for. Thank you very much !

Tuan