Skip to content

Commit 03298ad

Browse files
Merge branch 'development' into EJ2-1011162-new-staging
2 parents 3fb226d + 7693a6b commit 03298ad

7 files changed

Lines changed: 684 additions & 0 deletions

File tree

Document-Processing-toc.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -932,6 +932,14 @@
932932
<li><a href="/document-processing/pdf/pdf-viewer/react/save-pdf-file/to-azure-active-directory">To Azure Active Directory</a></li>
933933
</ul>
934934
</li>
935+
<li>Document Handling
936+
<ul>
937+
<li><a href="/document-processing/pdf/pdf-viewer/react/document-handling/load-large-pdf">Load Large PDF Files</a></li>
938+
<li><a href="/document-processing/pdf/pdf-viewer/react/document-handling/load-password-pdf">Load Password Protected PDFs</a></li>
939+
<li><a href="/document-processing/pdf/pdf-viewer/react/document-handling/preprocess-pdf">Preprocess PDF Document Before Displaying</a></li>
940+
<li><a href="/document-processing/pdf/pdf-viewer/react/document-handling/retrieve-loadedDoc">Retrieve the Loaded Document Instance </a></li>
941+
</ul>
942+
</li>
935943
<li><a href="/document-processing/pdf/pdf-viewer/react/mobile-toolbar">Mobile Toolbar Interface</a></li>
936944
<li><a href="/document-processing/pdf/pdf-viewer/react/toolbar">Toolbar Customization</a>
937945
<ul>
Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
---
2+
layout: post
3+
title: Document Handling in React Pdfviewer component | Syncfusion
4+
description: This page helps you to learn about how to Open PDF from URL, Base64, Blob, Stream, Cloud storage in Syncfusion React Pdfviewer component.
5+
control: PDF Viewer
6+
platform: document-processing
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Load Large PDF Files in React PDF Viewer
12+
13+
This article explains how to efficiently load and view large PDF files using the Syncfusion React PDF Viewer. It includes recommended best practices and performance tips for documents ranging from **50 MB to 2 GB**.
14+
15+
---
16+
17+
## Why Large PDFs Need Special Handling
18+
19+
Large PDF files often contain thousands of embedded objects such as images, compressed streams, digital signatures, form fields, annotations, vector graphics, and complex page structures. Rendering such heavy documents requires more processing time and memory.
20+
21+
The **Syncfusion PDF Viewer is fully optimized for these heavy workloads**, and it delivers excellent performance even when working with very large files.
22+
23+
### Viewer Capability Highlights
24+
- **Smooth performance for PDFs up to 1 GB**
25+
- **Supports viewing files up to ~2 GB**
26+
- **1 GB PDFs typically load within 5–6 seconds**
27+
- **Optimized incremental page loading** for faster interaction
28+
29+
Performance may vary if the user’s system is heavily loaded or low on available RAM. In such cases, enabling the recommended optimizations below ensures maximum performance.
30+
31+
---
32+
33+
## Best Practices for Loading Large PDFs
34+
35+
### 1. Load PDFs Using Blob (Recommended)
36+
37+
Blob loading provides the fastest and most efficient performance for large PDFs.
38+
39+
#### Why Blob Loading Is Better
40+
41+
When a large PDF (for example, 1 GB) is loaded directly via `documentPath` (URL):
42+
43+
- The browser must **download the full document first**
44+
- Only after the full download completes, the viewer starts parsing and rendering
45+
- This causes delay for large files
46+
47+
But when the PDF is fetched as a **Blob**:
48+
49+
- The file is downloaded first in an optimized stream
50+
- A Blob URL is created and passed to the viewer
51+
- The viewer can begin rendering faster
52+
- Improves load time, memory usage, and overall responsiveness
53+
54+
#### Example: Load a PDF as Blob
55+
```js
56+
fetch('https://your-api/large-file.pdf')
57+
.then(response => response.blob())
58+
.then(blob => {
59+
const blobUrl = URL.createObjectURL(blob);
60+
viewer.load(blobUrl, null);
61+
})
62+
.catch(error => console.error('Error loading PDF:', error));
63+
```
64+
65+
Blob loading is highly recommended for all PDFs above **200 MB**, especially when working with 500 MB – 1 GB files.
66+
67+
---
68+
69+
### 2. Viewer Performance Range
70+
71+
The Syncfusion PDF Viewer is optimized to handle:
72+
73+
- **Up to 1 GB** → very smooth
74+
- **Up to ~2 GB**
75+
76+
This suits enterprise workflows involving large engineering drawings, client records, scanned books, and multi‑page financial reports.
77+
78+
---
79+
80+
### 3. Minimize Injected Modules
81+
82+
The PDF Viewer internally uses background workers for text processing, thumbnail generation, image rendering, and metadata extraction. Disabling modules that are not needed helps reduce background activity and improves performance.
83+
84+
#### 3.1 Text Search & Text Selection
85+
86+
Modules:
87+
- [`Text Search`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/text-search)
88+
- [`Text Selection`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/text-selection)
89+
90+
These features require **continuous background text extraction and indexing**.
91+
92+
For large PDFs:
93+
94+
- Text extraction runs longer
95+
- Consumes additional CPU and memory
96+
- Increases initial load time
97+
98+
If these features are not required in your application:
99+
100+
- Disable them to reduce background tasks
101+
- Improve page rendering speed
102+
- Provide a smoother experience for large documents
103+
---
104+
105+
#### 3.2 Thumbnail View & Organize Pages
106+
107+
Modules:
108+
- [`Organize Pages`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/organize-pages/overview)
109+
- [`Thumbnail View`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/interactive-pdf-navigation/page-thumbnail)
110+
111+
These rely on **background thumbnail rendering**, where the viewer renders small preview images of every page.
112+
For PDFs with hundreds or thousands of pages, this becomes heavy.
113+
114+
If thumbnails or page reordering are not essential:
115+
116+
- Disable these modules
117+
- Prevent background thumbnail rendering
118+
- Reduce memory usage
119+
- Improve navigation responsiveness
120+
121+
#### Example (remove unneccesary modules)
122+
```tsx
123+
<Inject services={[Toolbar, Magnification, Navigation, Print]} />
124+
```
125+
126+
---
127+
128+
### 4. Enable Local Storage for Large PDFs With Many Form Fields or Annotations
129+
130+
PDFs with a high number of:
131+
132+
- Form fields (textbox, dropdown, signatures, etc.)
133+
- Annotations (highlight, shapes, comments)
134+
135+
require more storage for:
136+
137+
- Field values
138+
- Annotation metadata
139+
- Interaction states
140+
- Undo/redo data
141+
142+
Enabling local storage in the PDF Viewer can improve performance and smoothness when working with large files. This allows the viewer to cache document data locally, reducing repeated network requests and memory spikes.
143+
144+
Use the [`enableLocalStorage`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enablelocalstorage) property to control this behavior. When set to `true`, session data is stored in memory for the current session; when `false` (default), browser session storage is used.
145+
146+
**How the viewer stores this data by default**
147+
148+
By default, the viewer uses **sessionStorage** to store interactive session data. For heavy PDFs with many form fields/annotations, sessionStorage can get filled more quickly and may cause slower interactions or instability when navigating across many pages.
149+
150+
**Why enabling localStorage helps**
151+
152+
- Provides more storage capacity than session storage
153+
- Avoids storage overflow for annotation‑heavy PDFs
154+
- Improves saving/loading of form values
155+
- Enhances stability when navigating large documents
156+
- Reduces repeated processing for form/annotation‑heavy pages
157+
158+
#### Enable Local Storage
159+
```tsx
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>
169+
```
170+
171+
This is highly recommended when working with legal documents, tax forms, interactive applications, or PDFs containing thousands of annotations.
172+
173+
---
174+
175+
### 5. Reduce Unnecessary Background System Processes
176+
177+
For the best large‑PDF experience:
178+
179+
- Close unused applications
180+
- Avoid multiple heavy tasks running in parallel
181+
- Minimize other browser tabs
182+
- Avoid opening multiple large PDFs simultaneously
183+
184+
This ensures the viewer receives enough system resources.
185+
186+
---
187+
188+
## See Also
189+
190+
- [Load PDF (GitHub Sample)](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load)
Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
layout: post
3+
title: Load Password Protected PDFs in React PDF Viewer | Syncfusion
4+
description: Learn how to open password-protected PDF files in the Syncfusion React PDF Viewer by providing the password in the documentPath object.
5+
control: PDF Viewer
6+
platform: document-processing
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Load a Password-Protected PDF
12+
13+
This article explains how to open password-protected PDF files in the Syncfusion React PDF Viewer. The viewer supports both user‑interactive loading (Open File dialog) and programmatic loading using APIs.
14+
15+
---
16+
17+
## 1. Opening a Password-Protected PDF Using the **Open File** Dialog
18+
19+
When the user selects a password-protected PDF using the built‑in **Open File** option:
20+
21+
1. The viewer detects that the document is encrypted
22+
23+
![Open PDF Document](../images/open-pdf.png)
24+
25+
2. A **password input popup** is automatically displayed
26+
27+
![Password Protected Pop-up](../images/password-popup.png)
28+
29+
3. The user enters the password
30+
31+
4. The document is decrypted and loaded
32+
33+
No additional configuration or code is required.
34+
35+
This approach works for all password-protected PDFs opened locally by the user.
36+
37+
---
38+
39+
## 2. Opening a Password-Protected PDF Programmatically
40+
41+
If you load a password-protected PDF from a URL or through custom logic, the viewer provides two behaviors depending on how the file is loaded.
42+
43+
---
44+
45+
### 2.1 Load the Document Using `viewer.load(url, password)`
46+
47+
You can directly pass the password in the [`load`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#load) method:
48+
49+
```tsx
50+
viewer.load(
51+
'https://your-api/password-protected.pdf',
52+
'Password'
53+
);
54+
```
55+
56+
- If the password is correct → the PDF loads immediately
57+
- If the password is incorrect → the viewer displays the incorrect password popup
58+
- If no password is provided → the password popup is shown automatically
59+
60+
This is useful when the password is known beforehand.
61+
62+
---
63+
64+
### 2.2 Loading a Password-Protected Document's URL Using `documentPath`
65+
66+
If the [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) points to a password-protected PDF:
67+
68+
```tsx
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+
>
76+
```
77+
78+
The viewer will:
79+
80+
- Detect encryption
81+
- Show the **password popup automatically**
82+
- Allow the user to enter the correct password
83+
- Then load the PDF
84+
85+
![Password Protected Pop-up](../images/password-popup.png)
86+
87+
N> No password should be passed inside `documentPath`.
88+
89+
---

0 commit comments

Comments
 (0)