How to Delete all Form Fields from Document in React PDF Viewer?

Description:

This article explains how to delete all form fields from a PDF document, including those on pages that are not currently rendered or visible, using the Syncfusion PDF Viewer component in a React application. After following this guide, you will be able to remove all form fields in the document, even those on pages that are not loaded in the viewer.

Solution:

To delete all form fields in a PDF document, including those on non-rendered pages, we can use Syncfusion’s PDF Viewer component’s form designer module. The process involves accessing the form field collection and deleting each form field. This can be done programmatically, even if the form fields are on pages that are not yet rendered in the viewer. By using the formFieldCollections property, we can retrieve the form fields from the entire document, regardless of whether the pages are loaded in the viewer or not. Once retrieved, we can iterate over these form fields and remove them using the formDesignerModule.deleteFormField method.

Prerequisites:

1. Syncfusion PDF Viewer Setup: Make sure the Syncfusion PDF Viewer is installed and set up in your React project. Follow the Getting Started with Syncfusion PDFViewer for React guide if you haven’t already.
2. Basic Knowledge of React: Familiarity with React components and the basic setup of React projects will help you follow along with the implementation.

Code Snippet

page.tsx

Import Necessary Modules

First, import the required components and modules from Syncfusion in your React application.

import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
    ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } 
  from '@syncfusion/ej2-react-pdfviewer';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

Set Up the PDF Viewer and Form Field Deletion Logic

Create the logic to delete all form fields from the document, including those that are not currently visible. We will use the formFieldCollections property of the PdfViewerComponent to access and delete the form fields.

export function App() {
  let viewer: PdfViewerComponent | null;
  let documentPath: string = "data:application/pdf;base64, <your-base64-encoded-pdf>";

  const deleteFormField = () => {
    var formFieldCollections = viewer?.formFieldCollections;
    if (formFieldCollections) {
      // Iterate over all form fields in the collection
      for (var i = 0; i < formFieldCollections.length; i++) {
        viewer?.formDesignerModule.deleteFormField(formFieldCollections[i]);
        i--; // Adjust the index to account for the reduction in array size after deletion
      }
    }
  };

  const loadPdf = () => {
    viewer?.load(documentPath, "");
  };

  return (
    <div>
      <div className='control-section'>
        <ButtonComponent onClick={loadPdf}>Load PDF</ButtonComponent>
        <ButtonComponent onClick={deleteFormField}>Delete All Form Fields</ButtonComponent>
        <PdfViewerComponent 
            ref={(scope) => { viewer = scope; }}
            id="container" 
            resourceUrl="https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib"
            style={{ 'height': '640px' }}
        >
            {/* Inject the necessary services */}
            <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
                               Print, TextSelection, TextSearch, FormFields, FormDesigner ]} />
        </PdfViewerComponent>
      </div>
    </div>
  );
}
export default App;

Key Features Used in the Code:

1. Form Designer Module: The formDesignerModule.deleteFormField method is used to remove form fields from the document.
2. Form Field Collection: The formFieldCollections array is used to access all form fields in the PDF, including those on non-rendered pages.

Sample:

You can find the full sample code in our GitHub repository

Conclusion:

I hope this article helped you learn on how to delete all form fields from document in React PDF Viewer.
You can refer to React PDF Viewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React PDF Viewer example PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!