Skip to content

Commit aa7dcb9

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1012852: Best Practices in React PDF Viewer
1 parent 877c9ad commit aa7dcb9

3 files changed

Lines changed: 341 additions & 0 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/react/best-practices/choosing-standalone-vs-server-backed.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
layout: post
3+
title: Choosing Standalone vs Server‑Backed Viewer
4+
description: Learn when to choose Standalone (WASM) mode or Server‑Backed mode in the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Choosing Standalone vs Server‑Backed Viewer
12+
13+
## Overview
14+
The React PDF Viewer supports two rendering modes: [**Standalone (WASM)**](../getting-started-overview) and [**Server‑Backed (Web API)**](../getting-started-with-server-backed). Choosing the right mode depends on **performance needs**, **PDF size**, **security requirements**, and **deployment constraints**.
15+
16+
Both modes fully support viewing, annotation, form fields, and text search. The difference lies in **where the rendering and processing happen**.
17+
18+
## Standalone (WASM) Viewer — When to Choose?
19+
The Standalone Viewer renders PDFs **directly inside the browser** using the WASM engine (`ej2-pdfviewer-lib`) referenced by `resourceUrl`. citeturn15search45
20+
21+
**Choose Standalone when:**
22+
- No backend should be required
23+
- Deployment must be simple (static hosting)
24+
- PDFs are small to medium (< 20–40 MB)
25+
- You want fast client‑side rendering
26+
- You can host WASM files with correct MIME types
27+
28+
**Strengths:**
29+
- No server dependency
30+
- Very responsive for normal‑sized PDFs
31+
- Works offline once loaded
32+
33+
**Limitations:**
34+
- Not ideal for very large PDFs (100MB+)
35+
- Browser memory/CPU limits apply
36+
- Requires hosting WASM assets
37+
38+
## Server‑Backed Viewer — When to Choose?
39+
The Server‑Backed Viewer performs rendering and processing on a **backend API** using `serviceUrl`. PDFs are processed on the server instead of the browser. citeturn15search41
40+
41+
**Choose Server‑Backed when:**
42+
- PDFs are large (100–500MB)
43+
- CPU‑intensive rendering is required
44+
- Documents must stay on the server (security/compliance)
45+
- You want server‑side caching and logging
46+
- Browser performance needs to be preserved
47+
48+
**Strengths:**
49+
- Efficient for huge PDFs
50+
- Lower browser CPU usage
51+
- Enterprise‑grade security
52+
53+
**Limitations:**
54+
- Requires backend infrastructure
55+
- More complex deployment
56+
57+
## Decision Guide
58+
### Choose **Standalone** if:
59+
- You need a fully client‑side viewer
60+
- Deployment must be simple
61+
- PDFs are < 20–40MB
62+
- No backend infrastructure is desired
63+
- Offline usage is required
64+
65+
### Choose **Server‑Backed** if:
66+
- Users handle large PDFs
67+
- CPU‑heavy operations are required
68+
- PDFs must not leave server boundaries
69+
- Advanced logging/security is needed
70+
- Enterprise environments require controlled processing
71+
72+
## Summary
73+
| Mode | Rendering Location | Best For | Requirements |
74+
|------|-------------------|----------|--------------|
75+
| **Standalone (WASM)** | Browser | Small/Medium PDFs | Host `ej2-pdfviewer-lib` WASM files correctly |
76+
| **Server‑Backed (Web API)** | Server | Large PDFs, Secure environments | Must configure `serviceUrl` API endpoint |
77+
78+
## See Also
79+
- [Getting started with Standalone Viewer](../getting-started-overview)
80+
- [Getting started with Server‑Backed Viewer](../getting-started-with-server-backed)
81+
- [Document Handling](../document-handling/load-large-pdf)

