Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions Document-Processing-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/feature-module">Feature Modules</a></li>
Expand Down Expand Up @@ -514,6 +515,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/feature-module">Feature Modules</a></li>
Expand Down Expand Up @@ -715,6 +717,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/angular/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/ui-builder-skill">Agentic UI Builder Skill</a></li>
Expand Down Expand Up @@ -1269,6 +1272,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/react/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/react/ui-builder-skill">Agentic UI Builder Skill</a></li>
Expand Down Expand Up @@ -1591,6 +1595,7 @@
<li><a href="/document-processing/pdf/pdf-viewer/vue/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/getting-started-application">Vue 3</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/quasar">Quasar</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/feature-module">Feature Modules</a></li>
Expand Down Expand Up @@ -1818,6 +1823,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/feature-module">Feature Modules</a></li>
Expand Down Expand Up @@ -2085,6 +2091,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/module-injection">Module Injection</a></li>
Expand Down
12 changes: 6 additions & 6 deletions Document-Processing/PDF/PDF-Viewer/react/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---

# Accessibility in PDF Viewer components React
# Accessibility in React PDF Viewer component

The PDF Viewer component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and the WCAG ARIA roles specified by WAI-ARIA. The component's accessibility compliance is outlined below.

Expand Down Expand Up @@ -51,7 +51,7 @@ The PDF Viewer component follows accessibility guidelines and standards, includi
| `aria-describedby` | This attribute points to the PDF Viewer element describing the one it's set on. |
| `aria-orientation` | Indicates whether the PDF Viewer element is oriented horizontally or vertically. |
| `aria-valuetext` | Returns the current text of the PDF Viewer. |
| `aria-valuemax` | Indicates the Maximum value of the PDF Viewer. |
| `aria-valuemax` | Indicates the maximum value of the PDF Viewer. |
| `aria-valuemin` | Indicates the Minimum value of the PDF Viewer. |
| `aria-valuenow` | Indicates the current value of the PDF Viewer. |
| `aria-controls` | Attribute is set to the button and it points to the corresponding content. |
Expand All @@ -67,7 +67,7 @@ The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/W
| <kbd>CONTROL + Right Arrow (or) CONTROL + Down Arrow</kbd> |<kbd>COMMAND + Right Arrow (or) COMMAND + Down Arrow</kbd> |Navigate to the last page |
|<kbd>Left Arrow</kbd> |<kbd> Left Arrow (or) Shift + Space </kbd> |Navigate to the previous page|
| <kbd>Right Arrow</kbd> | <kbd>Right Arrow (or) Space</kbd> | Navigate to the next page |
| <kbd>CONTROL + G</kbd> | <kbd>COMMAND + G</kbd> | Go To The Page|
| <kbd>CONTROL + G</kbd> | <kbd>COMMAND + G</kbd> | Go to the page|
|<kbd>Up Arrow</kbd> |<kbd>Up Arrow </kbd> |Scroll up|
| <kbd>Down Arrow</kbd> | <kbd>Down Arrow</kbd> | Scroll down|
|||**Shortcuts for Zooming**|
Expand All @@ -78,8 +78,8 @@ The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/W
| <kbd>CONTROL + F</kbd> | <kbd>COMMAND + F</kbd> |Open the search toolbar|
|||**Shortcut for Text Selection**|
|<kbd>CONTROL + C</kbd> |<kbd>CONTROL + C</kbd> | Copy the selected text or annotation or form field |
| <kbd>CONTROL + X</kbd> | <kbd>CONTROL + X</kbd> |Cut the selected text or annotation of the form field|
|<kbd>CONTROL + Y</kbd> |<kbd>CONTROL + Y</kbd> |Paste the selected text or annotation or form field|
| <kbd>CONTROL + X</kbd> |<kbd>CONTROL + X</kbd> |Cut the selected text, annotation, or form field|
|<kbd>CONTROL + V</kbd> |<kbd>COMMAND + V</kbd> |Paste the selected text, annotation, or form field|
|||**Shortcuts for the general operation**|
| <kbd>CONTROL + Z</kbd> | <kbd>CONTROL + Z</kbd> |Undo the action|
|<kbd>CONTROL + Y</kbd> |<kbd>CONTROL + Y</kbd> |Redo the action|
Expand Down Expand Up @@ -252,4 +252,4 @@ The PDF Viewer component's accessibility levels are ensured through an [accessib

## See also

* [Accessibility in React components](../common/accessibility)
* [Accessibility in React components](../common/accessibility)
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ require more storage for:

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.
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 the browser's local storage; when `false` (default), browser session storage is used.

