How can I help you?
Filling PDF Forms in ASP.NET Core PDF Viewer
28 Feb 20267 minutes to read
The Syncfusion PDF Viewer supports three form-filling methods:
Form fields can be filled or updated programmatically using the updateFormFieldsValue API. This approach is useful when form data must be set dynamically based on application logic.
Users can fill PDF form fields directly through the UI by typing, selecting, or interacting with supported form elements.
The PDF Viewer supports importing form field data into an existing document to prefill forms from external data sources.
Fill PDF forms programmatically
Form field values can be updated programmatically using the updateFormFieldsValue API. This method allows setting or modifying values dynamically, without user interaction.
The following example demonstrates how to update PDF form field values programmatically:
<button id="updateBtn">Fill Form Fields</button>
<div class="text-center">
<ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
</ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var viewerElement = document.getElementById('pdfviewer');
var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
document.getElementById('updateBtn').addEventListener('click', function () {
var fields = (pdfviewer && pdfviewer.retrieveFormFields && pdfviewer.retrieveFormFields()) || (pdfviewer && pdfviewer.formFieldCollection) || [];
var field = fields.find(function (f) { return f && f.name === 'name'; }) || fields[0];
if (field) {
field.value = 'John Doe';
field.tooltip = 'First';
pdfviewer.updateFormFieldsValue(field);
} else {
console.warn('No form fields available to update.');
}
});
});
</script>Fill PDF forms through the User Interface
Users can fill PDF form fields directly through the UI. Clicking a form field enables entering or selecting values according to the field type.
The PDF Viewer supports common form fields such as text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Filled values can be edited at any time, and the entered data is retained during the viewing session.
Fill PDF forms through Import Data
The PDF Viewer supports importing form field data into an existing document using the importFormFields API. Imported data is mapped to corresponding form fields by name and displayed in the viewer; values can be edited through the UI if required.
<button id="importJson">Import JSON</button><button id="importJson">Import JSON</button>
<div class="text-center">
<ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
</ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var viewerElement = document.getElementById('pdfviewer');
var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
document.getElementById('importJson').addEventListener('click', function () {
// The file for importing should be accessible at the given path or as a file stream depending on your integration
pdfviewer.importFormFields('File', FormFieldDataFormat.Json);
});
});
</script>For more details, see Import Form Data.
How to get the filled data and store it to a backing system
Export filled form data from the PDF Viewer and store it in a backing system such as a database or file storage. Exported data can be re-imported later to restore form state.
For more details, see Export Form Data.
How to Validate Form Fields using validateFormFields Event
The validateFormFields event in the Syncfusion PDF Viewer is triggered when a user tries to download or submit a form while validation is enabled. You can use the retrieveFormFields() API to get all the form fields and check them one by one to see if any form fields values are empty.
Validation applies to all form field types. A textbox is empty if no text is entered, a list box or dropdown is empty if no item is selected, a signature or initial field is empty if not signed, and radio buttons or checkboxes are empty if none are chosen.
Enable enableFormFieldsValidation and wire the event to inspect each field and cancel actions when required fields are not filled.
<div class="text-center">
<ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
</ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var viewerElement = document.getElementById('pdfviewer');
var pdfviewer = viewerElement && viewerElement.ej2_instances && viewerElement.ej2_instances[0];
if (!pdfviewer) return;
pdfviewer.enableFormFieldsValidation = true;
pdfviewer.documentLoad = function () {
// Add a required Email field
pdfviewer.formDesignerModule.addFormField('Textbox', {
name: 'Email',
bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
isRequired: true,
tooltip: 'Email is required'
});
// Add a required Phone field
pdfviewer.formDesignerModule.addFormField('Textbox', {
name: 'Phone',
bounds: { X: 146, Y: 300, Width: 220, Height: 24 },
isRequired: true,
tooltip: 'Phone number is required'
});
};
// Validate only the added fields
pdfviewer.validateFormFields = function (args) {
var fields = pdfviewer.retrieveFormFields();
fields.forEach(function (field) {
if ((field.name === 'Email' || field.name === 'Phone') && !field.value) {
alert(field.name + ' field cannot be empty.');
args.isFormSubmitCancelled = true;
}
});
};
});
</script>