Command Manager in Blazor SfPdfViewer Component

17 Jul 20263 minutes to read

The PDF Viewer supports mapping keyboard gestures to named commands so that pressing a defined key combination triggers a viewer action.

The PdfViewerCommandManager enables defining custom commands that execute when the specified key gesture is recognized.

Command execution

Provide a list of keyboard shortcuts and corresponding action names; the viewer raises CommandExecuted when a registered shortcut is detected.

  • Commands: Defines the collection of custom keyboard shortcuts and their action names.
  • CommandExecuted: Raised when a registered keyboard shortcut is detected; handle this event to perform the action.

How to create a custom command

Create custom keyboard commands by specifying an action name and the corresponding key gesture for the PDF Viewer.

  • ActionName: The name of the action to execute when the keyboard shortcut is pressed (for example, FitToWidth, FitToPage). The action name must match a recognized viewer action.

  • Gesture: The combination of keys and modifiers (Control, Shift, Alt, Meta). On macOS, Meta maps to the Command key.

Usage

Register commands with PdfViewerCommandManager and handle CommandExecuted to invoke viewer methods (for example, FitToWidthAsync or FitToPageAsync). See the CommandExecuted API documentation for recognized action names and expected behavior.

The following example registers two custom keyboard commands (FitToWidth and FitToPage) and handles them in CommandExecuted. The example uses SfPdfViewer2; use the component that matches the project version.

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 Height="100%"
              Width="100%"
              @ref="@pdfViewer"
              DocumentPath="@DocumentPath">
    <PdfViewerEvents CommandExecuted="@CommandExecute"></PdfViewerEvents>
    <PdfViewerCommandManager Commands="@command" ></PdfViewerCommandManager>                
</SfPdfViewer2>

@code {
    // Reference to the Pdf viewer 
    private SfPdfViewer2 pdfViewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    /// <summary>
    /// Defines the list of custom commands
    /// </summary>
    private 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>

    private 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();
        }
    }
}

View sample in GitHub

See also