Skip to content

Commit fdb91c6

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
committed
1013392: Revamped forms module
1 parent ba937d1 commit fdb91c6

2 files changed

Lines changed: 159 additions & 202 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/export-form-fields.md‎

Lines changed: 99 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -9,194 +9,132 @@ documentation: ug
99

1010
# Export PDF Form Data from React PDF Viewer
1111

12-
The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:
12+
This guide shows concise, actionable steps to export PDF form field data for storage or integration. It covers:
1313

14-
- [FDF](#export-as-fdf)
15-
- [XFDF](#export-as-xfdf)
16-
- [JSON](#export-as-json)
17-
- [JavaScript Object](#export-as-object) (for custom persistence)
14+
- Exporting as [FDF](#3-export-as-fdf), [XFDF](#4-export-as-xfdf), and [JSON](#5-export-as-json) using `exportFormFields()`
15+
- Exporting as a [JavaScript object](#6-export-as-a-javascript-object) using `exportFormFieldsAsObject()`
1816

19-
## Available methods
17+
## Steps
2018

21-
- [exportFormFields](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportformfields)(destination?, format) — Exports data to a file in the specified format.
22-
- [exportFormFieldsAsObject](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportformfieldsasobject)(format) — Exports data as a JavaScript object for custom handling.
23-
- [importFormFields](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) — Import data back into the PDF.
19+
### 1. Configure the PDF Viewer
2420

25-
## How to export
21+
Install and import the viewer with required services.
2622

27-
Use [exportFormFields()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportformfields) with an optional destination path and the format type.
23+
{% highlight ts %}
24+
import {
25+
PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
26+
ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
27+
PageOrganizer, Inject, Print, FormFieldDataFormat
28+
} from '@syncfusion/ej2-react-pdfviewer';
29+
import { RefObject, useRef } from 'react';
30+
{% endhighlight %}
2831

29-
### Export as FDF
30-
The example below exports form field data as FDF.
32+
### 2. Initialize ref
3133

32-
{% tabs %}
33-
{% highlight js tabtitle="index.js" %}
34-
import * as ReactDOM from 'react-dom/client';
35-
import React, { useRef } from 'react';
36-
import './index.css';
37-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';
38-
39-
function App() {
40-
const viewerRef = useRef(null);
41-
42-
const onExportFdf = () => {
43-
// Data must be the desired path or file name for the exported document.
44-
viewerRef.current?.exportFormFields('ExportedData', FormFieldDataFormat.Fdf);
45-
};
46-
47-
return (
48-
<div className='control-section'>
49-
<button onClick={onExportFdf} id="exportFdf">Export FDF</button>
50-
<PdfViewerComponent
51-
ref={viewerRef}
52-
id="container"
53-
documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
54-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
55-
style={{ height: '680px' }}
56-
>
57-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, FormFields, FormDesigner]} />
58-
</PdfViewerComponent>
59-
</div>
60-
);
61-
}
34+
Initialize the viewer with a `ref` so you can call export methods.
6235

63-
const root = ReactDOM.createRoot(document.getElementById('sample'));
64-
root.render(<App />);
36+
{% highlight ts %}
37+
const viewerRef: RefObject<PdfViewerComponent> = useRef(null);
6538
{% endhighlight %}
66-
{% endtabs %}
6739

68-
### Export as XFDF
69-
The example below exports form field data as XFDF.
40+
### 3. Export as FDF
7041

71-
{% tabs %}
72-
{% highlight js tabtitle="index.js" %}
73-
import * as ReactDOM from 'react-dom/client';
74-
import React, { useRef } from 'react';
75-
import './index.css';
76-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';
77-
78-
function App() {
79-
const viewerRef = useRef(null);
80-
81-
const onExportXfdf = () => {
82-
// Data must be the desired path or file name for the exported document.
83-
viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
84-
};
85-
86-
return (
87-
<div className='control-section'>
88-
<button onClick={onExportXfdf} id="exportXfdf">Export XFDF</button>
89-
<PdfViewerComponent
90-
ref={viewerRef}
91-
id="container"
92-
documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
93-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
94-
style={{ height: '680px' }}
95-
>
96-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, FormFields, FormDesigner]} />
97-
</PdfViewerComponent>
98-
</div>
99-
);
100-
}
42+
Use `exportFormFields(destination?, FormFieldDataFormat.Fdf)` to download an FDF file.
10143

102-
const root = ReactDOM.createRoot(document.getElementById('sample'));
103-
root.render(<App />);
44+
{% highlight ts %}
45+
viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Fdf);
10446
{% endhighlight %}
105-
{% endtabs %}
10647

107-
### Export as JSON
108-
The example below exports form field data as JSON.
48+
### 4. Export as XFDF
10949

110-
{% tabs %}
111-
{% highlight js tabtitle="index.js" %}
112-
import * as ReactDOM from 'react-dom/client';
113-
import React, { useRef } from 'react';
114-
import './index.css';
115-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';
116-
117-
function App() {
118-
const viewerRef = useRef(null);
119-
120-
const onExportJson = () => {
121-
// Data must be the desired path or file name for the exported document.
122-
viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Json);
123-
};
124-
125-
return (
126-
<div className='control-section'>
127-
<button onClick={onExportJson} id="exportJson">Export JSON</button>
128-
<PdfViewerComponent
129-
ref={viewerRef}
130-
id="container"
131-
documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
132-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
133-
style={{ height: '680px' }}
134-
>
135-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, FormFields, FormDesigner]} />
136-
</PdfViewerComponent>
137-
</div>
138-
);
139-
}
50+
Use `FormFieldDataFormat.Xfdf` to export XFDF.
14051