‎Document-Processing/PDF/PDF-Viewer/react/best-practices/performance-optimization-large-pdf.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
layout: post
3+
title: Performance Optimization for Large PDFs
4+
description: Learn best practices to optimize performance when working with large PDF documents in the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Performance Optimization for Large PDFs
12+
13+
Large PDF files (100MB–2GB) often contain images, compressed streams, and heavy page structures that require additional processing time and memory. The Syncfusion React PDF Viewer includes optimizations for such workloads, but applying the correct configuration significantly improves performance.
14+
15+
## Use Server‑Backed Rendering for Large PDFs
16+
Server‑backed rendering processes PDFs on a backend Web API using `serviceUrl`, reducing the load on the browser. This is recommended for PDFs above **100–500MB**.
17+
18+
**Benefits:**
19+
- Offloads CPU‑intensive rendering to server
20+
- Improves performance for 100MB+ files
21+
- Reduces browser memory usage
22+
- Enhances stability in enterprise security environments
23+
24+
## Enable Page‑by‑Page Rendering
25+
The viewer supports **incremental page loading**, meaning only the visible pages are rendered first. This ensures faster time‑to‑first‑view and reduces unnecessary memory usage.
26+
27+
**Advantages:**
28+
- Faster initial load
29+
- Less RAM usage for very long documents
30+
- Improves UX for engineering drawings, scanned books, and multi‑page documents
31+
32+
To take full advantage of incremental rendering:
33+
- Avoid loading PDFs as full base64 strings
34+
- Prefer Blob streaming (see below)
35+
36+
## Optimize Text Search on Large PDFs
37+
The Text Search module requires continuous background text extraction and indexing, which increases CPU for large documents.
38+
39+
Disable TextSearch/TextSelection if not required:
40+
```jsx
41+
<Inject services={[Toolbar, Magnification, Navigation, Print]} />
42+
```
43+
44+
**Why disable it?**
45+
- Reduces indexing overhead
46+
- Lowers CPU usage
47+
- Faster rendering
48+
49+
## Recommended Additional Optimizations
50+
51+
### Load PDFs Using Blob (Recommended)
52+
Blob streaming significantly improves render time for PDFs above **200MB** by allowing optimized download flow instead of blocking rendering until full file download.
53+
54+
```js
55+
fetch('https://your-api/large.pdf')
56+
.then(r => r.blob())
57+
.then(blob => viewer.load(URL.createObjectURL(blob)));
58+
```
59+
60+
### Disable Unnecessary Modules
61+
Modules like **ThumbnailView** and **OrganizePages** generate background thumbnails, which are expensive for large PDFs.
62+
63+
```jsx
64+
<Inject services={[Toolbar, Magnification, Navigation, Print]} />
65+
```
66+
67+
### Enable Local Storage for Annotation‑Heavy PDFs
68+
Large PDFs with many form fields or annotations benefit from localStorage caching to avoid sessionStorage overflow.
69+
70+
```jsx
71+
<PdfViewerComponent enableLocalStorage={true} />
72+
```
73+
74+
**Benefits:**
75+
- Improves navigation stability
76+
- Reduces repeated re‑processing
77+
- Better performance for legal/tax forms and heavily marked PDFs
78+
79+
## Summary
80+
| Optimization | Benefit |
81+
|--------------|---------|
82+
| Server‑backed rendering | Handles 100MB–500MB+ PDFs efficiently |
83+
| Page‑by‑page rendering | Faster first view, reduced memory usage |
84+
| Disable heavy modules | Lower CPU load, smoother viewer |
85+
| Blob loading | Faster load for 200MB–1GB PDFs |
86+
| Enable local storage | Best for annotation‑heavy PDFs |
87+
88+
## See Also
89+
- [Loading large PDFs](../document-handling/load-large-pdf)
90+
- [Server‑Backed Viewer Setup](../getting-started-with-server-backed)
91+
- [Standalone Viewer Setup](../getting-started-overview)

