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
6 changes: 3 additions & 3 deletions Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Keyboard accessibility in Blazor SfPdfViewer Component | Syncfusion
description: Checkout and learn here all about Keyboard accessibility in Syncfusion Blazor SfPdfViewer component and more.
description: Checkout and learn here all about Keyboard accessibility in Blazor SfPdfViewer component and more.
platform: document-processing
control: SfPdfViewer
documentation: ug
---

# Accessibility in Syncfusion® Blazor SfPdfViewer
# Keyboard accessibility in Blazor SfPdfViewer
The Blazor SfPdfViewer component follows established accessibility guidelines and standards, including the [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles), which are commonly used to evaluate accessibility.

The accessibility compliance for the Blazor SfPdfViewer component is outlined below.
Expand Down Expand Up @@ -94,7 +94,7 @@ The Blazor SfPdfViewer component follows the [keyboard interaction](https://www.

## Ensuring accessibility

The Blazor SfPdfViewer component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
The Blazor SfPdfViewer component's accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.

The accessibility compliance of the Blazor SfPdfViewer component is demonstrated in the following sample. Open the [SfPdfViewer accessibility sample](https://blazor.syncfusion.com/accessibility/sfpdfviewer) in a new window to evaluate the accessibility of the Blazor SfPdfViewer component with accessibility tools.

Expand Down
28 changes: 15 additions & 13 deletions Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,11 @@ Use Microsoft Edge’s built-in Read Aloud to listen to the PDF content.
- To start from a specific page, navigate to that page and click anywhere; reading begins from the first readable text at that location.
- To read only selected text, select the sentence or portion of text you want, then use Read Aloud to read just that selection.

The following steps describe a custom Read Aloud implementation that is triggered when text is selected in the Blazor PDF Viewer.

**Step 1:** Create and add a JavaScript file to the app and reference it in the head element.

```cshtml
```html

<head>
<script src="accessibility.js" type="text/javascript"></script>
Expand Down Expand Up @@ -217,7 +219,7 @@ function insertSrNode(div) {
}
return sr;
}
// Select SR text for screen reader - Mircosoft Reader
// Select SR text for screen reader - Microsoft Edge’s Screen Reader
function selectSrText(div) {
const sr = insertSrNode(div);
const selection = window.getSelection();
Expand All @@ -226,7 +228,7 @@ function selectSrText(div) {
selection.removeAllRanges();
selection.addRange(range);
}
// Move caret to first visible text node - Mircosoft Reader
// Move caret to first visible text node - Microsoft Edge’s Screen Reader
function collapseCaretToVisibleText(div) {
const textLayer = div.querySelector('.e-pv-text-layer');
if (textLayer) {
Expand All @@ -238,7 +240,7 @@ function collapseCaretToVisibleText(div) {
selection.addRange(range);
}
}
// Focus page for accessibility - Mircosoft Reader
// Focus page for accessibility - Microsoft Edge’s Screen Reader
function focusPageDiv(div) {
if (!div) return;
const textLayer = div.querySelector('.e-pv-text-layer');
Expand All @@ -251,21 +253,21 @@ function focusPageDiv(div) {
selectSrText(div);
collapseCaretToVisibleText(div);
}
// Wire accessibility handlers to page div - Mircosoft Reader
// Wire accessibility handlers to page div - Microsoft Edge’s Screen Reader
function wirePage(div) {
if (!div || div.hasAttribute('data-a11y-init')) return;
div.addEventListener('mousedown', () => focusPageDiv(div));
div.addEventListener('click', () => focusPageDiv(div));
div.setAttribute('data-a11y-init', 'true');
}

// Reader the selected text aloud - Mircosoft Reader
// Read the selected text aloud - Microsoft Edge’s Screen Reader
function readAloudText(text) {
window.speechSynthesis.cancel();
speakFromControls(text);
}

// Cancel speech and remove highlights - Mircosoft Reader
// Cancel speech and remove highlights - Microsoft Edge’s Screen Reader
function cancelReading() {
if (window.speechSynthesis?.speaking) {
window.speechSynthesis.cancel();
Expand All @@ -275,7 +277,7 @@ function wirePage(div) {
{% endhighlight %}
{% endtabs %}

**Step 3:** Add the following code to the `Home.razor`
**Step 3:** Add the following code to the `Home.razor` file.

{% tabs %}
{% highlight razor tabtitle="~/Home.razor" %}
Expand Down Expand Up @@ -330,14 +332,14 @@ function wirePage(div) {
## Windows Speech Synthesis API

Use the browser’s Windows Speech Synthesis API (speechSynthesis) to implement in-app Read Aloud functionality with custom controls. This approach:
- Provides playback controls, including Play and Pause/Resume.
- Provides playback controls, including Previous, Next, and Pause/Resume.
- Reads content line by line and can continue across multiple pages.
- Reads only the selected text when a selection is made.
- Works on modern browsers and platforms that support the Speech Synthesis API.

**Step 1:** Create and add a JavaScript file to the app and reference it in the head element.

```cshtml
```html

<head>
<script src="accessibility.js" type="text/javascript"></script>
Expand Down Expand Up @@ -737,7 +739,7 @@ function clearAllHighlights() {
const speechSynth = window.speechSynthesis;
isPaused ? speechSynth.resume() : speechSynth.pause();
}
// Cancel speech and remove highlights - Mircosoft Reader
// Cancel speech and remove highlights - Windows Speech Synthesis API
function cancelReading() {
if (window.speechSynthesis?.speaking) {
window.speechSynthesis.cancel();
Expand All @@ -748,7 +750,7 @@ function clearAllHighlights() {
{% endhighlight %}
{% endtabs %}

**Step 3:** Add the following code to the `Home.razor`
**Step 3:** Add the following code to the `Home.razor` file.

{% tabs %}
{% highlight razor tabtitle="~/Home.razor" %}
Expand Down Expand Up @@ -923,4 +925,4 @@ function clearAllHighlights() {

## See also

- [Blazor PDF Viewer example -Accessible PDF Reading](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/accessible-pdf-reading?theme=fluent2)
- [Blazor PDF Viewer example - Accessible PDF Reading](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/accessible-pdf-reading?theme=fluent2)
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: post
title: Create and modify annotations in Blazor PDF Viewer | Syncfusion
description: Learn how to create and modify annotations in Syncfusion Blazor PDF Viewer with UI and programmatic examples, plus quick links to all annotation types.
platform: document-processing
control: PDF Viewer
control: SfPdfViewer
documentation: ug
domainurl: ##DomainURL##
---
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: post
title: Remove annotations in Blazor PDF Viewer | Syncfusion
description: Learn how to remove/delete PDF annotations in Syncfusion Blazor PDF Viewer using UI options (context menu, toolbar, Delete key) and programmatic APIs.
platform: document-processing
control: PDF Viewer
control: SfPdfViewer
documentation: ug
domainurl: ##DomainURL##
---
Expand Down
67 changes: 33 additions & 34 deletions Document-Processing/PDF/PDF-Viewer/blazor/command-manager.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Command Manager in Blazor SfPdfViewer Component | Syncfusion
description: Learn how to configure the Command Manager to add custom keyboard shortcuts and handle command execution in the Syncfusion Blazor PDF Viewer.
description: Learn how to configure the Command Manager to add custom keyboard shortcuts and handle command execution in the Blazor PDF Viewer.
platform: document-processing
control: SfPdfViewer
documentation: ug
Expand Down Expand Up @@ -48,39 +48,38 @@ The following example registers two custom keyboard commands (`FitToWidth` and `
SfPdfViewer2 pdfViewer;
public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    /// <summary>
    /// Defines the list of custom commands
    /// </summary>

    public List<KeyboardCommand> command = new List<KeyboardCommand>()
    {
        new KeyboardCommand()
        {
            ActionName = "FitToWidth",
            Gesture = new KeyGesture() { Key = PdfKeys.W, Modifiers = PdfModifierKeys.Shift }
        },
        new KeyboardCommand()
        {
            ActionName = "FitToPage",
            Gesture = new KeyGesture() { Key = PdfKeys.P, Modifiers = PdfModifierKeys.Alt }
}
    };

    /// <summary>
    /// Custom command execution.
    /// </summary>

    public void CommandExecute(CommandExecutedEventArgs args)
    {
        if(args.Modifiers == PdfModifierKeys.Shift && args.Key == PdfKeys.W)
        {
            pdfViewer.FitToWidthAsync();
        }
        else if (args.Modifiers == PdfModifierKeys.Alt && args.Key == PdfKeys.P)
        {
            pdfViewer.FitToPageAsync();
        }
    }
/// <summary>
/// Defines the list of custom commands
/// </summary>
public List<KeyboardCommand> command = new List<KeyboardCommand>()
{
new KeyboardCommand()
{
ActionName = "FitToWidth",
Gesture = new KeyGesture() { Key = PdfKeys.W, Modifiers = PdfModifierKeys.Shift }
},
new KeyboardCommand()
{
ActionName = "FitToPage",
Gesture = new KeyGesture() { Key = PdfKeys.P, Modifiers = PdfModifierKeys.Alt }
}
};

/// <summary>
/// Custom command execution.
/// </summary>

public async Task CommandExecute(CommandExecutedEventArgs args)
{
if (args.Modifiers == PdfModifierKeys.Shift && args.Key == PdfKeys.W)
{
await pdfViewer.FitToWidthAsync();
}
else if (args.Modifiers == PdfModifierKeys.Alt && args.Key == PdfKeys.P)
{
await pdfViewer.FitToPageAsync();
}
}
}

```
Expand Down
20 changes: 10 additions & 10 deletions Document-Processing/PDF/PDF-Viewer/blazor/context-menu.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
layout: post
title: Context Menu in Blazor PDF Viewer | Syncfusion
description: Learn how to customize the context menu in the Syncfusion Blazor PDF Viewer, including default items and custom configuration options using ContextMenuSettings.
description: Learn how to customize the context menu in the Blazor PDF Viewer, including default items and custom configuration options using ContextMenuSettings.
platform: document-processing
control: PDF Viewer
control: SfPdfViewer
documentation: ug
domainurl: ##DomainURL##
---
Expand All @@ -21,9 +21,9 @@ The context menu is a right-click menu that displays relevant actions based on t
The context menu in Blazor PDF Viewer supports the following:

* **Enable or Disable**: Toggle the context menu availability using the [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_EnableContextMenu) property.
* **Trigger Action**: Choose between right-click or mouse-up actions to display the menu.
* **Trigger Action**: Choose between right-click, mouse-up, or `None` to display the menu.
* **Customize Menu Items**: Select which menu items should appear in the context menu.
* **Default Items**: Support for standard actions like Copy, Cut, Paste, Delete, Comment, and annotation markup options (Highlight, Underline, Strikethrough, Squiggly).
* **Default Items**: Provides standard actions (Copy, Cut, Paste, Delete, Comment) and annotation markup options (Highlight, Underline, Strikethrough, Squiggly).

### Available Context Menu Items

Expand All @@ -42,7 +42,7 @@ The Blazor PDF Viewer context menu supports the following built-in items, which
| **Strikethrough** | Applies strikethrough markup to selected text. |
| **Squiggly** | Applies squiggly underline markup to selected text. |
| **Properties** | Opens the properties dialog for the selected element (e.g., form fields). |
| **ScaleRatio** | Displays scale ratio options for measurement annotations. |
| **ScaleRatio** | Displays scale ratio options for measurement annotations, allowing the user to set the measurement scale used by the PDF document. |

The context menu adapts its items based on the selected element. The following screenshots show the context menu in different scenarios:

Expand All @@ -54,7 +54,7 @@ The context menu adapts its items based on the selected element. The following s

![context menu on annotation](./images/context-menu-annotation.png)

* **On Form Fields** — Shows form field operations (designer mode only)
* **On Form Fields** — Shows form field operations (Designer mode only)

![context menu on form fields](./images/context-menu-forms.png)

Expand All @@ -64,7 +64,7 @@ The context menu adapts its items based on the selected element. The following s

## Enable or Disable the Context Menu

By default, the context menu is enabled in the Blazor PDF Viewer. You can control its availability using the [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_EnableContextMenu) property within [PdfViewerContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html).
By default, the context menu is enabled in the Blazor PDF Viewer. You can control its availability using the [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_EnableContextMenu) property within [PdfViewerContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html).

### Basic Configuration

Expand Down Expand Up @@ -145,7 +145,7 @@ The following example configures the context menu to appear on mouse-up:

## Disable the Context Menu Entirely

To prevent the context menu from appearing, set [ContextMenuAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_ContextMenuAction) to `None`:
To prevent the context menu from appearing, set the [ContextMenuAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_ContextMenuAction) property to `None`:

{% tabs %}
{% highlight razor%}
Expand All @@ -168,7 +168,7 @@ The following example demonstrates how to configure the context menu using the
[`PdfViewerContextMenuSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html) API, including
[`EnableContextMenu`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_EnableContextMenu),
[`ContextMenuAction`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_ContextMenuAction), and
[`ContextMenuItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_ContextMenuItems) properties
[`ContextMenuItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerContextMenuSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerContextMenuSettings_ContextMenuItems) properties.

{% tabs %}
{% highlight razor %}
Expand Down Expand Up @@ -206,7 +206,7 @@ The following example demonstrates how to configure the context menu using the

After completing this configuration, the context menu will appear with all the specified items when users right-click on document elements.

## Related Topics
## See also

* [Getting Started with PDF Viewer](./getting-started/web-app)
* [Annotations in Blazor PDF Viewer](./annotation/overview)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
layout: post
title: Document Handling in Blazor PDF Viewer Component | Syncfusion
description: Learn how to load and render large PDF files in the Syncfusion Blazor PDF Viewer using chunk-based processing
control: PDF Viewer
control: SfPdfViewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
layout: post
title: Load Password Protected PDFs in Blazor PDF Viewer | Syncfusion
description: Learn how to open password-protected PDF files in the Syncfusion Blazor PDF Viewer by providing the password in the documentPath object.
control: PDF Viewer
control: SfPdfViewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
layout: post
title: Preprocess PDF Document in Blazor PDF Viewer | Syncfusion
description: Learn how to preprocess PDF documents using Syncfusion PDF Library before displaying them in the Blazor PDF Viewer.
control: PDF Viewer
control: SfPdfViewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,35 @@
---
layout: post
title: Load the security documents in Blazor PDF Viewer | Syncfusion
description: Learn how Blazor SfPdfViewer opens password-protected PDFs and enforces owner permissions like print, copy and edit.
title: Document security in Blazor SfPdfViewer | Syncfusion
description: Learn how Blazor SfPdfViewer opens password-protected PDFs and enforces document permission restrictions like print, copy, and edit.
platform: document-processing
control: SfPdfViewer
documentation: ug
---

# Document security in Blazor SfPdfViewer

This article explains how `SfPdfViewer` handles secured PDF documents, including password-protected files and documents with permission restrictions. It describes expected behavior when opening secured files and links to task-focused guides for implementation details.
This article explains how `SfPdfViewer` handles secured PDF documents, including password-protected files and documents with permission restrictions. It describes expected behavior when opening secured files. It links to task-focused guides for implementation details.

The PDF specification defines two common security configurations:

- [Password-protected documents](./document-security/password-protected) — a password is required to decrypt and open the file.
- [Permission-restricted documents](./document-security/permission) — an owner password sets granular permissions such as printing, copying, editing, annotating, and form filling.

Behavior and expectations:
### Behavior and expectations

- When a password-protected PDF is loaded, the viewer prompts for the password. If the password is incorrect or omitted, the document does not open.
- For permission-restricted PDFs, the viewer reads and enforces the document’s security flags. Disallowed actions (for example, print, copy, or annotate) are disabled in the UI and blocked through APIs.
- For permission-restricted PDFs, the viewer reads and enforces the document's security flags. Disallowed actions (for example, print, copy, or annotate) are disabled in the UI and blocked through APIs.

The viewer enforces the following document permission flags:

- **Print**: when disallowed, the print action is not available.
- **Copy**: when disallowed, copy commands are disabled and text selection may be limited.
- **Edit / Modify content**: when disallowed, content editing actions are not available.
- **Annotate**: when disallowed, the annotation toolbar and related actions are disabled.
- **Form filling**: when disallowed, form fields are read-only.

### See also

- [Password-protected documents](./document-security/password-protected)
- [Permission-restricted documents](./document-security/permission)
Loading