**How the viewer stores this data by default**

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ viewer.load(

This is useful when the password is known beforehand.

### 2.2 Loading a Password-Protected Document's URL Using `documentPath`
### 2.2 Loading a Password-Protected PDF Using `documentPath`

If the [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) points to a password-protected PDF:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const bytes = await doc.save();

### Flatten on Load

Use the following code-snippet, when you want uploaded PDFs to be flattened before they are loaded into the viewer.
Use the following code-snippet when you want uploaded PDFs to be flattened before they are loaded into the viewer.

{% tabs %}
{% highlight js tabtitle="Standalone" %}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Retrieve the Loaded Document in React PDF Viewer | syncfusion
title: Retrieve the Loaded Document in React PDF Viewer | Syncfusion
description: Learn how to access the loaded PDF document instance in the React PDF Viewer using refs and the documentLoad event.
platform: document-processing
documentation: ug
Expand All @@ -13,7 +13,7 @@ This page explains how to access the React PDF Viewer instance using a React ref

## Explanation: Why access the loaded document instance?

- The viewer instance (via **React ref**) gives you a stable handle to call APIs such as [`zoom`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/magnification), [`print`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/print), [`download`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/download), and [`navigation`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/navigation).
- The viewer instance (via **React ref**) gives you a stable handle to call APIs such as [`zoom`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/magnification), [`print`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/print), [`download`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/download), and [`navigation`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/interactive-pdf-navigation/overview).
- The **document load event** (fires after the PDF is parsed and pages are ready) is the correct moment to read **document information** (title, author, page count, etc.) and **page metrics**, and to trigger post‑load UI logic.
- Accessing the instance too early (before load completes) may cause null/undefined errors or incomplete information.

Expand Down Expand Up @@ -64,7 +64,7 @@ function App() {
// 2) Read loaded document details (shape depends on event payload/version)
console.log('documentLoad args:', args);

// 4) Call viewer APIs (after load)
// 3) Call viewer APIs (after load)
const pageCount =
(viewer && viewer.pageCount) ||
(args && args.pageCount) ||
Expand Down
2 changes: 1 addition & 1 deletion Document-Processing/PDF/PDF-Viewer/react/download.md
Original file line number Diff line number Diff line change
Expand Up @@ -174,5 +174,5 @@ export default function App() {

## See also

- [Toolbar items](./toolbar)
- [Toolbar items](./toolbar-customization/overview)
- [Feature Modules](./feature-module)
14 changes: 7 additions & 7 deletions Document-Processing/PDF/PDF-Viewer/react/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -1003,7 +1003,7 @@ root.render(<App />);

The [hyperlinkMouseOver](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkmouseoverevent) event triggers when hovering over a hyperlink.

- Event arguments: HyperlinkMouseOverArgs.
- Event arguments: [HyperlinkMouseOverArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/hyperlinkMouseOverArgs).

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Logeshwaran-SyncGit , Don't use uppercase in links


Example:

Expand Down Expand Up @@ -1217,7 +1217,7 @@ root.render(<App />);

The [moveSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#movesignatureevent) event triggers when a signature is moved across the page.

- Event arguments: `MoveSignatureEventArgs`.
- Event arguments: [MoveSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/moveSignatureEventArgs).

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Logeshwaran-SyncGit , Don't use uppercase in links


Example:

Expand Down Expand Up @@ -1331,7 +1331,7 @@ root.render(<App />);

The [pageMouseover](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pagemouseoverevent) event triggers when the mouse moves over a page.

- Event arguments: `PageMouseoverEventArgs`.
- Event arguments: [PageMouseoverEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageMouseoverEventArgs).

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Logeshwaran-SyncGit , Don't use uppercase in links


Example:

Expand Down Expand Up @@ -1369,7 +1369,7 @@ root.render(<App />);

The [pageOrganizerSaveAs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pageorganizersaveasevent) event triggers when a Save As action is performed in the page organizer.

- Event arguments: `PageOrganizerSaveAsEventArgs`.
- Event arguments: [PageOrganizerSaveAsEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageOrganizerSaveAsEventArgs).

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Logeshwaran-SyncGit , Don't use uppercase in links


Example:

Expand Down Expand Up @@ -1939,7 +1939,7 @@ root.render(<App />);

The [textSelectionStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#textselectionstartevent) event triggers when text selection is initiated.

- Event arguments: `TextSelectionStartEventArgs`.
- Event arguments: [TextSelectionStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSelectionStartEventArgs).

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Logeshwaran-SyncGit , Don't use uppercase in links


Example:

Expand Down Expand Up @@ -2017,5 +2017,5 @@ root.render(<App />);
See also:

- [Annotation events](./annotation/annotation-event)
- [Form field events](./form-designer/form-field-events)
- [Organize PDF events](./organize-pdf/organize-pdf-events)
- [Form field events](./forms/form-field-events)
- [Organize PDF events](./organize-pages/events)
54 changes: 27 additions & 27 deletions Document-Processing/PDF/PDF-Viewer/react/feature-module.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Feature module in React Pdfviewer component | Syncfusion
description: Learn here all about Feature module in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more.
title: Feature module in React PDF Viewer component | Syncfusion
description: Learn here all about Feature module in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more.
control: PDF Viewer
platform: document-processing
documentation: ug
Expand All @@ -12,39 +12,39 @@ domainurl: ##DomainURL##

The PDF Viewer features are organized into discrete modules so applications can include only the functionality they require. Inject the required modules to extend the viewer. The following modules are available:

* [**Toolbar**](./toolbar-customization/annotation-toolbar-customization): Built-in toolbar for user interaction.
* [**Magnification**](./magnification): Perform zoom operations for a better viewing experience.
* [**Navigation**](./interactive-pdf-navigation/page-navigation): Navigate across pages.
* [**LinkAnnotation**](./interactive-pdf-navigation/hyperlink-navigation): Navigate within the document or to external destinations via hyperlinks.
* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation): Navigate within the document using page thumbnails.
* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation): Navigate using document bookmarks (table of contents).
* [**TextSelection**](./textselection): Select and copy text from the document.
* [**TextSearch**](./text-search): Search for text across the document.
* [**Print**](./print): Print the entire document or specific pages directly from the browser.
* [**Toolbar**](./toolbar-customization/annotation-toolbar): Built-in toolbar for user interaction.
* [**Magnification**](./magnification/magnification): Perform zoom operations for a better viewing experience.
* [**Navigation**](./interactive-pdf-navigation/page): Navigate across pages.
* [**LinkAnnotation**](./interactive-pdf-navigation/hyperlink): Navigate within the document or to external destinations via hyperlinks.
* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail): Navigate within the document using page thumbnails.
* [**BookmarkView**](./interactive-pdf-navigation/bookmark): Navigate using document bookmarks (table of contents).
* [**TextSelection**](./text-selection/overview): Select and copy text from the document.
* [**TextSearch**](./text-search/overview): Search for text across the document.
* [**Print**](./print/overview): Print the entire document or specific pages directly from the browser.
* [**Annotation**](./annotation/text-markup-annotation): Add and edit annotations.
* [**FormFields**](./form-designer/create-programmatically): Work with form fields in the document.
* [**FormDesigner**](./form-designer/create-programmatically): Add or edit form fields in the document.
* [**FormFields**](./forms/form-designer): Work with form fields in the document.
* [**FormDesigner**](./forms/form-designer): Add or edit form fields in the document.

N> In addition to injecting required modules in an application, enable the corresponding properties to extend functionality for a PDF Viewer instance.

Refer to the following table.

| Module | Property to enable the functionality for a PDF Viewer instance |
|---|---|
|Toolbar|`<PdfViewerComponent enableToolbar= {true} ></PdfViewerComponent>`|
|Magnification|`<PdfViewerComponent enableMagnification= {true} ></PdfViewerComponent>`|
|Navigation|`<PdfViewerComponent enableNavigation= {true} ></PdfViewerComponent>`|
|LinkAnnotation|`<PdfViewerComponent enableHyperlink= {true} ></PdfViewerComponent>`|
|ThumbnailView|`<PdfViewerComponent enableThumbnail= {true} ></PdfViewerComponent>`|
|BookmarkView|`<PdfViewerComponent enableBookmark= {true} ></PdfViewerComponent>`|
|TextSelection|`<PdfViewerComponent enableTextSelection= {true} ></PdfViewerComponent>`|
|TextSearch|`<PdfViewerComponent enableTextSearch= {true} ></PdfViewerComponent>`|
|Print|`<PdfViewerComponent enablePrint= {true} ></PdfViewerComponent>`|
|Annotation|`<PdfViewerComponent enableAnnotation= {true} ></PdfViewerComponent>`|
|FormFields|`<PdfViewerComponent enableFormFields= {true} ></PdfViewerComponent>`|
|FormDesigner|`<PdfViewerComponent enableFormDesigner= {true} ></PdfViewerComponent>`|
|Toolbar|`<PdfViewerComponent enableToolbar={true} ></PdfViewerComponent>`|
|Magnification|`<PdfViewerComponent enableMagnification={true} ></PdfViewerComponent>`|
|Navigation|`<PdfViewerComponent enableNavigation={true} ></PdfViewerComponent>`|
|LinkAnnotation|`<PdfViewerComponent enableHyperlink={true} ></PdfViewerComponent>`|
|ThumbnailView|`<PdfViewerComponent enableThumbnail={true} ></PdfViewerComponent>`|
|BookmarkView|`<PdfViewerComponent enableBookmark={true} ></PdfViewerComponent>`|
|TextSelection|`<PdfViewerComponent enableTextSelection={true} ></PdfViewerComponent>`|
|TextSearch|`<PdfViewerComponent enableTextSearch={true} ></PdfViewerComponent>`|
|Print|`<PdfViewerComponent enablePrint={true} ></PdfViewerComponent>`|
|Annotation|`<PdfViewerComponent enableAnnotation={true} ></PdfViewerComponent>`|
|FormFields|`<PdfViewerComponent enableFormFields={true} ></PdfViewerComponent>`|
|FormDesigner|`<PdfViewerComponent enableFormDesigner={true} ></PdfViewerComponent>`|

## See also

* [Toolbar items](./toolbar)
* [Toolbar customization](./how-to/toolbar-customization)
* [Toolbar customization](./toolbar-customization/overview)
* [Custom toolbar](./toolbar-customization/custom-toolbar)
Loading