Skip to content

Commit f31226f

Browse files
sameerkhan001sameerkhan001
committed
Merge branch 'hotfix/hotfix-v33.1.44' of https://github.com/syncfusion-content/document-processing-docs into 1018565
2 parents 39f0521 + 6518763 commit f31226f

File tree

473 files changed

+2421
-2367
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

473 files changed

+2421
-2367
lines changed

‎Document-Processing-toc.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -818,8 +818,12 @@
818818
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/form-constrain">Form Field Flags</a></li>
819819
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/form-validation">Form Validation</a></li>
820820
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/custom-fonts">Custom fonts</a></li>
821+
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/form-handling-best-practices">PDF Form Handling Best Practices</a></li>
821822
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/form-field-events">Form Field events</a></li>
822823
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/form-fields-api">APIs</a></li>
824+
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/flatten-form-fields">Flatten form fields</a></li>
825+
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/read-form-field-values">Read form fields</a></li>
826+
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/submit-form-data">Submit form data</a></li>
823827
</ul>
824828
</li>
825829
<li><a href="/document-processing/pdf/pdf-viewer/angular/organize-pdf">Organize Pages</a>

‎Document-Processing/PDF/PDF-Viewer/angular/forms/flatten-form-fields.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
layout: post
3+
title: Flatten PDF form fields in Angular PDF Viewer | Syncfusion
4+
description: Learn how to flatten interactive PDF form fields before download or save-as in EJ2 Angular PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Flatten PDF form fields in Angular
12+
13+
## Overview
14+
15+
Flattening PDF forms converts interactive fields such as textboxes, dropdowns, checkboxes, signatures, etc., into non‑editable page content. Use this when you want to protect filled data, finalize a document, or prepare it for secure sharing.
16+
17+
## Prerequisites
18+
19+
- EJ2 Angular PDF Viewer installed and configured
20+
- Basic viewer setup completed with toolbar and page organizer services injected. For more information, see [getting started guide](../getting-started)
21+
22+
## Flatten forms before downloading PDF
23+
24+
1. Add a ViewChild to the [`PdfViewerComponent`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer) so you can access viewer APIs from event handlers.
25+
2. Intercept the download flow using [`downloadStart`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#downloadstart) and cancel the default flow.
26+
3. Retrieve the viewer's blob via [`saveAsBlob()`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#saveasblob) and convert the blob to base64.
27+
4. Use `PdfDocument` from Syncfusion PDF Library to open the document, set `field.flatten = true` for each form field, then save.
28+
5. For the flattening the form fields when downloading through *Save As* option in Page Organizer, repeat steps 2–4 by using [`pageOrganizerSaveAs`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#pageorganizersaveas) event.
29+
30+
## Complete example
31+
32+
{% tabs %}
33+
{% highlight ts tabtitle="Standalone" %}
34+
import { Component, ViewChild } from '@angular/core';
35+
import {
36+
PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
37+
ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
38+
PageOrganizer, Print, PageOrganizerSaveAsEventArgs, DownloadStartEventArgs
39+
} from '@syncfusion/ej2-angular-pdfviewer';
40+
import { PdfDocument, PdfField } from '@syncfusion/ej2-pdf';
41+
42+
@Component({
43+
selector: 'app-root',
44+
standalone: true,
45+
imports: [PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
46+
ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Print],
47+
template: `
48+
<div style="height: 640px">
49+
<ejs-pdfviewer
50+
#pdfViewer
51+
[documentPath]="'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf'"
52+
[resourceUrl]="'https://cdn.syncfusion.com/ej2/32.2.5/dist/ej2-pdfviewer-lib'"
53+
(downloadStart)="onDownloadStart($event)"
54+
(pageOrganizerSaveAs)="onPageOrganizerSaveAs($event)"
55+
>
56+
</ejs-pdfviewer>
57+
</div>
58+
`
59+
})
60+
export class AppComponent {
61+
@ViewChild('pdfViewer')
62+
public pdfViewer!: PdfViewerComponent;
63+
64+
blobToBase64(blob: Blob): Promise<string> {
65+
return new Promise((resolve, reject) => {
66+
const reader = new FileReader();
67+
reader.onerror = () => reject(reader.error);
68+
reader.onload = () => {
69+
const dataUrl: string = reader.result as string;
70+
const data: string = dataUrl.split(',')[1];
71+
resolve(data);
72+
};
73+
reader.readAsDataURL(blob);
74+
});
75+
}
76+
77+
flattenFormFields(data: string) {
78+
const document: PdfDocument = new PdfDocument(data);
79+
for (let index = 0; index < document.form.count; index++) {
80+
const field: PdfField = document.form.fieldAt(index);
81+
field.flatten = true;
82+
}
83+
// If both annotations and form fields needs to be flattened, use
84+
// document.flatten = true
85+
document.save(`${this.pdfViewer.fileName}.pdf`);
86+
document.destroy();
87+
}
88+
89+
async handleFlattening(): Promise<void> {
90+
const blob: Blob = await this.pdfViewer.saveAsBlob();
91+
const data: string = await this.blobToBase64(blob);
92+
this.flattenFormFields(data);
93+
}
94+
95+
onDownloadStart(args: DownloadStartEventArgs): void {
96+
args.cancel = true;
97+
this.handleFlattening();
98+
}
99+
100+
onPageOrganizerSaveAs(args: PageOrganizerSaveAsEventArgs): void {
101+
args.cancel = true;
102+
this.handleFlattening();
103+
}
104+
}
105+
{% endhighlight %}
106+
{% endtabs %}
107+
108+
## Expected result
109+
110+
- The downloaded or "Save As" PDF will contain the visible appearance of filled form fields as static, non-editable content.
111+
- Form fields will no longer be interactive or editable in common PDF readers.
112+
113+
## Troubleshooting
114+
115+
- If pdfViewer is null, ensure `#pdfViewer` is present and the component has mounted before invoking [`saveAsBlob()`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#saveasblob).
116+
- Missing [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl): If viewer resources are not reachable, set [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) to the correct CDN or local path for the ej2-pdfviewer-lib.
117+
118+
## Related topics
119+
120+
- [`downloadStart` event reference](../events#downloadstart)
121+
- [`pageOrganizerSaveAs` event reference](../events#pageorganizersaveas)
122+
- [Form Designer in Angular PDF Viewer](./form-designer)

‎Document-Processing/PDF/PDF-Viewer/angular/forms/form-designer.md‎

Lines changed: 34 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,14 @@ You can select, group or ungroup, reorder, and delete form fields as needed.
4343
**Save and Print Forms**
4444
Designed form fields can be saved into the PDF document and printed with their appearances.
4545

46+
## Form Designer with UI interaction
47+
48+
When [Form Designer mode](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [Angular PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/angular/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI provides a built-in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer.
49+
50+
![FormDesigner](../../javascript-es6/images/FormDesigner.gif)
51+
52+
For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) in Angular PDF Viewer documentation.
53+
4654
## Enable Form Designer
4755

4856
To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the `enableFormDesigner` property or API to enable or disable the Form Designer option in the main toolbar (set to `true` to enable). Note: the standalone examples below show `enableFormDesigner` set to `false`; change this to `true` to enable form design in those samples.
@@ -100,16 +108,6 @@ export class AppComponent implements OnInit {
100108
{% endhighlight %}
101109
{% endtabs %}
102110

103-
## Form Designer UI
104-
105-
When [Form Designer mode](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [Angular PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/angular/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI provides a built-in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer.
106-
107-
![FormDesigner](../../javascript-es6/images/FormDesigner.gif)
108-
109-
{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
110-
111-
For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) in Angular PDF Viewer documentation.
112-
113111
## Form Designer Toolbar
114112

115113
The **Form Designer toolbar** appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as:
@@ -123,183 +121,54 @@ The **Form Designer toolbar** appears at the top of the PDF Viewer and provides
123121
- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
124122
- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
125123

126-
Each toolbar item allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.
124+
#### Show or Hide the Built-in Form Designer Toolbar
127125

128-
![Adding Text Box](../../javascript-es6/images/AddTextBox.gif)
126+
The visibility of the Form Designer toolbar is controlled by the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) method. This method enables the application to display or hide the Form Designer tools based on requirements. Refer to the code example [here](../toolbar-customization/form-designer-toolbar#2-show-or-hide-form-designer-toolbar-at-runtime).
129127

130-
Use the following code snippet to show or hide the Form Designer by injecting the Form Designer module.
128+
- The Form Designer toolbar is shown when form design is required.
129+
- The toolbar can be hidden to provide a cleaner viewing experience.
131130

132-
{% tabs %}
133-
{% highlight ts tabtitle="Standalone" %}
134-
import { Component, OnInit } from '@angular/core';
135-
import {
136-
ToolbarService,
137-
MagnificationService,
138-
NavigationService,
139-
AnnotationService,
140-
TextSelectionService,
141-
TextSearchService,
142-
FormFieldsService,
143-
FormDesignerService,
144-
PdfViewerModule,
145-
} from '@syncfusion/ej2-angular-pdfviewer';
131+
#### Customize the Built-in Form Designer Toolbar
146132

147-
@Component({
148-
selector: 'app-root',
149-
standalone: true,
150-
imports: [PdfViewerModule],
151-
template: `
152-
<div class="content-wrapper">
153-
<ejs-pdfviewer
154-
id="pdfViewer"
155-
[resourceUrl]="resourceUrl"
156-
[documentPath]="document"
157-
[enableFormDesigner]="false"
158-
style="height: 640px; display: block;">
159-
</ejs-pdfviewer>
160-
</div>
161-
`,
162-
providers: [
163-
ToolbarService,
164-
MagnificationService,
165-
NavigationService,
166-
AnnotationService,
167-
TextSelectionService,
168-
TextSearchService,
169-
FormFieldsService,
170-
FormDesignerService,
171-
],
172-
})
173-
export class AppComponent implements OnInit {
174-
public document: string =
175-
'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
176-
public resourceUrl: string =
177-
'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
133+
The Form Designer toolbar can be customized by specifying the tools to display and arranging them in the required order using the [FormDesignerToolbarItems](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesignertoolbaritem) property.
178134

179-
ngOnInit(): void {}
180-
}
135+
This customization helps limit the available tools and simplify the user interface. A code example is available [here](../toolbar-customization/form-designer-toolbar#3-show-or-hide-form-designer-toolbar-items).
181136

182-
{% endhighlight %}
183-
{% endtabs %}
184-
185-
For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in Angular PDF Viewer documentation](./manage-form-fields/create-form-fields).
186-
187-
## Show or Hide the Built-in Form Designer Toolbar
188-
189-
You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) property. This allows the application to display or hide the Form Designer tools in the PDF Viewer based on user or workflow requirements.
190-
191-
**Use this property to:**
192-
- Show the Form Designer toolbar when form design is required
193-
- Hide the toolbar to provide a cleaner viewing experience
194-
195-
{% tabs %}
196-
{% highlight ts tabtitle="Standalone" %}
197-
import { Component, ViewChild } from '@angular/core';
198-
import { PdfViewerComponent, PdfViewerModule, ToolbarService, FormDesignerService, FormFieldsService } from '@syncfusion/ej2-angular-pdfviewer';
199-
200-
@Component({
201-
selector: 'app-root',
202-
standalone: true,
203-
imports: [PdfViewerModule],
204-
template: `
205-
<button (click)="showDesigner()">Show Form Designer Toolbar</button>
206-
<button (click)="hideDesigner()">Hide Form Designer Toolbar</button>
207-
208-
<ejs-pdfviewer #pdfViewer
209-
id="pdfViewer"
210-
[resourceUrl]="resourceUrl"
211-
[documentPath]="document"
212-
style="height: 640px; display:block;">
213-
</ejs-pdfviewer>
214-
`,
215-
providers: [ToolbarService, FormFieldsService, FormDesignerService],
216-
})
217-
export class AppComponent {
218-
@ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
219-
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
220-
public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
221-
222-
showDesigner(): void {
223-
if (this.pdfviewer) { this.pdfviewer.isFormDesignerToolbarVisible = true; }
224-
}
225-
hideDesigner(): void {
226-
if (this.pdfviewer) { this.pdfviewer.isFormDesignerToolbarVisible = false; }
227-
}
228-
}
229-
230-
{% endhighlight %}
231-
{% endtabs %}
137+
**Key Points**
138+
- Only the toolbar items listed are included, in the exact order specified.
139+
- Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.
232140

233-
## Customize the Built-in Form Designer Toolbar
141+
### Adding Form Fields
234142

235-
You can customize the Form Designer toolbar by specifying the tools to display and arranging them in the required order using the [FormDesignerToolbarItems](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesignertoolbaritem) property.
143+
Each toolbar item in form designer toolbar allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.
236144

237-
This customization helps you limit the available tools and simplify the user interface.
145+
![Adding a text box using the Form Designer toolbar](../../javascript-es6/images/AddTextBox.gif)
238146

239-
**Key Points**
240-
- Include only the toolbar items you need, in the exact order you specify.
241-
- Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.
147+
For more information about creating form fields in the PDF Viewer, refer to the [Form Creation in Angular PDF Viewer documentation](./manage-form-fields/create-form-fields#create-form-fields-using-the-form-designer-ui).
242148

243-
{% tabs %}
244-
{% highlight ts tabtitle="Standalone" %}
245-
import { Component } from '@angular/core';
246-
import { PdfViewerModule, ToolbarService, FormFieldsService, FormDesignerService } from '@syncfusion/ej2-angular-pdfviewer';
149+
### Move, Resize, and Edit Form Fields
247150

248-
@Component({
249-
selector: 'app-root',
250-
standalone: true,
251-
imports: [PdfViewerModule],
252-
template: `
253-
<ejs-pdfviewer
254-
id="pdfViewer"
255-
[resourceUrl]="resourceUrl"
256-
[documentPath]="document"
257-
[toolbarSettings]="toolbarSettings"
258-
style="height: 640px; display:block;">
259-
</ejs-pdfviewer>
260-
`,
261-
providers: [ToolbarService, FormFieldsService, FormDesignerService],
262-
})
263-
export class AppComponent {
264-
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
265-
public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
266-
public toolbarSettings: object = {
267-
formDesignerToolbarItems: [
268-
'TextboxTool',
269-
'PasswordTool',
270-
'CheckBoxTool',
271-
'RadioButtonTool',
272-
'DropdownTool',
273-
'ListboxTool',
274-
'DrawSignatureTool',
275-
'DeleteTool',
276-
],
277-
};
278-
}
151+
Fields can be moved, resized, and edited directly in the PDF Viewer using the Form Designer.
279152

280-
{% endhighlight %}
281-
{% endtabs %}
153+
- A field is moved by selecting it and dragging it to the required position.
282154

283-
## Move, Resize, and Edit Form Fields
155+
- Fields are resized using the handles displayed on the field boundary.
284156

285-
You can move, resize, and edit an existing form field directly in the PDF Viewer using the Form Designer.
157+
![Moveing and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif)
286158

287-
- Move a field by selecting it and dragging it to the required position.
159+
- Selecting a field opens the Form Field Properties popover, which allows modification of the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed.
160+
For more information, see Editing Form Fields
288161

289-
- Resize a field using the handles displayed on the field boundary.
162+
### Edit Form Field properties
290163

291-
![Moving and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif)
164+
The **Properties** panel lets you customize the styles of form fields. Open the panel by selecting the **Properties** option in a field's context menu.
292165

293-
- Edit a field by selecting it to open the Form Field Properties popover. The popover allows modification of the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed.
294-
For more information, see Editing Form Fields.
166+
![Textbox style from UI showing font, color, and border settings](../../javascript-es6/images/ui-textbox-style.png)
295167

296-
## Deleting Form Fields
168+
### Deleting Form Fields
297169

298-
You can remove a form field from the PDF document by selecting the field and using one of the following methods:
299-
- Click the `Delete option` in the Form Designer UI.
300-
- Press the `Delete key` on the keyboard after selecting the form field.
170+
A form field is removed by selecting it and either clicking the `Delete` option in the Form Designer UI or pressing the `Delete` key on the keyboard. The selected form field and its associated widget annotation are permanently removed from the page.
301171

302-
The selected form field and its associated widget annotation are permanently removed from the page.
303172
For more information, see [Deleting Form Fields](./manage-form-fields/remove-form-fields)
304173

305174
## See Also

0 commit comments

Comments
 (0)