Skip to content

Commit 6a54ccd

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1012852: Updated the Review Changes for Flatten and preprocess-pdf
1 parent 9848ade commit 6a54ccd

2 files changed

Lines changed: 221 additions & 2 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/react/annotation/flatten-annotation.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,11 @@ Flattening annotations permanently merges them into the PDF content. Once flatte
1414
- Useful for **secure sharing**, preventing modifications.
1515
- Ideal when **finalizing markup** before distribution.
1616

17-
## How to Flatten Annotations (React)
18-
Follow these steps to flatten annotations and form fields before saving the PDF.
17+
## How to Flatten Annotations
18+
19+
To flatten documents when they are uploaded/loaded into the viewer, see [Flatten on Load](../document-handling/preprocess-pdf#flatten-on-load).
20+
21+
Use the example below to flatten at export time (on download).
1922

2023
{% tabs %}
2124
{% highlight js tabtitle="Standalone" %}
@@ -104,6 +107,7 @@ root.render(<Default />);
104107
{% endhighlight %}
105108
{% endtabs %}
106109

110+
107111
## Notes
108112

109113
- Flattening applies to **all annotation types**: text markup, shapes, stamps, notes, ink, and form fields.

‎Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,221 @@ doc.annotations.flattenAllAnnotations();
7373
const bytes = await doc.save();
7474
```
7575

76+
### Flatten on Load
77+
78+
Use the following code-snippet, when you want uploaded PDFs to be flattened before they are loaded into the viewer.
79+
80+
{% tabs %}
81+
{% highlight js tabtitle="Standalone" %}
82+
{% raw %}
83+
import { createRoot } from 'react-dom/client';
84+
import './index.css';
85+
import * as React from 'react';
86+
import {
87+
PdfViewerComponent,
88+
Toolbar,
89+
Annotation,
90+
FormFields,
91+
Inject,
92+
Magnification,
93+
} from '@syncfusion/ej2-react-pdfviewer';
94+
import { PdfDocument, _encode } from '@syncfusion/ej2-pdf';
95+
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
96+
function Default() {
97+
let viewer;
98+
const openFile = {
99+
prefixIcon: 'e-icons e-folder',
100+
id: 'openPdf',
101+
tooltipText: 'Open File',
102+
align: 'left',
103+
};
104+
const extensions = '.pdf';
105+
const toolbarSettings = {
106+
showTooltip: true,
107+
toolbarItems: [
108+
openFile,
109+
'PageNavigationTool',
110+
'MagnificationTool',
111+
'PanTool',
112+
'SelectionTool',
113+
'SearchOption',
114+
'PrintOption',
115+
'UndoRedoTool',
116+
'AnnotationEditTool',
117+
'FormDesignerEditTool',
118+
'CommentTool',
119+
'SubmitForm',
120+
'DownloadOption',
121+
],
122+
};
123+
124+
function toolbarClick(args) {
125+
if (args.item && args.item.id === 'openPdf') {
126+
document
127+
.getElementsByClassName('e-file-select-wrap')[0]
128+
.querySelector('button')
129+
.click();
130+
}
131+
}
132+
function onSelect(args) {
133+
let validFiles = args.filesData;
134+
if (validFiles.length === 0) {
135+
args.cancel = true;
136+
return;
137+
}
138+
if (!extensions.includes(validFiles[0].type)) {
139+
args.cancel = true;
140+
return;
141+
}
142+
143+
let file = validFiles[0].rawFile;
144+
let reader = new FileReader();
145+
146+
reader.addEventListener('load', () => {
147+
let base64Data = reader.result;
148+
let pdf = base64Data.split(',')[1];
149+
const document = new PdfDocument(pdf);
150+
151+
//flatten the annotation and form fields
152+
document.flatten = true;
153+
154+
var flattened = document.save();
155+
//laod the flattened PDF in PDF Viewer
156+
viewer.load(flattened, null);
157+
});
158+
159+
reader.readAsDataURL(file);
160+
}
161+
return (
162+
<div>
163+
<div className="control-section">
164+
<div style={{ display: 'none' }}>
165+
<UploaderComponent
166+
id="fileUpload"
167+
type="file"
168+
allowedExtensions=".pdf"
169+
selected={onSelect}
170+
></UploaderComponent>
171+
</div>
172+
{/* Render the PDF Viewer */}
173+
<PdfViewerComponent
174+
ref={(scope) => {
175+
viewer = scope;
176+
}}
177+
id="container"
178+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
179+
resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
180+
enableAnnotation={true}
181+
enableFormFields={true}
182+
toolbarSettings={toolbarSettings}
183+
toolbarClick={toolbarClick}
184+
style={{ height: '640px' }}
185+
>
186+
<Inject services={[Toolbar, Annotation, FormFields, Magnification]} />
187+
</PdfViewerComponent>
188+
</div>
189+
</div>
190+
);
191+
}
192+
export default Default;
193+
194+
const root = createRoot(document.getElementById('sample'));
195+
root.render(<Default />);
196+
{% endraw %}
197+
{% endhighlight %}
198+
{% endtabs %}
199+
200+
### Flatten on Download
201+
202+
Use the following code-snippet to flatten all annotations and form fields at export time, then download the flattened PDF.
203+
204+
{% tabs %}
205+
{% highlight js tabtitle="Standalone" %}
206+
{% raw %}
207+
import { createRoot } from 'react-dom/client';
208+
import './index.css';
209+
import * as React from 'react';
210+
import {
211+
PdfViewerComponent,
212+
Toolbar,
213+
Magnification,
214+
Navigation,
215+
LinkAnnotation,
216+
BookmarkView,
217+
ThumbnailView,
218+
Print,
219+
TextSelection,
220+
TextSearch,
221+
Annotation,
222+
FormFields,
223+
FormDesigner,
224+
PageOrganizer,
225+
Inject,
226+
} from '@syncfusion/ej2-react-pdfviewer';
227+
import {
228+
PdfDocument
229+
} from '@syncfusion/ej2-pdf';
230+
231+
function Default() {
232+
let viewer;
233+
234+
const flattenPdf = () => {
235+
viewer.saveAsBlob().then((value) => {
236+
const reader = new FileReader();
237+
reader.onloadend = function () {
238+
const arrayBuffer = reader.result;
239+
const byteArray = new Uint8Array(arrayBuffer);
240+
const document = new PdfDocument(byteArray);
241+
// Flatten all annotations and form fields
242+
document.flatten = true;
243+
document.save('flattened.pdf');
244+
};
245+
reader.readAsArrayBuffer(value);
246+
});
247+
};
248+
249+
return (
250+
<div>
251+
<div className="control-section">
252+
<button onClick={flattenPdf}>Flatten and download PDF</button>
253+
254+
<PdfViewerComponent
255+
ref={(scope) => { viewer = scope; }}
256+
id="container"
257+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
258+
resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
259+
style={{ height: '640px' }}
260+
>
261+
<Inject
262+
services={[
263+
Toolbar,
264+
Magnification,
265+
Navigation,
266+
LinkAnnotation,
267+
BookmarkView,
268+
ThumbnailView,
269+
Print,
270+
TextSelection,
271+
TextSearch,
272+
Annotation,
273+
FormFields,
274+
FormDesigner,
275+
PageOrganizer,
276+
]}
277+
/>
278+
</PdfViewerComponent>
279+
</div>
280+
</div>
281+
);
282+
}
283+
export default Default;
284+
285+
const root = createRoot(document.getElementById('sample'));
286+
root.render(<Default />);
287+
{% endraw %}
288+
{% endhighlight %}
289+
{% endtabs %}
290+
76291
## Add Watermark or Stamp
77292
### UI-Level Stamps
78293
The PDF Viewer toolbar allows users to:

0 commit comments

Comments
 (0)