994681: Updated Import Export Form Fields

Author: SF4524LogeshKumar

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

@@ -9,16 +9,21 @@ documentation: ug
 
 # Export form data from PDF
 
-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.
+The PDF Viewer component supports exporting and importing form field data using the importFormFields, exportFormFields, and exportFormFieldsAsObject methods in the following formats:
 
-Supported APIs:
-- exportFormFields(pathOrFileName, format)
-- exportFormFieldsAsObject(format) → Promise<object>
-
-Note: When using the server-backed viewer, set serviceUrl before exporting.
+- FDF
+- XFDF
+- JSON
 
 ## Export as FDF
 
+Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters:
+
+* 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.
+* The second parameter should be the format type of the form data.
+
+The following example exports and imports form field data as FDF.
+
 ```html
 <button id="exportFdf">Export FDF</button>
 ```
@@ -32,7 +37,7 @@ const viewer = new PdfViewer({
   // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
   resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
 });
-viewer.appendTo('#PdfViewer');
+viewer.appendTo('#pdfViewer');
 
 document.getElementById('exportFdf')!.addEventListener('click', () => {
   // Data must be the desired path or file name for the exported document.
@@ -42,53 +47,75 @@ document.getElementById('exportFdf')!.addEventListener('click', () => {
 
 ## Export as XFDF
 
-```ts
+The following example exports form field data as XFDF.
+
+```html
 <button id="exportXfdf">Export XFDF</button>
-<div id="pdfViewer" style="height: 640px; width: 100%"></div>
+```
 
-import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
 
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection);
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
 
-const viewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
+const viewer = new PdfViewer({
+  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.1.23/dist/ej2-pdfviewer-lib"
+});
 viewer.appendTo('#pdfViewer');
 
 document.getElementById('exportXfdf')!.addEventListener('click', () => {
+  // Data must be the desired path or file name for the exported document.
   viewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
 });
 ```
 
 ## Export as JSON
 
-```ts
+The following example exports form field data as JSON.
+
+```html
 <button id="exportJson">Export JSON</button>
-<div id="pdfViewer" style="height: 640px; width: 100%"></div>
+```
 
-import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
 
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection);
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
 
-const viewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
+const viewer = new PdfViewer({
+  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.1.23/dist/ej2-pdfviewer-lib"
+});
 viewer.appendTo('#pdfViewer');
 
 document.getElementById('exportJson')!.addEventListener('click', () => {
+  // Data must be the desired path or file name for the exported document.
   viewer.exportFormFields('FormData', FormFieldDataFormat.Json);
 });
 ```
 
 ## Export as Object
 
-Export the form data to a JavaScript object for custom persistence (database, API, or client storage).
+Export the form data to a JavaScript object for custom persistence (database, API, or client storage). 
+The following example exports and imports form field data as Object.
 
-```ts
+```html
 <button id="exportObj">Export Object</button>
-<div id="pdfViewer" style="height: 640px; width: 100%"></div>
+```
 
-import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
 
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection);
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
 
-const viewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
+const viewer = new PdfViewer({
+  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.1.23/dist/ej2-pdfviewer-lib"
+});
 viewer.appendTo('#pdfViewer');
 
 let exportedData: object | undefined;

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

@@ -9,7 +9,11 @@ documentation: ug
 
 # Import form data into PDF
 
-The PDF Viewer provides APIs to import interactive form field values into the currently loaded PDF. You can import from FDF, XFDF, JSON, or a JavaScript object exported earlier.
+The PDF Viewer provides APIs to import interactive form field values into the currently loaded PDF. You can import from the following formats:
+
+- FDF
+- XFDF
+- JSON
 
 Supported API:
 - importFormFields(sourceOrObject, format)
@@ -18,17 +22,19 @@ Note: When using the server-backed viewer, set serviceUrl before importing.
 
 ## Import as FDF
 
-```ts
+```html
 <button id="importFdf">Import FDF</button>
 <div id="pdfViewer" style="height: 640px; width: 100%"></div>
+```
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
 
-import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection);
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
 
 const viewer = new PdfViewer({
-  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'
+  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.1.23/dist/ej2-pdfviewer-lib"
 });
 viewer.appendTo('#pdfViewer');
 
@@ -40,36 +46,48 @@ document.getElementById('importFdf')!.addEventListener('click', () => {
 
 ## Import as XFDF
 
-```ts
+```html
 <button id="importXfdf">Import XFDF</button>
 <div id="pdfViewer" style="height: 640px; width: 100%"></div>
+```
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
 
-import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection);
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
 
-const viewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
+const viewer = new PdfViewer({
+  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.1.23/dist/ej2-pdfviewer-lib"
+});
 viewer.appendTo('#pdfViewer');
 
 document.getElementById('importXfdf')!.addEventListener('click', () => {
+  // The file for importing should be accessible at the given path or as a file stream depending on your integration
   viewer.importFormFields('File', FormFieldDataFormat.Xfdf);
 });
 ```
 
 ## Import as JSON
 
-```ts
+```html
 <button id="importJson">Import JSON</button>
 <div id="pdfViewer" style="height: 640px; width: 100%"></div>
+```
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
 
-import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection);
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
 
-const viewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
+const viewer = new PdfViewer({
+  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.1.23/dist/ej2-pdfviewer-lib"
+});
 viewer.appendTo('#pdfViewer');
 
 document.getElementById('importJson')!.addEventListener('click', () => {
+  // The file for importing should be accessible at the given path or as a file stream depending on your integration
   viewer.importFormFields('File', FormFieldDataFormat.Json);
 });
 ```
@@ -78,16 +96,21 @@ document.getElementById('importJson')!.addEventListener('click', () => {
 
 Import data previously exported with exportFormFieldsAsObject. Useful for client-side roundtrips without writing a file.
 
-```ts
+```html
 <button id="exportDataAsObject">Export Object</button>
 <button id="importData">Import Data</button>
 <div id="pdfViewer" style="height: 640px; width: 100%"></div>
+```
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
 
-import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection);
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
 
-const viewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
+const viewer = new PdfViewer({
+  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.1.23/dist/ej2-pdfviewer-lib"
+});
 viewer.appendTo('#pdfViewer');
 
 let exportedData: object | undefined;
@@ -100,6 +123,7 @@ document.getElementById('exportDataAsObject')!.addEventListener('click', () => {
 
 document.getElementById('importData')!.addEventListener('click', () => {
   if (exportedData) {
+    // Import the previously exported object data
     viewer.importFormFields(exportedData, FormFieldDataFormat.Fdf);
   }
   // Alternatives: