Skip to content

Commit 905ad18

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1010724: Updated Document Handling and review changes
1 parent 5406eac commit 905ad18

4 files changed

Lines changed: 422 additions & 102 deletions

File tree

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

Lines changed: 16 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ The **Syncfusion PDF Viewer is fully optimized for these heavy workloads**, and
2222

2323
### Viewer Capability Highlights
2424
- **Smooth performance for PDFs up to 1 GB**
25-
- **Supports viewing files up to ~2 GB** depending on system capacity
25+
- **Supports viewing files up to ~2 GB**
2626
- **1 GB PDFs typically load within 5–6 seconds**
2727
- **Optimized incremental page loading** for faster interaction
2828

@@ -71,7 +71,7 @@ Blob loading is highly recommended for all PDFs above **200 MB**, especially whe
7171
The Syncfusion PDF Viewer is optimized to handle:
7272

7373
- **Up to 1 GB** → very smooth
74-
- **Up to ~2 GB** → supported based on system capability
74+
- **Up to ~2 GB**
7575

7676
This suits enterprise workflows involving large engineering drawings, client records, scanned books, and multi‑page financial reports.
7777

@@ -100,12 +100,6 @@ If these features are not required in your application:
100100
- Disable them to reduce background tasks
101101
- Improve page rendering speed
102102
- Provide a smoother experience for large documents
103-
104-
#### Example (remove text search & selection)
105-
```tsx
106-
<Inject services={[Toolbar, Magnification, Navigation, Print]} />
107-
```
108-
109103
---
110104

111105
#### 3.2 Thumbnail View & Organize Pages
@@ -124,6 +118,11 @@ If thumbnails or page reordering are not essential:
124118
- Reduce memory usage
125119
- Improve navigation responsiveness
126120

121+
#### Example (remove unneccesary modules)
122+
```tsx
123+
<Inject services={[Toolbar, Magnification, Navigation, Print]} />
124+
```
125+
127126
---
128127

129128
### 4. Enable Local Storage for Large PDFs With Many Form Fields or Annotations
@@ -158,7 +157,15 @@ By default, the viewer uses **sessionStorage** to store interactive session data
158157

159158
#### Enable Local Storage
160159
```tsx
161-
enableLocalStorage={true}
160+
<PdfViewerComponent
161+
id="container"
162+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
163+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
164+
style={{ height: '640px' }}
165+
enableLocalStorage={true}
166+
>
167+
<Inject services={[Toolbar, Magnification, Navigation, Print, Annotation, FormFields]} />
168+
</PdfViewerComponent>
162169
```
163170

164171
This is highly recommended when working with legal documents, tax forms, interactive applications, or PDFs containing thousands of annotations.
@@ -178,34 +185,6 @@ This ensures the viewer receives enough system resources.
178185

179186
---
180187

181-
## Minimal Recommended Configuration Example
182-
183-
```tsx
184-
import * as ReactDOM from 'react-dom';
185-
import * as React from 'react';
186-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, Print, Inject } from '@syncfusion/ej2-react-pdfviewer';
187-
188-
function App() {
189-
return (
190-
<div className='control-section'>
191-
<PdfViewerComponent
192-
id="container"
193-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
194-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
195-
style={{ height: '640px' }}
196-
enableLocalStorage={true}
197-
>
198-
<Inject services={[Toolbar, Magnification, Navigation, Print]} />
199-
</PdfViewerComponent>
200-
</div>
201-
);
202-
}
203-
const root = ReactDOM.createRoot(document.getElementById('sample'));
204-
root.render(<App />);
205-
```
206-
207-
---
208-
209188
## See Also
210189

211190
- [Load PDF (GitHub Sample)](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load)

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

Lines changed: 8 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ You can directly pass the password in the [`load`](https://ej2.syncfusion.com/re
4848

4949
```tsx
5050
viewer.load(
51-
'https://cdn.syncfusion.com/content/pdf/password-protected.pdf',
51+
'https://your-api/password-protected.pdf',
5252
'Password'
5353
);
5454
```
@@ -66,27 +66,13 @@ This is useful when the password is known beforehand.
6666
If the [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) points to a password-protected PDF:
6767

6868
```tsx
69-
import * as ReactDOM from 'react-dom';
70-
import * as React from 'react';
71-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, Print, Inject } from '@syncfusion/ej2-react-pdfviewer';
72-
73-
function App() {
74-
return (
75-
<div className='control-section'>
76-
<PdfViewerComponent
77-
id="container"
78-
//Load URL for Password Protected Document
79-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
80-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
81-
style={{ height: '640px' }}
82-
>
83-
<Inject services={[Toolbar, Magnification, Navigation, Print]} />
84-
</PdfViewerComponent>
85-
</div>
86-
);
87-
}
88-
const root = ReactDOM.createRoot(document.getElementById('sample'));
89-
root.render(<App />);
69+
<PdfViewerComponent
70+
id="container"
71+
//Load URL for Password Protected Document
72+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
73+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
74+
style={{ height: '640px' }}
75+
>
9076
```
9177

9278
The viewer will:
@@ -100,47 +86,4 @@ The viewer will:
10086

10187
N> No password should be passed inside `documentPath`.
10288

103-
---
104-
105-
## Complete Example Using `viewer.load`
106-
107-
```tsx
108-
import * as ReactDOM from 'react-dom';
109-
import * as React from 'react';
110-
import {
111-
PdfViewerComponent,
112-
Toolbar,
113-
Magnification,
114-
Navigation,
115-
Print,
116-
Inject
117-
} from '@syncfusion/ej2-react-pdfviewer';
118-
119-
function App() {
120-
let viewer;
121-
122-
const onDocumentLoad = () => {
123-
viewer.load(
124-
'https://cdn.syncfusion.com/content/pdf/password-protected.pdf',
125-
'Password'
126-
);
127-
};
128-
129-
return (
130-
<PdfViewerComponent
131-
id="container"
132-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
133-
style={{ height: '640px' }}
134-
ref={(scope) => (viewer = scope)}
135-
documentLoad={onDocumentLoad}
136-
>
137-
<Inject services={[Toolbar, Magnification, Navigation, Print]} />
138-
</PdfViewerComponent>
139-
);
140-
}
141-
142-
const root = ReactDOM.createRoot(document.getElementById('sample'));
143-
root.render(<App />);
144-
```
145-
14689
---

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

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
layout: post
3+
title: Preprocess PDF Document Before Displaying in React PDF Viewer | Syncfusion
4+
description: Learn how to preprocess PDF documents using Syncfusion PDF Library before displaying them in the React PDF Viewer. This includes merging, extracting, flattening, watermarking, and loading processed files.
5+
control: PDF Viewer
6+
platform: document-processing
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Preprocess PDF Document Before Displaying in React PDF Viewer
12+
13+
This section explains why preprocessing is useful, what operations you can perform using the Syncfusion PDF Library, and how to load the processed document in the React PDF Viewer.
14+
15+
## Why Preprocessing Is Needed
16+
Preprocessing a PDF before sending it to the viewer helps you:
17+
- Reduce file size and improve load time
18+
- Merge multiple documents into one
19+
- Extract only required pages for faster loading
20+
- Flatten form fields and annotations for performance & security
21+
- Apply branding elements such as watermarks or stamps
22+
23+
These enhancements ensure a better, faster, and more controlled viewing experience.
24+
25+
## Merge PDF Documents
26+
### UI-Level Merging
27+
You can visually merge pages in the **Organize Pages** UI inside the PDF Viewer. Users can import another PDF, insert its pages into the current file, reorder pages, or delete unwanted pages.
28+
29+
![Import Pages](../images/import.gif)
30+
31+
### Programmatically Merge PDFs
32+
Using the Syncfusion PDF Library, you can merge documents before loading them into the viewer.
33+
```js
34+
import { PdfDocument } from '@syncfusion/ej2-pdf';
35+
36+
const document1 = await PdfDocument.load('file1.pdf');
37+
const document2 = await PdfDocument.load('file2.pdf');
38+
39+
document1.merge(document2);
40+
const mergedBytes = await document1.save();
41+
```
42+
You can then load the merged PDF into the viewer using Blob or Base64.
43+
44+
## Extract Pages
45+
### UI-Level Extraction
46+
Using the Viewer’s [**Organize Pages**](../organize-pages/overview) window, users can select and extract required pages and download them separately.
47+
48+
![Extract Pages](../images/extract-page.png)
49+
50+
### Programmatically Extract Pages
51+
```js
52+
import { PdfDocument } from '@syncfusion/ej2-pdf';
53+
54+
const original = await PdfDocument.load('sample.pdf');
55+
const extracted = original.extractPages([2,3,4]);
56+
const resultBytes = await extracted.save();
57+
```
58+
This reduces file size and improves performance when loading large documents.
59+
60+
## Flatten Form Fields & Annotations
61+
### Why Flattening Helps
62+
- Prevents users from editing form fields
63+
- Improves rendering speed
64+
- Ensures consistent appearance across all devices
65+
66+
### Programmatic Flattening
67+
```js
68+
import { PdfDocument } from '@syncfusion/ej2-pdf';
69+
70+
const doc = await PdfDocument.load('form.pdf');
71+
doc.formFields.flattenAllFields();
72+
doc.annotations.flattenAllAnnotations();
73+
const bytes = await doc.save();
74+
```
75+
76+
## Add Watermark or Stamp
77+
### UI-Level Stamps
78+
The PDF Viewer toolbar allows users to:
79+
- Add [standard stamps](../annotation/stamp-annotation#add-stamp-annotations-to-the-pdf-document) (Approved, Draft, etc.)
80+
- Insert [custom image stamps](../annotation/stamp-annotation#add-a-custom-stamp)
81+
82+
![Custom Stamp](../images/customStamp.png)
83+
84+
### Programmatically Add a Watermark
85+
```js
86+
import { PdfDocument, PdfGraphics, PdfBrushes } from '@syncfusion/ej2-pdf';
87+
88+
const doc = await PdfDocument.load('input.pdf');
89+
const page = doc.getPage(0);
90+
const g = page.graphics;
91+
92+
g.drawString('CONFIDENTIAL', {
93+
x: 150,
94+
y: 300,
95+
fontSize: 48,
96+
brush: PdfBrushes.gray,
97+
opacity: 0.3,
98+
rotateAngle: 45
99+
});
100+
101+
const outputBytes = await doc.save();
102+
```
103+
104+
## How-To Guide: Load the Preprocessed PDF in the Viewer
105+
You can load the processed PDF using **Blob**, **Base64**, or a **URL**.
106+
107+
### Load Using Blob (Recommended)
108+
```js
109+
fetch('/api/processed-pdf')
110+
.then(res => res.blob())
111+
.then(blob => {
112+
const url = URL.createObjectURL(blob);
113+
viewer.load(url);
114+
});
115+
```
116+
Best for large or dynamically processed PDFs.
117+
118+
### Load Using Base64
119+
```js
120+
viewer.load('data:application/pdf;base64,BASE64_STRING');
121+
```
122+
Use for small files.
123+
124+
### Load Using URL
125+
```js
126+
viewer.load('https://yourdomain.com/files/doc.pdf');
127+
```
128+
Ideal for stored/static files.
129+
130+
---

0 commit comments

Comments
 (0)