Skip to content

Commit e66fd56

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1010724: Updated Document Handling in React PDF Viewer
1 parent 1aebfbf commit e66fd56

3 files changed

Lines changed: 236 additions & 0 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -923,6 +923,12 @@
923923
<li><a href="/document-processing/pdf/pdf-viewer/react/save-pdf-file/to-azure-active-directory">To Azure Active Directory</a></li>
924924
</ul>
925925
</li>
926+
<li>Document Handling
927+
<ul>
928+
<li><a href="/document-processing/pdf/pdf-viewer/react/document-handling/load-large-pdf">Load Large PDF Files</a></li>
929+
<li><a href="/document-processing/pdf/pdf-viewer/react/document-handling/load-password-pdf">Load Password Protected PDFs</a></li>
930+
</ul>
931+
</li>
926932
<li><a href="/document-processing/pdf/pdf-viewer/react/mobile-toolbar">Mobile Toolbar Interface</a></li>
927933
<li><a href="/document-processing/pdf/pdf-viewer/react/toolbar">Toolbar Customization</a>
928934
<ul>

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
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+
# Handling Large PDF Files in React PDF Viewer
12+
13+
This article explains why large PDF files require special handling in web applications and provides best practices for loading and displaying them efficiently in the Syncfusion React PDF Viewer.
14+
15+
---
16+
17+
## Explanation: Why Large PDFs Need Special Handling
18+
19+
Large PDF files (typically 50MB–100MB or more) can cause high memory usage and performance issues in browsers. Browsers may become unresponsive or crash when attempting to load or render very large documents, especially if inefficient loading methods are used.
20+
21+
---
22+
23+
## How-to Guide: Best Ways to Load Large PDFs
24+
25+
Follow these recommendations to optimize the loading and viewing experience for large PDF files:
26+
27+
### 1. Load from Blob (Recommended)
28+
29+
If you fetch the PDF from a custom API or server, use the Blob approach. This avoids base64 encoding overhead and is more memory-efficient.
30+
31+
```js
32+
fetch('https://your-api/large-file.pdf')
33+
.then((response) => response.blob())
34+
.then((blob) => {
35+
const blobUrl = URL.createObjectURL(blob);
36+
viewer.load(blobUrl, null); // Load using blob URL
37+
})
38+
.catch((error) => {
39+
console.error('Error loading PDF:', error);
40+
});
41+
```
42+
43+
### 2. Avoid Base64 for Large Files
44+
45+
Base64 encoding increases file size by ~33% and consumes more memory. For large PDFs, always prefer Blob or direct URL loading over base64.
46+
47+
### 3. Minimize Injected Modules
48+
49+
Reduce the number of injected modules in the PDF Viewer to lower background processing and memory usage. For large files, avoid modules like:
50+
- Text Search
51+
- Text Selection
52+
- Organize Pages
53+
- Thumbnail View
54+
55+
**Example:**
56+
```tsx
57+
<PdfViewerComponent
58+
id="container"
59+
documentPath={...}
60+
serviceUrl={...}
61+
style={{ height: '640px' }}
62+
>
63+
<Inject services={[Toolbar, Magnification, Navigation, Print]} />
64+
</PdfViewerComponent>
65+
```
66+
67+
### 4. Enable Local Storage for Performance
68+
69+
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.
70+
71+
Use the `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.
72+
73+
**Example:**
74+
```tsx
75+
import * as ReactDOM from 'react-dom';
76+
import * as React from 'react';
77+
import { PdfViewerComponent, Toolbar, Magnification, Navigation, Print, Inject } from '@syncfusion/ej2-react-pdfviewer';
78+
79+
function App() {
80+
return (
81+
<div className='control-section'>
82+
<PdfViewerComponent
83+
id="container"
84+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
85+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
86+
style={{ height: '640px' }}
87+
enableLocalStorage={true}
88+
>
89+
<Inject services={[Toolbar, Magnification, Navigation, Print]} />
90+
</PdfViewerComponent>
91+
</div>
92+
);
93+
}
94+
const root = ReactDOM.createRoot(document.getElementById('sample'));
95+
root.render(<App />);
96+
```
97+
98+
**Considerations:**
99+
- Enabling in-memory storage can increase memory usage, especially for large documents or many interactive elements.
100+
- Dispose the PDF Viewer instance when not needed to avoid memory leaks.
101+
- The default value is `false` (browser session storage).
102+
103+
---
104+
105+
## Reference
106+
107+
- [React PDF Viewer API Reference](https://ej2.syncfusion.com/react/documentation/api/pdfviewer)
108+
- [FAQ in Syncfusion React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/how-to-overview)
109+
110+
---
111+
112+
## See Also
113+
114+
- [Load PDF (GitHub Sample)](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load)
115+
- [General PDF Viewer Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started)

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
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 Password Protected PDFs in React PDF Viewer
12+
13+
This article explains how to load and display password-protected PDF files in the Syncfusion React PDF Viewer. The viewer can automatically decrypt and display the file when the correct password is provided.
14+
15+
---
16+
17+
## Tutorial: Open a Password-Protected PDF
18+
19+
To open a password-protected PDF, provide the password as part of the `documentPath` object. The viewer will use this password to decrypt and display the file.
20+
21+
---
22+
23+
## How-to Guide: Minimal Example
24+
25+
```tsx
26+
import { createRoot } from 'react-dom/client';
27+
import './index.css';
28+
import * as React from 'react';
29+
import {
30+
PdfViewerComponent,
31+
Toolbar,
32+
Magnification,
33+
Navigation,
34+
LinkAnnotation,
35+
BookmarkView,
36+
ThumbnailView,
37+
Print,
38+
TextSelection,
39+
TextSearch,
40+
Annotation,
41+
FormFields,
42+
FormDesigner,
43+
PageOrganizer,
44+
Inject,
45+
} from '@syncfusion/ej2-react-pdfviewer';
46+
47+
function Default() {
48+
let viewer;
49+
const resourcesLoaded = () => {
50+
//pass PDF URL and passwod here as string
51+
viewer.load(
52+
'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
53+
'Password'
54+
);
55+
};
56+
return (
57+
<div>
58+
<div className="control-section">
59+
{/* Render the PDF Viewer */}
60+
<PdfViewerComponent
61+
ref={(scope) => {
62+
viewer = scope;
63+
}}
64+
id="container"
65+
resourcesLoaded={resourcesLoaded}
66+
resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
67+
style={{ height: '640px' }}
68+
>
69+
<Inject
70+
services={[
71+
Toolbar,
72+
Magnification,
73+
Navigation,
74+
LinkAnnotation,
75+
BookmarkView,
76+
ThumbnailView,
77+
Print,
78+
TextSelection,
79+
TextSearch,
80+
Annotation,
81+
FormFields,
82+
FormDesigner,
83+
PageOrganizer,
84+
]}
85+
/>
86+
</PdfViewerComponent>
87+
</div>
88+
</div>
89+
);
90+
}
91+
export default Default;
92+
93+
const root = createRoot(document.getElementById('sample'));
94+
root.render(<Default />);
95+
96+
```
97+
98+
---
99+
100+
## Explanation
101+
102+
When a password-protected PDF is loaded, the Syncfusion React PDF Viewer automatically uses the provided password to decrypt the file. If the password is incorrect or missing, the viewer will prompt for the password or display an error.
103+
104+
---
105+
106+
## Reference
107+
108+
- [React PDF Viewer API Reference](https://ej2.syncfusion.com/react/documentation/api/pdfviewer)
109+
- [PDF Viewer Features](https://ej2.syncfusion.com/react/documentation/pdfviewer/getting-started)
110+
111+
---
112+
113+
## See Also
114+
115+
- [Load PDF from URL (GitHub Sample)](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20URL)

0 commit comments

Comments
 (0)