Form filling in TypeScript PDF Viewer

9 Jan 20264 minutes to read

The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data.

Form Fields

Work with the runtime form fields present in a PDF Form.

  • Render existing fields
  • Fill fields.
  • Import/Export form data as JSON, XFDF, FDF, or as a plain object
  • Inject FormFields to enable form-filling features.

Use the following code-snippet to enable form-filling by injecting FormFields Module.

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields} from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

FormFilling

The PDF Viewer supports the following form field types:

Form filling in TypeScript PDF Viewer

Disabling form filling

The PDF Viewer provides an option to disable interaction with form fields using enableFormDesigner API. Use the following configuration to disable form fields in the viewer.

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.enableFormDesigner = false;  //To disable Form Desinger
pdfviewer.appendTo('#PdfViewer');

Access form fields

You can access the collection of all interactive form fields in the loaded document using the formFieldCollection property. Fetch the collection after the document is loaded.

Use the following code-snippet to access interactive form fields collection:

<button id="formFieldCollection">Fetch Form-Fields Collection</button>
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";

pdfviewer.appendTo('#PdfViewer');

// Access the form fields collection via button click
document.getElementById('formFieldCollection')?.addEventListener('click',function() {
    const fields = pdfviewer.formFieldCollection; // Gets all form fields
    console.log(fields)//Log the formField Collection
});

Add a handwritten signature to a signature field

Add a handwritten signature to a signature field by following these steps:

  • Click the signature field in the PDF document to open the signature panel.

Signature field in TypeScript PDF Viewer

  • Draw the signature in the signature panel.

Signature panel in TypeScript PDF Viewer

  • Select CREATE. The drawn signature is added to the signature field.

Signature added in TypeScript PDF Viewer

Delete a signature from a signature field

Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.

Deleting a signature in TypeScript PDF Viewer

Export and import form fields

The PDF Viewer supports exporting and importing form field data using the importFormFields, exportFormFields, and exportFormFieldsAsObject methods. The following formats are supported:

  • FDF
  • XFDF
  • JSON

For more information, see the Form fields documentation.

See also