Skip to content

Commit e85186f

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1004880: Export Import Form Fields
1 parent 6569218 commit e85186f

4 files changed

Lines changed: 85 additions & 149 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md‎

Lines changed: 32 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,33 @@ control: PDF Viewer
77
documentation: ug
88
---
99

10-
# Export form data from PDF
10+
# Export PDF Form Data from TypeScript PDF Viewer
1111

12-
The PDF Viewer component supports exporting and importing form field data using the importFormFields, exportFormFields, and exportFormFieldsAsObject methods in the following formats:
12+
The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:
1313

1414
- [FDF](#export-as-fdf)
1515
- [XFDF](#export-as-xfdf)
1616
- [JSON](#export-as-json)
17+
- [JavaScript Object](#export-as-object) (for custom persistence)
1718

18-
## Export as FDF
19+
## Available methods
1920

20-
Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters:
21+
- [exportFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields)(destination?, format) — Exports data to a file in the specified format.
22+
- [exportFormFieldsAsObject](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject)(format) — Exports data as a JavaScript object for custom handling.
23+
- [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) — Import data back into the PDF.
2124

22-
* The first one must be the destination path for the exported data. If the path is not specified, it will ask for the location while exporting.
23-
* The second parameter should be the format type of the form data.
25+
## How to export
2426

25-
The following example exports and imports form field data as FDF.
27+
Use [exportFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields) with an optional destination path and the format type.
28+
29+
### Export as FDF
30+
The following example exports form field data as FDF.
2631

2732
```html
2833
<button id="exportFdf">Export FDF</button>
34+
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
2935
```
36+
3037
```ts
3138
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
3239

@@ -40,104 +47,70 @@ const viewer = new PdfViewer({
4047
viewer.appendTo('#pdfViewer');
4148

4249
document.getElementById('exportFdf')!.addEventListener('click', () => {
43-
// Data must be the desired path or file name for the exported document.
44-
viewer.exportFormFields('ExportedData', FormFieldDataFormat.Fdf);
50+
// Destination is optional; if omitted the browser will prompt.
51+
viewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
4552
});
4653
```
4754

48-
## Export as XFDF
49-
55+
### Export as XFDF
5056
The following example exports form field data as XFDF.
5157

5258
```html
5359
<button id="exportXfdf">Export XFDF</button>
5460
```
5561

5662
```ts
57-
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
58-
59-
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
60-
61-
const viewer = new PdfViewer({
62-
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
63-
// serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
64-
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
65-
});
66-
viewer.appendTo('#pdfViewer');
67-
63+
// ...same imports and viewer initialization as above...
6864
document.getElementById('exportXfdf')!.addEventListener('click', () => {
69-
// Data must be the desired path or file name for the exported document.
7065
viewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
7166
});
7267
```
7368

74-
## Export as JSON
75-
69+
### Export as JSON
7670
The following example exports form field data as JSON.
7771

7872
```html
7973
<button id="exportJson">Export JSON</button>
8074
```
8175

8276
```ts
83-
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
84-
85-
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
86-
87-
const viewer = new PdfViewer({
88-
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
89-
// serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
90-
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
91-
});
92-
viewer.appendTo('#pdfViewer');
93-
77+
// ...same imports and viewer initialization as above...
9478
document.getElementById('exportJson')!.addEventListener('click', () => {
95-
// Data must be the desired path or file name for the exported document.
9679
viewer.exportFormFields('FormData', FormFieldDataFormat.Json);
9780
});
9881
```
9982

100-
## Export as Object
83+
### Export as Object
10184

102-
Export the form data to a JavaScript object for custom persistence (database, API, or client storage).
103-
The following example exports and imports form field data as Object.
85+
Use [exportFormFieldsAsObject()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject) to obtain form data as a JavaScript object for database or API integration.
10486

10587
```html
10688
<button id="exportObj">Export Object</button>
10789
```
10890

10991
```ts
110-
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
111-
112-
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
113-
114-
const viewer = new PdfViewer({
115-
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
116-
// serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
117-
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
118-
});
119-
viewer.appendTo('#pdfViewer');
92+
// ...same imports and viewer initialization as above...
12093

12194
let exportedData: object | undefined;
12295
document.getElementById('exportObj')!.addEventListener('click', () => {
12396
viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => {
124-
exportedData = data; // Save or send to server
97+
exportedData = data; // Persist or send to server
12598
console.log('Exported object:', exportedData);
12699
});
127100

128-
// Alternative formats:
101+
// Alternatives:
129102
// viewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(...)
130103
// viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(...)
131104
});
132105
```
133106

134-
## Common use cases
107+
## Common Use Cases
135108

136-
- Persist user-entered data to your server without modifying the original PDF.
137-
- Export as JSON for easy integration with REST APIs.
138-
- Export as FDF/XFDF for interoperability with other PDF tools.
139-
- Export as object to combine with your app state and store securely.
140-
- Automate exports after [validation](../form-validation) using validateFormFields.
109+
- Save user-entered data to your server without altering the original PDF.
110+
- Export as JSON for REST API integration.
111+
- Export as FDF/XFDF for compatibility with other PDF tools.
112+
- Export as Object to merge with app state or store securely.
113+
- Automate exports after [validation](../form-validation) using [validateFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields)
141114

142115
[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
143116

@@ -147,9 +120,7 @@ document.getElementById('exportObj')!.addEventListener('click', () => {
147120
- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
148121
- [Import form fields](./import-formfields)
149122
- [Import Export Events](./import-export-events)
150-
- [Create form fields](../Create-edit-Style-del-formFields/create-formfields)
151-
- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields)
152-
- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields)
123+
- [Create form fields](../overview-create-forms)
153124
- [Group form fields](../group-formfields)
154125
- [Form validation](../form-validation)
155126
- [Add custom data to form fields](../custom-data)

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-export-events.md‎

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,64 +7,77 @@ control: PDF Viewer
77
documentation: ug
88
---
99

10-
# Import/Export events
10+
# PDF Form Import and Export Events in TypeScript
1111

12-
Import/Export events let you track and customize the full lifecycle of form field data flowing into and out of the PDF Viewer.
12+
Import/Export events let you **track and customize the entire lifecycle** of form data being imported into or exported from the PDF Viewer.
13+
Use these events to:
14+
- Validate inputs before processing.
15+
- Show progress indicators.
16+
- Log audit trails.
17+
- Block operations based on business rules.
1318

14-
Use them to validate inputs, show progress UI, log audit trails, or block operations based on your business rules. Each event exposes typed event-args (ImportStartEventArgs, ImportSuccessEventArgs, ImportFailureEventArgs, ExportStartEventArgs, ExportSuccessEventArgs, ExportFailureEventArgs) describing the operation context.
19+
Each event provides detailed context through typed event arguments such as [ImportStartEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importstarteventargs), [ImportSuccessEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importsuccesseventargs), [ImportFailureEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importfailureeventargs), [ExportStartEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportstarteventargs), [ExportSuccessEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportsuccesseventargs), and [ExportFailureEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportfailureeventargs).
1520

16-
Use these events to monitor and customize form field import/export operations.
21+
## Import Events
22+
- [importStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importstart) — Fires when an import begins.
23+
- [importSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importsuccess) — Fires when form fields are successfully imported.
24+
- [importFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importfailed) — Fires if the import fails.
1725

18-
## Import events
19-
- [importStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importstart): Triggers when an import operation starts.
20-
- [importSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importsuccess): Triggers when form fields are successfully imported.
21-
- [importFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importfailed): Triggers when importing form fields fails.
26+
**Example: Handle Import Events**
2227

23-
## Handle import events
2428
```ts
29+
// ...viewer initialization...
2530
viewer.importStart = (args: any) => {
2631
console.log('Import started', args);
32+
// e.g. show spinner, validate inputs
2733
};
2834
viewer.importSuccess = (args: any) => {
2935
console.log('Import success', args);
36+
// e.g. hide spinner, show toast
3037
};
3138
viewer.importFailed = (args: any) => {
3239
console.error('Import failed', args);
40+
// e.g. show error dialog
3341
};
3442
```
3543

36-
## Export events
37-
- [exportStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportstart): Triggers when an export operation starts.
38-
- [exportSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportsuccess): Triggers when form fields are successfully exported.
39-
- [exportFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportfailed): Triggers when exporting form fields fails.
44+
## Export Events
45+
- [exportStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportstart) — Fires when an export begins.
46+
- [exportSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportsuccess) — Fires when form fields are successfully exported.
47+
- [exportFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportfailed) — Fires if the export fails.
48+
49+
**Example: Handle Export Events**
4050

41-
## Handle export events
4251
```ts
52+
// ...viewer initialization...
4353
viewer.exportStart = (args: any) => {
4454
console.log('Export started', args);
55+
// e.g. disable export UI
4556
};
4657
viewer.exportSuccess = (args: any) => {
4758
console.log('Export success', args);
59+
// e.g. enable UI, provide download link
4860
};
4961
viewer.exportFailed = (args: any) => {
5062
console.error('Export failed', args);
63+
// e.g. re-enable UI, notify user
5164
};
5265
```
5366

54-
Notes:
55-
- importStart/importSuccess/importFailed cover the lifecycle of form field imports.
56-
- exportStart/exportSuccess/exportFailed cover the lifecycle of form field exports.
67+
## Key Notes
68+
- importStart, importSuccess, importFailed cover the full import lifecycle.
69+
- exportStart, exportSuccess, exportFailed cover the full export lifecycle.
5770

5871
## See also
5972

6073
- [Form Designer overview](../overview)
6174
- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
62-
- [Import form fields](./import-formfields)
63-
- [Import Export Events](./import-export-events)
64-
- [Create form fields](../Create-edit-Style-del-formFields/create-formfields)
65-
- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields)
66-
- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields)
75+
- [Create form fields](../overview-create-forms)
6776
- [Group form fields](../group-formfields)
6877
- [Form validation](../form-validation)
6978
- [Add custom data to form fields](../custom-data)
79+
- [Import form fields](./import-formfields)
80+
- [Export form fields](./export-formfields)
81+
- [Form validation](../form-validation)
82+
- [Form fields API](../formfields-api)
7083
- [Form fields API](../formfields-api)

0 commit comments

Comments
 (0)