How to Remove the Zoom Option from the Blazor PDF Viewer

How to Remove the Zoom Option from the Blazor PDF Viewer

Description:

This article demonstrates how to remove the zoom option from the Syncfusion Blazor PDF Viewer by customizing the toolbar settings. After following the steps in this guide, users will be able to load a PDF file into the viewer and modify the toolbar to exclude the zoom tool while retaining other useful features.

Solution:

To remove the zoom option from the Syncfusion Blazor PDF Viewer, configure the ToolbarItems property of the PdfViewerToolbarSettings component and exclude ToolbarItem.ZoomTool. This will ensure that the zoom functionality is not available in the viewer’s toolbar, while still keeping other tools like navigation, search, and print options. You can easily achieve this by modifying the ToolbarItems property of the PdfViewerToolbarSettings component.

Prerequisites:

1. Syncfusion Blazor PDF Viewer Setup: Ensure you have installed and set up the Syncfusion Blazor PDF Viewer component in your Blazor project. If you haven’t already done so, you can follow the Syncfusion Blazor PDF Viewer - Getting Started guide.
2. Basic Knowledge of Blazor: Familiarity with Blazor components and how to use them will be helpful in understanding and implementing this solution.

Code Snippet:

Use this Code Snippet to remove the zoom option from the toolbar of the Syncfusion Blazor PDF Viewer. This code configures the PDF Viewer with a customized toolbar where the zoom option is excluded:

@page "/"
@using Syncfusion.Blazor.SfPdfViewer
<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
              Height="100%"
              Width="100%">
              <PdfViewerToolbarSettings ToolbarItems="@ToolbarItems"></PdfViewerToolbarSettings>
</SfPdfViewer2>

@code {
    private string DocumentPath { get; set; } = "wwwroot/Data/SinglePage.pdf";

    List<ToolbarItem> ToolbarItems = new List<ToolbarItem>()
    {
        ToolbarItem.OpenOption,
        ToolbarItem.PageNavigationTool,
        ToolbarItem.SelectionTool,
        ToolbarItem.PanTool,
        ToolbarItem.UndoRedoTool,
        ToolbarItem.CommentTool,
        ToolbarItem.SubmitForm,
        ToolbarItem.SearchOption,
        ToolbarItem.AnnotationEditTool,
        ToolbarItem.PrintOption,
        ToolbarItem.DownloadOption,
    };
}

Key Features Used in the Code:

1. SfPdfViewer2: The latest PDF viewer component for rendering and interacting with PDF files in Blazor.
2. PdfViewerToolbarSettings: Allows customization of the toolbar by specifying which tools to include or exclude.
3. ToolbarItem Enum: Defines the available toolbar options.

Sample:

You can find the full sample code in our GitHub repository

Conclusion:

I hope this article has guided you through the process of removing the zoom option from the Syncfusion Blazor PDF Viewer. By following the steps outlined above, you can easily customize the toolbar to suit your application’s needs and enhance the user experience.

You can refer to Blazor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!