Skip to content

Commit 8e2ceab

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1008615: Updated Forms UG Revamp Core Part II
1 parent 8865747 commit 8e2ceab

5 files changed

Lines changed: 443 additions & 14 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -196,16 +196,36 @@
196196
</ul>
197197
</li>
198198
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/interaction-mode">Interaction Mode</a></li>
199-
<li>Form Designer
199+
<li>Forms
200200
<ul>
201-
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/form-designer/create-programmatically">Create form fields programmatically</a></li>
202-
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/form-designer/create-with-user-interface-interaction">Create form fields with UI interaction</a></li>
203-
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/toolbar-customization/form-designer-toolbar">Form Designer Toolbar</a></li>
204-
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/form-designer/form-field-events">Form Field events</a></li>
201+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/overview">Overview</a></li>
202+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/form-filling">Fill form fields</a></li>
203+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/form-designer">Form Designer and Toolbar</a></li>
204+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/overview-create-forms">Create, Edit, Style and Remove Form Fields</a>
205+
<ul>
206+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/manage-form-fields/create-form-fields">Create form fields</a></li>
207+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/manage-form-fields/modify-form-fields">Modify form fields</a></li>
208+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/manage-form-fields/customize-form-fields">Customize form fields</a></li>
209+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/manage-form-fields/move-resize-form-fields">Move and Resize form fields</a></li>
210+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/manage-form-fields/remove-form-fields">Remove form fields</a></li>
211+
</ul>
212+
</li>
213+
<li>Import/Export form data
214+
<ul>
215+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/import-export-form-fields/import-form-fields">Import form data</a></li>
216+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/import-export-form-fields/export-form-fields">Export form data</a></li>
217+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/import-export-form-fields/import-export-events">Import/Export events</a></li>
218+
</ul>
219+
</li>
220+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/custom-data">Add custom data in form fields</a></li>
221+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/group-form-fields">Grouping form fields</a></li>
222+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/form-constrain">Form Field Flags</a></li>
223+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/form-validation">Form Validation</a></li>
205224
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/how-to/custom-fonts">Custom fonts</a></li>
225+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/form-field-events">Form Field events</a></li>
226+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/form-fields-api">APIs</a></li>
206227
</ul>
207228
</li>
208-
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/form-filling">Form Filling</a></li>
209229
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/organize-pdf">Organize Pages</a>
210230
<ul>
211231
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/organize-pages/overview">Overview</a></li>

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/export-form-fields.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
---
2+
layout: post
3+
title: Export form data in the ASP.NET Core PDF Viewer component | Syncfusion
4+
description: Learn how to export PDF form field data (FDF, XFDF, JSON, and as an object) using the Syncfusion ASP.NET Core PDF Viewer component.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
---
9+
10+
# Export PDF Form Data from ASP.NET Core PDF Viewer
11+
12+
The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:
13+
14+
- [FDF](#export-as-fdf)
15+
- [XFDF](#export-as-xfdf)
16+
- [JSON](#export-as-json)
17+
- [JavaScript Object](#export-as-object) (for custom persistence)
18+
19+
## Available methods
20+
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.
24+
25+
## How to export
26+
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.
31+
32+
{% tabs %}
33+
{% highlight cshtml tabtitle="Standalone" %}
34+
<button id="exportFdf">Export FDF</button>
35+
<div class="text-center">
36+
<ejs-pdfviewer id="pdfviewer" style="height:640px; width:100%" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
37+
</ejs-pdfviewer>
38+
</div>
39+
40+
<script type="text/javascript">
41+
document.addEventListener('DOMContentLoaded', function () {
42+
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
43+
document.getElementById('exportFdf').addEventListener('click', function () {
44+
if (!pdfviewer) { console.warn('PDF Viewer not ready'); return; }
45+
// Destination is optional; if omitted the browser will prompt.
46+
pdfviewer.exportFormFields('FormData', 'Fdf');
47+
});
48+
});
49+
</script>
50+
{% endhighlight %}
51+
{% endtabs %}
52+
53+
### Export as XFDF
54+
The following example exports form field data as XFDF.
55+
56+
{% tabs %}
57+
{% highlight cshtml tabtitle="Standalone" %}
58+
<div class="text-center">
59+
<ejs-pdfviewer id="pdfviewer" style="height:640px; width:100%" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
60+
</ejs-pdfviewer>
61+
</div>
62+
63+
<button id="exportXfdf">Export XFDF</button>
64+
65+
<script type="text/javascript">
66+
document.addEventListener('DOMContentLoaded', function () {
67+
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
68+
document.getElementById('exportXfdf').addEventListener('click', function () {
69+
if (!pdfviewer) { console.warn('PDF Viewer not ready'); return; }
70+
pdfviewer.exportFormFields('FormData', 'Xfdf');
71+
});
72+
});
73+
</script>
74+
{% endhighlight %}
75+
{% endtabs %}
76+
77+
### Export as JSON
78+
The following example exports form field data as JSON.
79+
80+
{% tabs %}
81+
{% highlight cshtml tabtitle="Standalone" %}
82+
<div class="text-center">
83+
<ejs-pdfviewer id="pdfviewer" style="height:640px; width:100%" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
84+
</ejs-pdfviewer>
85+
</div>
86+
87+
<button id="exportJson">Export JSON</button>
88+
89+
<script type="text/javascript">
90+
document.addEventListener('DOMContentLoaded', function () {
91+
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
92+
document.getElementById('exportJson').addEventListener('click', function () {
93+
if (!pdfviewer) { console.warn('PDF Viewer not ready'); return; }
94+
pdfviewer.exportFormFields('FormData', 'Json');
95+
});
96+
});
97+
</script>
98+
{% endhighlight %}
99+
{% endtabs %}
100+
101+
### Export as Object
102+
103+
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.
104+
105+
{% tabs %}
106+
{% highlight cshtml tabtitle="Standalone" %}
107+
<div class="text-center">
108+
<ejs-pdfviewer id="pdfviewer" style="height:640px; width:100%" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
109+
</ejs-pdfviewer>
110+
</div>
111+
112+
<button id="exportObj">Export Object</button>
113+
114+
<script type="text/javascript">
115+
document.addEventListener('DOMContentLoaded', function () {
116+
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
117+
var exportedData;
118+
document.getElementById('exportObj').addEventListener('click', function () {
119+
if (!pdfviewer) { console.warn('PDF Viewer not ready'); return; }
120+
pdfviewer.exportFormFieldsAsObject('Fdf').then(function (data) {
121+
exportedData = data; // Persist or send to server
122+
console.log('Exported object:', exportedData);
123+
});
124+
// Alternatives:
125+
// pdfviewer.exportFormFieldsAsObject('Xfdf').then(...)
126+
// pdfviewer.exportFormFieldsAsObject('Json').then(...)
127+
});
128+
});
129+
</script>
130+
{% endhighlight %}
131+
{% endtabs %}
132+
133+
## Common Use Cases
134+
135+
- Save user-entered data to your server without altering the original PDF.
136+
- Export as JSON for REST API integration.
137+
- Export as FDF/XFDF for compatibility with other PDF tools.
138+
- Export as Object to merge with app state or store securely.
139+
- Automate exports after [validation](../form-validation) using [validateFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields)
140+
141+
[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples)
142+
143+
## See also
144+
145+
- [Form Designer overview](../overview)
146+
- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
147+
- [Import form fields](./import-form-fields)
148+
- [Import Export Events](./import-export-events)
149+
- [Create form fields](../overview-create-forms)
150+
- [Group form fields](../group-form-fields)
151+
- [Form validation](../form-validation)
152+
- [Add custom data to form fields](../custom-data)
153+
- [Form fields API](../form-fields-api)

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-export-events.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
layout: post
3+
title: Import/Export events in the ASP.NET Core PDF Viewer | Syncfusion
4+
description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion ASP.NET Core PDF Viewer component.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
---
9+
10+
# PDF Form Import and Export Events in ASP.NET Core
11+
12+
Import/Export events let you **track and customize the entire life cycle** 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.
18+
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).
20+
21+
## Import Events
22+
- [importStart](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportStart) — Fires when an import begins.
23+
- [importSuccess](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportSuccess) — Fires when form fields are successfully imported.
24+
- [importFailed](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportFailed) — Fires if the import fails.
25+
26+
**Example: Handle Import Events**
27+
28+
{% tabs %}
29+
{% highlight cshtml tabtitle="Standalone" %}
30+
<div class="text-center">
31+
<ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
32+
</ejs-pdfviewer>
33+
</div>
34+
35+
<script type="text/javascript">
36+
document.addEventListener('DOMContentLoaded', function () {
37+
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
38+
if (!pdfviewer) { console.warn('PDF Viewer not ready'); return; }
39+
pdfviewer.importStart = function (args) {
40+
console.log('Import started', args);
41+
// e.g. show spinner, validate inputs
42+
};
43+
pdfviewer.importSuccess = function (args) {
44+
console.log('Import success', args);
45+
// e.g. hide spinner, show toast
46+
};
47+
pdfviewer.importFailed = function (args) {
48+
console.error('Import failed', args);
49+
// e.g. show error dialog
50+
};
51+
});
52+
</script>
53+
{% endhighlight %}
54+
{% endtabs %}
55+
56+
## Export Events
57+
- [exportStart](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportStart) — Fires when an export begins.
58+
- [exportSuccess](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportSuccess) — Fires when form fields are successfully exported.
59+
- [exportFailed](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportFailed) — Fires if the export fails.
60+
61+
**Example: Handle Export Events**
62+
63+
{% tabs %}
64+
{% highlight cshtml tabtitle="Standalone" %}
65+
<div class="text-center">
66+
<ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
67+
</ejs-pdfviewer>
68+
</div>
69+
70+
<script type="text/javascript">
71+
document.addEventListener('DOMContentLoaded', function () {
72+
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
73+
if (!pdfviewer) { console.warn('PDF Viewer not ready'); return; }
74+
pdfviewer.exportStart = function (args) {
75+
console.log('Export started', args);
76+
// e.g. disable export UI
77+
};
78+
pdfviewer.exportSuccess = function (args) {
79+
console.log('Export success', args);
80+
// e.g. enable UI, provide download link
81+
};
82+
pdfviewer.exportFailed = function (args) {
83+
console.error('Export failed', args);
84+
// e.g. re-enable UI, notify user
85+
};
86+
});
87+
</script>
88+
{% endhighlight %}
89+
{% endtabs %}
90+
91+
## Key Notes
92+
- importStart, importSuccess, importFailed cover the full import life cycle.
93+
- exportStart, exportSuccess, exportFailed cover the full export life cycle.
94+
95+
## See also
96+
97+
- [Form Designer overview](../overview)
98+
- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
99+
- [Create form fields](../overview-create-forms)
100+
- [Group form fields](../group-form-fields)
101+
- [Form validation](../form-validation)
102+
- [Add custom data to form fields](../custom-data)
103+
- [Import form fields](./import-form-fields)
104+
- [Export form fields](./export-form-fields)
105+
- [Form validation](../form-validation)
106+
- [Form fields API](../form-fields-api)
107+
- [Form fields API](../form-fields-api)

0 commit comments

Comments
 (0)