1010724: Updated Document Handling in React PDF Viewer

Document-Processing-toc.html

@@ -923,6 +923,12 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/react/save-pdf-file/to-azure-active-directory">To Azure Active Directory</a></li>
 								</ul>
 							</li>
+							<li>Document Handling
+								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/document-handling/load-large-pdf">Load Large PDF Files</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/document-handling/load-password-pdf">Load Password Protected PDFs</a></li>
+								</ul>
+							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/mobile-toolbar">Mobile Toolbar Interface</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/toolbar">Toolbar Customization</a> 
 							    <ul>

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

@@ -0,0 +1,211 @@
+---
+layout: post
+title: Document Handling in React Pdfviewer component | Syncfusion
+description: This page helps you to learn about how to Open PDF from URL, Base64, Blob, Stream, Cloud storage in Syncfusion React Pdfviewer component.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load Large PDF Files in React PDF Viewer
+
+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**.
+
+---
+
+## Why Large PDFs Need Special Handling
+
+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.
+
+The **Syncfusion PDF Viewer is fully optimized for these heavy workloads**, and it delivers excellent performance even when working with very large files.
+
+### Viewer Capability Highlights
+- **Smooth performance for PDFs up to 1 GB**
+- **Supports viewing files up to ~2 GB** depending on system capacity
+- **1 GB PDFs typically load within 5–6 seconds** 
+- **Optimized incremental page loading** for faster interaction
+
+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.
+
+---
+
+# Best Practices for Loading Large PDFs
+
+## 1. Load PDFs Using Blob (Recommended)
+
+Blob loading provides the fastest and most efficient performance for large PDFs.
+
+### Why Blob Loading Is Better
+
+When a large PDF (for example, 1 GB) is loaded directly via `documentPath` (URL):
+
+- The browser must **download the full document first**
+- Only after the full download completes, the viewer starts parsing and rendering
+- This causes delay for large files
+
+But when the PDF is fetched as a **Blob**:
+
+- The file is downloaded first in an optimized stream
+- A Blob URL is created and passed to the viewer
+- The viewer can begin rendering faster
+- Improves load time, memory usage, and overall responsiveness
+
+### Example: Load a PDF as Blob
+```js
+fetch('https://your-api/large-file.pdf')
+  .then(response => response.blob())
+  .then(blob => {
+    const blobUrl = URL.createObjectURL(blob);
+    viewer.load(blobUrl, null);
+  })
+  .catch(error => console.error('Error loading PDF:', error));
+```
+
+Blob loading is highly recommended for all PDFs above **200 MB**, especially when working with 500 MB – 1 GB files.
+
+---
+
+## 2. Viewer Performance Range
+
+The Syncfusion PDF Viewer is optimized to handle:
+
+- **Up to 1 GB** → very smooth
+- **Up to ~2 GB** → supported based on system capability
+
+This suits enterprise workflows involving large engineering drawings, client records, scanned books, and multi‑page financial reports.
+
+---
+
+## 3. Minimize Injected Modules
+
+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.
+
+### 3.1 Text Search & Text Selection
+
+Modules:
+- [`Text Search`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/text-search)
+- [`Text Selection`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/text-selection)
+
+These features require **continuous background text extraction and indexing**.
+
+For large PDFs:
+
+- Text extraction runs longer
+- Consumes additional CPU and memory
+- Increases initial load time
+
+If these features are not required in your application:
+
+- Disable them to reduce background tasks
+- Improve page rendering speed
+- Provide a smoother experience for large documents
+
+### Example (remove text search & selection)
+```tsx
+<Inject services={[Toolbar, Magnification, Navigation, Print]} />
+```
+
+---
+
+### 3.2 Thumbnail View & Organize Pages
+
+Modules:
+- [`Organize Pages`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/organize-pages/overview)
+- [`Thumbnail View`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/interactive-pdf-navigation/page-thumbnail)
+
+These rely on **background thumbnail rendering**, where the viewer renders small preview images of every page.
+For PDFs with hundreds or thousands of pages, this becomes heavy.
+
+If thumbnails or page reordering are not essential:
+
+- Disable these modules
+- Prevent background thumbnail rendering
+- Reduce memory usage
+- Improve navigation responsiveness
+
+---
+
+## 4. Enable Local Storage for Large PDFs With Many Form Fields or Annotations
+
+PDFs with a high number of:
+
+- Form fields (textbox, dropdown, signatures, etc.)
+- Annotations (highlight, shapes, comments)
+
+require more storage for:
+
+- Field values
+- Annotation metadata
+- Interaction states
+- Undo/redo data
+
+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.
+
+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.
+
+**How the viewer stores this data by default**
+
+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.
+
+**Why enabling localStorage helps**
+
+- Provides more storage capacity than session storage
+- Avoids storage overflow for annotation‑heavy PDFs
+- Improves saving/loading of form values
+- Enhances stability when navigating large documents
+- Reduces repeated processing for form/annotation‑heavy pages
+
+### Enable Local Storage
+```tsx
+enableLocalStorage={true}
+```
+
+This is highly recommended when working with legal documents, tax forms, interactive applications, or PDFs containing thousands of annotations.
+
+---
+
+## 5. Reduce Unnecessary Background System Processes
+
+For the best large‑PDF experience:
+
+- Close unused applications
+- Avoid multiple heavy tasks running in parallel
+- Minimize other browser tabs
+- Avoid opening multiple large PDFs simultaneously
+
+This ensures the viewer receives enough system resources.
+
+---
+
+# Minimal Recommended Configuration Example
+
+```tsx
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Print, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+	return (
+		<div className='control-section'>
+			<PdfViewerComponent
+				id="container"
+				documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+				resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+				style={{ height: '640px' }}
+				enableLocalStorage={true}
+			>
+				<Inject services={[Toolbar, Magnification, Navigation, Print]} />
+			</PdfViewerComponent>
+		</div>
+	);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+```
+
+---
+
+## See Also
+
+- [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

@@ -0,0 +1,146 @@
+---
+layout: post
+title: Load Password Protected PDFs in React PDF Viewer | Syncfusion
+description: Learn how to open password-protected PDF files in the Syncfusion React PDF Viewer by providing the password in the documentPath object.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load a Password-Protected PDF
+
+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.
+
+---
+
+## 1. Opening a Password-Protected PDF Using the **Open File** Dialog
+
+When the user selects a password-protected PDF using the built‑in **Open File** option:
+
+1. The viewer detects that the document is encrypted
+
+![Open PDF Document](../images/open-pdf.png)
+
+2. A **password input popup** is automatically displayed
+
+![Password Protected Pop-up](../images/password-popup.png)
+
+3. The user enters the password
+
+4. The document is decrypted and loaded
+
+No additional configuration or code is required.
+
+This approach works for all password-protected PDFs opened locally by the user.
+
+---
+
+## 2. Opening a Password-Protected PDF Programmatically
+
+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.
+
+---
+
+### 2.1 Load the Document Using `viewer.load(url, password)`
+
+You can directly pass the password in the [`load`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#load) method:
+
+```tsx
+viewer.load(
+  'https://cdn.syncfusion.com/content/pdf/password-protected.pdf',
+  'Password'
+);
+```
+
+- If the password is correct → the PDF loads immediately
+- If the password is incorrect → the viewer displays the incorrect password popup
+- If no password is provided → the password popup is shown automatically
+
+This is useful when the password is known beforehand.
+
+---
+
+### 2.2 Loading a Password-Protected Document's URL Using `documentPath`
+
+If the [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) points to a password-protected PDF:
+
+```tsx
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Print, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+	return (
+		<div className='control-section'>
+			<PdfViewerComponent
+				id="container"
+                //Load URL for Password Protected Document 
+				documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+				resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+				style={{ height: '640px' }}
+			>
+				<Inject services={[Toolbar, Magnification, Navigation, Print]} />
+			</PdfViewerComponent>
+		</div>
+	);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+```
+
+The viewer will:
+
+- Detect encryption
+- Show the **password popup automatically**
+- Allow the user to enter the correct password
+- Then load the PDF
+
+![Password Protected Pop-up](../images/password-popup.png)
+
+N> No password should be passed inside `documentPath`.
+
+---
+
+## Complete Example Using `viewer.load`
+
+```tsx
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Print,
+  Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  let viewer;
+
+  const onDocumentLoad = () => {
+    viewer.load(
+      'https://cdn.syncfusion.com/content/pdf/password-protected.pdf',
+      'Password'
+    );
+  };
+
+  return (
+    <PdfViewerComponent
+      id="container"
+      resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+      style={{ height: '640px' }}
+      ref={(scope) => (viewer = scope)}
+      documentLoad={onDocumentLoad}
+    >
+      <Inject services={[Toolbar, Magnification, Navigation, Print]} />
+    </PdfViewerComponent>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+```
+
+---