‎Document-Processing/PDF/PDF-Viewer/react/best-practices/secure-pdf-viewing-patterns.md‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
layout: post
3+
title: Secure PDF Viewing Patterns in React PDF Viewer
4+
description: Learn common security patterns for controlling access, restricting actions, and securely handling sensitive PDF content using the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Secure PDF Viewing Patterns
12+
13+
## Overview
14+
Applications that display sensitive documents often require strict security controls.
15+
The Syncfusion React PDF Viewer includes built‑in capabilities to protect PDFs, restrict user actions, honor document permissions, and support secure collaboration workflows.
16+
This section outlines common secure‑viewing patterns and when to apply them.
17+
18+
## Restrict PDF Access
19+
Security begins with controlling **who can load** the PDF file and **how** it is delivered.
20+
21+
### Use Server‑Backed Viewer for Protected Environments
22+
The **Server‑Backed Viewer** renders documents on a backend Web API (`serviceUrl`).
23+
The raw PDF **never reaches the browser**, making this ideal for confidential, regulated, or enterprise deployments.
24+
25+
26+
Benefits:
27+
- Prevents users from directly downloading the source PDF
28+
- Allows enforcing authentication, authorization, and logging on the server
29+
- Supports secure server‑side caching
30+
31+
### Protect Document URLs
32+
For sensitive files:
33+
- Avoid exposing direct file URLs
34+
- Use authenticated endpoints
35+
- Validate JWT / session tokens before sending PDF content
36+
- Stream PDFs only after authorization checks
37+
38+
### Token‑Based Access
39+
Pass security tokens through:
40+
- Custom headers
41+
- Secure cookies
42+
- Encrypted query parameters (backend‑validated)
43+
44+
This ensures only authenticated requests reach the viewer.
45+
46+
## Disable Download / Print
47+
You can restrict user access to sensitive document features by disabling PDF Viewer modules.
48+
49+
### Disable Download
50+
Remove the default download button by using custom toolbar settings or excluding download‑related services.
51+
52+
### Disable Print
53+
Remove the `Print` module.
54+
When excluded, printing options do not appear on the viewer toolbar.
55+
56+
### Disable Copy / Extract Text
57+
Disable:
58+
- `TextSelection`
59+
- `TextSearch`
60+
61+
These modules perform background text extraction.
62+
Removing them prevents text copying entirely.
63+
64+
Example:
65+
```jsx
66+
<Inject services={[Toolbar, Navigation, Magnification]} />
67+
```
68+
69+
This produces a view‑only, non‑copiable experience.
70+
71+
## Use Signed or Protected PDFs
72+
The Syncfusion PDF Viewer fully supports:
73+
- **AES‑encrypted PDFs**
74+
- **Password‑protected PDFs**
75+
- **Permission‑restricted PDFs** (e.g., no‑print, no‑copy)
76+
77+
When loading a protected PDF, the viewer **honors all embedded restrictions**.
78+
79+
### Password‑Protected PDFs
80+
From your attached file:
81+
82+
- If a password‑protected file is opened through the **Open File dialog**, the viewer automatically displays the password prompt.
83+
84+
- When loading programmatically, the password can be passed directly via `viewer.load(url, password)`.
85+
86+
87+
Example:
88+
```js
89+
viewer.load(
90+
'https://your-server/document.pdf',
91+
'Password'
92+
);
93+
```
94+
95+
The viewer validates the password and decrypts the document.
96+
97+
## Watermarking & Redaction
98+
99+
### Dynamic Watermarks
100+
You can apply dynamic text‑based watermarks (username, timestamp, IP address) before loading the PDF via backend processing.
101+
Useful for:
102+
- Preventing screenshot leaks
103+
- Tracking document distribution
104+
105+
### Redaction Workflows
106+
The React PDF Viewer supports secure redaction workflows for permanently removing sensitive content.
107+
108+
Redaction capabilities are documented in the Syncfusion example repository.
109+
110+
Supported patterns:
111+
- Marking redaction areas
112+
- Reviewing and applying changes
113+
- **Flattening** after redaction to permanently delete content
114+
115+
## Secure Annotation & Collaboration Patterns
116+
Syncfusion documents multiple secure, role‑based annotation strategies:
117+
118+
### Role‑Based Control
119+
Examples:
120+
- **Viewer**: can only read
121+
- **Commenter**: can add comments but not shapes
122+
- **Editor**: can modify all annotations
123+
- **Admin**: full rights including redaction
124+
125+
### Locking Annotations
126+
Annotations can be:
127+
- Locked
128+
- Restricted by author
129+
- Filtered by role
130+
131+
This prevents unauthorized editing of sensitive markups.
132+
133+
### Finalizing Documents (Flattening)
134+
Flattening annotations ensures:
135+
- No further edits are possible
136+
- Signatures and markups become part of the PDF content
137+
138+
Flattening is recommended in legal and compliance scenarios.
139+
140+
---
141+
142+
## Prevent PDF Access Leakage
143+
144+
### Avoid Exposing Raw PDFs
145+
When using Standalone mode (`resourceUrl` + WASM), the PDF is downloaded into the browser.
146+
For confidential files, prefer **Server‑Backed mode**, where the browser receives processed output, not the original PDF.
147+
148+
149+
### Disable Thumbnail & Page Extract Modules (Optional)
150+
Thumbnail rendering and page organizing load page previews that may contain sensitive data.
151+
If not needed, disable:
152+
- `ThumbnailView`
153+
- `PageOrganizer`
154+
155+
## Summary
156+
| Pattern | Purpose |
157+
|--------|---------|
158+
| Server‑Backed Viewer | Keep documents on server; prevent raw PDF exposure |
159+
| Disable download/print/copy | Prevent distribution or extraction of sensitive content |
160+
| Use protected PDFs | Enforce password-based and permission-based security |
161+
| Watermarking | Prevent leaks via screenshot tracing |
162+
| Redaction | Permanently remove confidential content |
163+
| Role‑based annotation control | Restrict who can comment, edit, or sign |
164+
| Flattening | Finalize documents for compliant sharing |
165+
166+
## See Also
167+
- [Loading Password‑Protected PDFs](../document-handling/load-password-pdf)
168+
- [Server‑Backed Viewer Setup](../getting-started-with-server-backed)
169+
- [Redaction](../Redaction/overview)

0 commit comments

Comments
 (0)