141-
const root = ReactDOM.createRoot(document.getElementById('sample'));
142-
root.render(<App />);
52+
{% highlight ts %}
53+
viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
14354
{% endhighlight %}
144-
{% endtabs %}
14555

146-
### Export as Object
56+
### 5. Export as JSON
14757

148-
Use [exportFormFieldsAsObject()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportformfieldsasobject) to obtain form data as a JavaScript object for database or API integration.
58+
Use `FormFieldDataFormat.Json` to export form data as a JSON file.
59+
60+
{% highlight ts %}
61+
viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Json);
62+
{% endhighlight %}
63+
64+
### 6. Export as a JavaScript object
65+
66+
Use `exportFormFieldsAsObject(format)` to get data for API calls or storing in a database.
67+
68+
{% highlight ts %}
69+
const data = await viewerRef.current?.exportFormFieldsAsObject();
70+
{% endhighlight %}
71+
72+
## Complete example
73+
74+
The example below provides a single page with buttons to export in all supported formats. It uses the same imports shown above and is ready to run in a typical React app.
14975

15076
{% tabs %}
151-
{% highlight js tabtitle="index.js" %}
152-
import * as ReactDOM from 'react-dom/client';
153-
import React, { useRef } from 'react';
154-
import './index.css';
155-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';
156-
157-
function App() {
158-
const viewerRef = useRef(null);
159-
160-
const onExportObject = async () => {
161-
const data = await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Fdf);
162-
// Save or send to server
163-
console.log('Exported object:', data);
164-
165-
// Alternative formats:
166-
// await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf);
167-
// await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Json);
168-
};
169-
170-
return (
171-
<div className='control-section'>
172-
<button onClick={onExportObject} id="exportObj">Export Object</button>
173-
<PdfViewerComponent
174-
ref={viewerRef}
175-
id="container"
176-
documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
177-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
178-
style={{ height: '680px' }}
179-
>
180-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, FormFields, FormDesigner]} />
181-
</PdfViewerComponent>
182-
</div>
183-
);
77+
{% highlight js %}
78+
{% raw %}
79+
import {
80+
PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
81+
ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
82+
PageOrganizer, Inject, Print, FormFieldDataFormat
83+
} from '@syncfusion/ej2-react-pdfviewer';
84+
import { RefObject, useRef } from 'react';
85+
86+
export default function App() {
87+
const viewerRef: RefObject<PdfViewerComponent> = useRef(null);
88+
89+
const onExportFdf = () => {
90+
viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Fdf);
91+
};
92+
93+
const onExportXfdf = () => {
94+
viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
95+
};
96+
97+
const onExportJson = () => {
98+
viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Json);
99+
};
100+
101+
const onExportObject = async () => {
102+
const data = await viewerRef.current?.exportFormFieldsAsObject();
103+
console.log('Exported object:', data);
104+
};
105+
106+
return (
107+
<div className='control-section'>
108+
<div style={{ marginBottom: 12 }}>
109+
<button onClick={onExportFdf} id="exportFdf">Export FDF</button>
110+
<button onClick={onExportXfdf} id="exportXfdf">Export XFDF</button>
111+
<button onClick={onExportJson} id="exportJson">Export JSON</button>
112+
<button onClick={onExportObject} id="exportObj">Export Object</button>
113+
</div>
114+
<PdfViewerComponent
115+
ref={viewerRef}
116+
id="container"
117+
documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
118+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
119+
style={{ height: '680px' }}
120+
>
121+
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, FormFields, FormDesigner, TextSearch, PageOrganizer, Print]} />
122+
</PdfViewerComponent>
123+
</div>
124+
);
184125
}
185-
186-
const root = ReactDOM.createRoot(document.getElementById('sample'));
187-
root.render(<App />);
126+
{% endraw %}
188127
{% endhighlight %}
189128
{% endtabs %}
190129

191-
## Common Use Cases
130+
[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
192131

193-
- Save user-entered data to your server without altering the original PDF.
194-
- Export as JSON for REST API integration.
195-
- Export as FDF/XFDF for compatibility with other PDF tools.
196-
- Export as Object to merge with app state or store securely.
197-
- Automate exports after [validation](../form-validation) using [validateFormFields()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#validateformfields)
132+
## Troubleshooting
198133

199-
[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
134+
- Ensure `FormFields` and `FormDesigner` services are injected when using form APIs.
135+
- Confirm `resourceUrl` points to the matching `ej2-pdfviewer-lib` version.
136+
- If exports fail in restrictive browsers, check popup/download settings and CORS for hosted endpoints.
137+
- For server-side persistence, use `exportFormFieldsAsObject()` and send the result to your API.
200138

201139
## See also
202140

0 commit comments

Comments
 (0)