HelpBot Assistant

How can I help you?

Import PDF Form Data into React PDF Viewer

25 Feb 20267 minutes to read

The PDF Viewer imports values into interactive form fields in the currently loaded PDF. Supported formats:

API to use

The sourceOrObject parameter accepts a file path/URL or a JavaScript object with field-value pairs when importing from an object.

NOTE

For a server-backed viewer set the serviceUrl before importing so the control can forward requests to the server.

Import FDF

import * as ReactDOM from 'react-dom/client';
import React, { useRef } from 'react';
import './index.css';
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  LinkAnnotation,
  ThumbnailView,
  BookmarkView,
  TextSelection,
  FormFields,
  FormDesigner,
  Inject,
  FormFieldDataFormat
} from '@syncfusion/ej2-react-pdfviewer';

function App() {
  const viewerRef = useRef(null);

  const importFdf = () => {
    // The file for importing should be accessible at the given path or as a file stream depending on your integration
    viewerRef.current?.importFormFields('File', FormFieldDataFormat.Fdf);
  };

  return (
    <div>
      <button id="importFdf" onClick={importFdf}>Import FDF</button>
      <PdfViewerComponent
        id="container"
        style=
        ref={viewerRef}
        documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
        // serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/" // Server-backed
        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Import XFDF

import * as ReactDOM from 'react-dom/client';
import React, { useRef } from 'react';
import './index.css';
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  LinkAnnotation,
  ThumbnailView,
  BookmarkView,
  TextSelection,
  FormFields,
  FormDesigner,
  Inject,
  FormFieldDataFormat
} from '@syncfusion/ej2-react-pdfviewer';

function App() {
  const viewerRef = useRef(null);

  const importXfdf = () => {
    // The file for importing should be accessible at the given path or as a file stream depending on your integration
    viewerRef.current?.importFormFields('File', FormFieldDataFormat.Xfdf);
  };

  return (
    <div>
      <button id="importXfdf" onClick={importXfdf}>Import XFDF</button>
      <PdfViewerComponent
        id="container"
        style=
        ref={viewerRef}
        documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
        // serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/" // Server-backed
        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Import JSON

import * as ReactDOM from 'react-dom/client';
import React, { useRef } from 'react';
import './index.css';
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  LinkAnnotation,
  ThumbnailView,
  BookmarkView,
  TextSelection,
  FormFields,
  FormDesigner,
  Inject,
  FormFieldDataFormat
} from '@syncfusion/ej2-react-pdfviewer';

function App() {
  const viewerRef = useRef(null);

  const importJson = () => {
    // The file for importing should be accessible at the given path or as a file stream depending on your integration
    viewerRef.current?.importFormFields('File', FormFieldDataFormat.Json);
  };

  return (
    <div>
      <button id="importJson" onClick={importJson}>Import JSON</button>
      <PdfViewerComponent
        id="container"
        style=
        ref={viewerRef}
        documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
        // serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/" // Server-backed
        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Common Use Cases

  • Pre-fill application forms from a database using JSON.
  • Migrate data from other PDF tools using FDF/XFDF.
  • Restore user progress saved locally or on the server.
  • Combine with validation to block print/download until required fields are completed.

View Sample on GitHub

See also