Skip to content

Commit 5724ef3

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
994681: Remove form fields and Export import in form Designer
1 parent c9c2001 commit 5724ef3

File tree

5 files changed

+410
-0
lines changed

5 files changed

+410
-0
lines changed

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
layout: post
3+
title: Remove form fields in the TypeScript PDF Viewer component | Syncfusion
4+
description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion TypeScript PDF Viewer component.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
---
9+
10+
# Remove form fields in TypeScript PDF Viewer control
11+
12+
The PDF Viewer component allows users to remove PDF form fields using the Form Designer UI and programmatically.
13+
14+
## Remove form fields using the UI
15+
16+
You can remove designed form fields directly from the Form Designer toolbar.
17+
18+
Steps:
19+
20+
1) Select the target form field on the page.
21+
2) Click the Delete Form Field icon on the Form Designer toolbar.
22+
3) Alternatively, press the `Delete key` after selecting one or more fields.
23+
24+
![Form Designer toolbar with Delete icon](../../images/ui-del-formfields.png)
25+
26+
## Remove form fields programmatically
27+
28+
Use the `deleteFormField` method to remove form fields programmatically. Retrieve the target field from the `formFieldCollections` property (by object or ID) and pass it to `deleteFormField`.
29+
30+
The following example adds three fields on document load (Textbox, Password, and Signature) and shows two ways to remove them using buttons.
31+
32+
```html
33+
<button id="deleteAllFields">Delete Form Fields</button>
34+
<button id="deleteById">Delete First Field By ID</button>
35+
<div id="PdfViewer" style="height:500px;width:100%"></div>
36+
```
37+
```ts
38+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
39+
TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer';
40+
41+
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
42+
TextSelection, Annotation, FormDesigner, FormFields);
43+
44+
const pdfviewer: PdfViewer = new PdfViewer({
45+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
46+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
47+
});
48+
49+
// Optional server-backed
50+
// pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
51+
52+
pdfviewer.appendTo('#PdfViewer');
53+
54+
// Add form fields on document load
55+
pdfviewer.documentLoad = () => {
56+
pdfviewer.formDesignerModule.addFormField('Textbox', {
57+
name: 'First Name',
58+
bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
59+
} as TextFieldSettings);
60+
61+
pdfviewer.formDesignerModule.addFormField('Password', {
62+
name: 'Password',
63+
bounds: { X: 338, Y: 229, Width: 150, Height: 24 }
64+
} as TextFieldSettings);
65+
66+
pdfviewer.formDesignerModule.addFormField('SignatureField', {
67+
name: 'Sign Here',
68+
bounds: { X: 146, Y: 280, Width: 200, Height: 43 }
69+
} as SignatureFieldSettings);
70+
};
71+
72+
// Delete all added form fields on button click
73+
(document.getElementById('deleteAllFields') as HTMLButtonElement).addEventListener('click', () => {
74+
const fields = [...pdfviewer.formFieldCollections]; // clone to avoid mutation issues
75+
fields.forEach(field => pdfviewer.formDesignerModule.deleteFormField(field));
76+
});
77+
78+
// Delete by ID on button click (example uses the first field's ID)
79+
(document.getElementById('deleteById') as HTMLButtonElement).addEventListener('click', () => {
80+
if (pdfviewer.formFieldCollections.length > 0) {
81+
const id = pdfviewer.formFieldCollections[0].id;
82+
if (id) {
83+
pdfviewer.formDesignerModule.deleteFormField(id);
84+
}
85+
}
86+
});
87+
```
88+
89+
N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file:
90+
`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';`

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

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
layout: post
3+
title: Export form data in the TypeScript PDF Viewer component | Syncfusion
4+
description: Learn how to export PDF form field data (FDF, XFDF, JSON, and as an object) using the Syncfusion TypeScript PDF Viewer component.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
---
9+
10+
# Export form data from PDF
11+
12+
The PDF Viewer provides APIs to export the values of interactive form fields from the loaded PDF. You can export to FDF, XFDF, JSON, or as a JavaScript object for custom processing.
13+
14+
Supported APIs:
15+
- exportFormFields(pathOrFileName, format)
16+
- exportFormFieldsAsObject(format) → Promise<object>
17+
18+
Note: When using the server-backed viewer, set serviceUrl before exporting.
19+
20+
## Export as FDF
21+
22+
```html
23+
<button id="exportFdf">Export FDF</button>
24+
```
25+
```ts
26+
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
27+
28+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
29+
30+
const viewer = new PdfViewer({
31+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
32+
// serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
33+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
34+
});
35+
viewer.appendTo('#PdfViewer');
36+
37+
document.getElementById('exportFdf')!.addEventListener('click', () => {
38+
// Data must be the desired path or file name for the exported document.
39+
viewer.exportFormFields('ExportedData', FormFieldDataFormat.Fdf);
40+
});
41+
```
42+
43+
## Export as XFDF
44+
45+
```ts
46+
<button id="exportXfdf">Export XFDF</button>
47+
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
48+
49+
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
50+
51+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection);
52+
53+
const viewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
54+
viewer.appendTo('#pdfViewer');
55+
56+
document.getElementById('exportXfdf')!.addEventListener('click', () => {
57+
viewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
58+
});
59+
```
60+
61+
## Export as JSON
62+
63+
```ts
64+
<button id="exportJson">Export JSON</button>
65+
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
66+
67+
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
68+
69+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection);
70+
71+
const viewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
72+
viewer.appendTo('#pdfViewer');
73+
74+
document.getElementById('exportJson')!.addEventListener('click', () => {
75+
viewer.exportFormFields('FormData', FormFieldDataFormat.Json);
76+
});
77+
```
78+
79+
## Export as Object
80+
81+
Export the form data to a JavaScript object for custom persistence (database, API, or client storage).
82+
83+
```ts
84+
<button id="exportObj">Export Object</button>
85+
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
86+
87+
import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
88+
89+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection);
90+
91+
const viewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
92+
viewer.appendTo('#pdfViewer');
93+
94+
let exportedData: object | undefined;
95+
document.getElementById('exportObj')!.addEventListener('click', () => {
96+
viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => {
97+
exportedData = data; // Save or send to server
98+
console.log('Exported object:', exportedData);
99+
});
100+
101+
// Alternative formats:
102+
// viewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(...)
103+
// viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(...)
104+
});
105+
```
106+
107+
## Common use cases
108+
109+
- Persist user-entered data to your server without modifying the original PDF.
110+
- Export as JSON for easy integration with REST APIs.
111+
- Export as FDF/XFDF for interoperability with other PDF tools.
112+
- Export as object to combine with your app state and store securely.
113+
- Automate exports after validation using validateFormFields.

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
layout: post
3+
title: Import/Export events in the TypeScript PDF Viewer component | Syncfusion
4+
description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion TypeScript PDF Viewer component.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
---
9+
10+
# Import/Export events
11+
12+
You can listen to lifecycle events around import and export operations to validate, customize, or log actions.
13+
14+
Commonly used events:
15+
- validateFormFields: Triggered during download/print when enableFormFieldsValidation is true and required fields are not filled.
16+
- documentLoad: Useful for wiring custom logic right after a document is loaded.
17+
18+
Note: Set enableFormFieldsValidation = true to enforce validation before print/download.
19+
20+
## Validate before export/print
21+
22+
The following shows how to capture non-filled fields and prevent export/print until the user completes them.
23+
24+
```ts
25+
<div>
26+
<button id="exportJson">Export JSON</button>
27+
<button id="printPdf">Print</button>
28+
</div>
29+
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
30+
31+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormDesigner, FormFields, FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
32+
33+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormDesigner, FormFields);
34+
35+
const viewer = new PdfViewer({
36+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'
37+
});
38+
viewer.appendTo('#pdfViewer');
39+
40+
viewer.enableFormFieldsValidation = true;
41+
viewer.validateFormFields = (args: any) => {
42+
const nonfilled = args.nonFillableFields || [];
43+
if (nonfilled.length) {
44+
// Show your UI and stop further action
45+
alert('Please fill required fields before continuing. Missing: ' + nonfilled.map((f: any) => f.name).join(', '));
46+
// args.isFormFieldValid = false; // Optional: explicitly indicate invalid
47+
}
48+
};
49+
50+
document.getElementById('exportJson')!.addEventListener('click', () => {
51+
viewer.exportFormFields('FormData', FormFieldDataFormat.Json);
52+
});
53+
54+
document.getElementById('printPdf')!.addEventListener('click', () => {
55+
viewer.print.print();
56+
});
57+
```
58+
59+
## Log import/export completion
60+
61+
Hook your own UI or analytics around import and export actions.
62+
63+
```ts
64+
<button id="importJson">Import JSON</button>
65+
<button id="exportFdf">Export FDF</button>
66+
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
67+
68+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
69+
70+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection);
71+
72+
const viewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
73+
viewer.appendTo('#pdfViewer');
74+
75+
// Example wrappers to log completion
76+
function importJson() {
77+
viewer.importFormFields('File', FormFieldDataFormat.Json);
78+
console.log('Import requested (JSON)');
79+
}
80+
81+
function exportFdf() {
82+
viewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
83+
console.log('Export requested (FDF)');
84+
}
85+
86+
document.getElementById('importJson')!.addEventListener('click', importJson);
87+
88+
document.getElementById('exportFdf')!.addEventListener('click', exportFdf);
89+
```
90+
91+
Tip: You can also use documentLoad to inject default values or layout form fields programmatically before users start filling.

0 commit comments

Comments
 (0)