1. Home
  2. Forum
  3. Angular - EJ 2
  4. Pdf form Fill Example

Pdf form Fill Example

Hi,

I am trying the Pdf Viewer (v18.4.44) for Angular.  I have the following questions.
(https://ej2.syncfusion.com/angular/demos/#/material/pdfviewer/default)

1) The print button does nothing.
2) The Submit Form butting download the json for the filled form but how do I capture the json output without it downloading.
3) What does the serviceUrl suppose to do?
4) The example FormFillingDocument.pdf, where does it exists? How is it downloaded?
5) After getting the Signature, where is it stored?
6) After filling the form is the data going to written (save) back to the PDF? 


Thanks you.

5 Replies 1 reply marked as answer
DM Dhivyabharathi Mohan Syncfusion Team March 5, 2021 10:39 AM UTC

Hi Albert,   
   
Thank you for contacting Syncfusion support.   
   
Please find the details,   
   
Query   
Details   
The print button does nothing.   
We were unable to reproduce the reported issue with the sample in which you have shared. We suspect that the issue may occur due to some network problem. Our online serviceUrl is only for demo purposes. So, we suggest you create your web service by using the below KB link,   
   
KB link for creating web service:   
   
   
   
Note: The service URL ('https://ej2services.syncfusion.com/production/web-services/api/pdfviewer') is only for demo purposes. We need to create the own web service and run the same and refer to the localhost link in the serviceUrl property of our PDF Viewer control.    
   
   
Kindly try this and let us know that you are still facing the same issue.   
The Submit Form butting download the JSON for the filled form but how do I capture the JSON output without it downloading.   
In our PDF Viewer, we have the exportFormFieldsAsObject to get the result of the JSON object instead of downloading the JSON file as like below code snippet. And we have shared the sample for your reference.   
   
Sample:   
   
   
Code snippet:   
   
<button (click)="exportForm()"> exportForm</button>   
exportForm() {   
    var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];   
    viewer.exportFormFieldsAsObject().then(function(value) {   
      var exportData = value;   
      console.log(exportData);   
    });   
  }   
   
   
   
What does the serviceUrl suppose to do?   
   
Our PDF Viewer component is both client and server-side. In our PDF Viewer, we have used the serviceUrl property that is necessary to access the service from which the PDF document is loaded and processed for the control with value as https://js.syncfusion.com/ejServices/api/PdfViewer for server-side document processing. We have shared the UG documentation link for your reference.    
    
UG Documentation to add and use the PDF Viewer control in your web application    
   
     
   
The example FormFillingDocument.pdf, where does it exists? How is it downloaded?   
We have shared the sample for opening the formFilling document. Using the download icon from the toolbar, we can download the formFilling document.   
   
   
   
   
After getting the Signature, where is it stored?   
We can add the signature in a PDF document and use the download icon from the toolbar to save the pdf document. Can you please let us know the exact requirement about where you want to store the signature? It will be helpful for us to investigate further and provide details.   
   
After filling the form is the data going to written (save) back to the PDF?    
In our PDF Viewer control on downloading the document, we will save the changes in a new PDF document. But, we do not make any changes to the document loaded( i.e., original document) in our PDF Viewer control. If we performing the save action back to PDF, then the original PDF document will get modified. So, can you please let us know whether your requirement is to modify the original loaded PDF document?   
  
   
   
Kindly let us know that the above details match your criteria.   
   
Regards, 
Dhivya. 


Marked as answer
AK Albert K March 6, 2021 04:03 AM UTC

Hi,

Thank you for the comprehensive reply.  

1) The print button on your sample pages does not print.  When the print button is clicked there is a circular progress bar but after a few seconds and it just goes away without the usual print dialog.  I have tested on multiple PCs and on different ISP.

5) I guess the only way is to save the PDF and the signature, is to render the print on the server side and save that image on the backup DB.    

I have one suggestion, can you update the documentation to reflect that for the ej2 PDF viewer to working there must be a server to load/render the PDF.  Please point to the KB documentation https://www.syncfusion.com/kb/11063/how-to-create-the-pdf-viewer-web-service-application-in-net-core-3-0-and-above-version   

Thank you.

DM Dhivyabharathi Mohan Syncfusion Team March 8, 2021 11:16 AM UTC

Hi Albert, 
 
Please find the details, 
 
Query 
Details 
 
1) The print button on your sample pages does not print.  When the print button is clicked there is a circular progress bar but after a few seconds and it just goes away without the usual print dialog.  I have tested on multiple PCs and on different ISP. 
We were unable to reproduce the reported issue. we suspect that some plugins has been added in your window. It will restrict the popup window. So that the issue occurs. Kindly try it in Incognito mode or disable the plugin in your window. And let us know, still you have any concerns about this. 
 
I guess the only way is to save the PDF and the signature, is to render the print on the server side and save that image on the backup DB.     
We can get the image for each page of the PDF document in the server side while printing. We can save the each page image in DB. We have shared the code snippet for getting image of pages. 
 
 
Code snippet: 
 
 
public IActionResult PrintImages([FromBody] Dictionary<string, string> jsonObject) 
        { 
            PdfRenderer pdfviewer = new PdfRenderer(_cache); 
            // Gets the image of the each page of the PDF documents 
            object pageImage = pdfviewer.GetPrintImage(jsonObject); 
            return Content(JsonConvert.SerializeObject(pageImage)); 
        } 
 
 
I have one suggestion, can you update the documentation to reflect that for the ej2 PDF viewer to working there must be a server to load/render the PDF.  Please point to the KB documentation https://www.syncfusion.com/kb/11063/how-to-create-the-pdf-viewer-web-service-application-in-net-core-3-0-and-above-version    
We will refresh the KB documentation in our Volume 1 release which will be in the end of March. 
 
  
Kindly try it and let us know, if you have any concerns about this. 
 
Regards, 
Dhivya. 


AK Albert K March 9, 2021 12:50 AM UTC

Hi,

I have tested again with incognito and sometimes it pops up the print dialog but on normal chrome/edge/firefox the dialog never appears.  Below is the screen with console output.  BTW, my machine is a Intel I5 with 16GB RAM and 512GB SSD.



DM Dhivyabharathi Mohan Syncfusion Team March 9, 2021 10:22 AM UTC

Hi Albert,   
  
We have checked the print function in Chrome, Edge, and Firefox browsers, the dialog is opening properly. And we have checked the attached screenshot which you have shared. From the attached screenshot, we came to know that you are using more than one plugin on your end. Kindly share the plugin details of the below-highlighted plugins. It will be helpful for us to replicate the reported issue by enabling those plugins on our end.   
  
    
 
Regards, 
Dhivya. 


Loader.
Up arrow icon