Magnification in Blazor SfPdfViewer Component

17 Jul 202610 minutes to read

The built-in toolbar of SfPdfViewer includes the following zoom options:

• Zoom In: Increases the zoom level (document magnification) by preset steps.
• Zoom Out: Decreases the zoom level by preset steps.
• Zoom To: Sets the zoom level to a specified value.
• Fit Page: Fits the entire page within the available viewport.
• Fit Width: Fits the page to the viewport width.
• Fit Height: Fits the page to the viewport height.

Enable or Disable Magnification in Blazor SfPdfViewer Component

Enable or disable magnification in the default toolbar by setting the EnableMagnification property.

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 Height="100%"
              Width="100%"
              DocumentPath="@DocumentPath"
              EnableMagnification="false" />

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

Programmatic Zoom Operations

Zoom operations can also be performed programmatically using APIs such as ZoomInAsync, ZoomOutAsync, ZoomAsync, FitToPageAsync, FitToWidthAsync, and FitToHeightAsync.

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.SfPdfViewer

<div style="display:inline-block">
    <SfButton OnClick="OnZoomInClick">Zoom In</SfButton>
</div>

<div style="display:inline-block">
    <SfButton OnClick="OnZoomOutClick">Zoom Out</SfButton>
</div>

<div style="display:inline-block">
    <SfTextBox @ref="@TextBox"></SfTextBox>
</div>

<div style="display:inline-block">
    <SfButton OnClick="OnZoomClick">Zoom</SfButton>
</div>

<div style="display:inline-block;">
    <SfButton OnClick="OnFitPageClick">Fit To Page</SfButton>
</div>

<div style="display:inline-block">
    <SfButton OnClick="OnFitWidthClick">Fit To Width</SfButton>
</div>

<div style="display:inline-block"> 
    <SfButton OnClick="OnFitHeightClick">Fit To Height</SfButton> 
</div> 

<SfPdfViewer2 Height="100%"
              Width="100%"
              DocumentPath="@DocumentPath"
              @ref="@Viewer" />

@code {
    private SfPdfViewer2 Viewer;
    SfTextBox TextBox;
    private string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";

    private async void OnZoomInClick(MouseEventArgs args)
    {
        await Viewer.ZoomInAsync();
    }

    private async void OnZoomOutClick(MouseEventArgs args)
    {
        await Viewer.ZoomOutAsync();
    }

    private async void OnFitPageClick(MouseEventArgs args)
    {
        await Viewer.FitToPageAsync();
    }

    private async void OnZoomClick(MouseEventArgs args)
    {
        if (int.TryParse(TextBox.Value, out int zoomValue))
        {
            await Viewer.ZoomAsync(zoomValue);
        }
    }

    private async void OnFitWidthClick(MouseEventArgs args)
    {
        await Viewer.FitToWidthAsync();
    }

    private async void OnFitHeightClick(MouseEventArgs args) 
    { 
        await Viewer.FitToHeightAsync(); 
    } 
}

NOTE

SfPdfViewer supports zoom values from 10% to 400%.

Minimum and Maximum Zoom Values in Blazor SfPdfViewer Component

Configure minimum and maximum zoom levels using the MinZoomValue and MaxZoomValue properties. These settings help:

• Define a zoom range for better usability
• Prevent excessive zooming that can distort content or impact performance
• Ensure readability on smaller screens
• Maintain consistent zoom behavior across devices

Setting minimum and maximum zoom values

Specify the zoom limits during component initialization with integer values representing percentages.

Basic usage of Minimum and Maximum Zoom Values

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 DocumentPath="@DocumentPath"
              MinZoomValue="50"
              MaxZoomValue="200"
              Width="100%"
              Height="100%">
</SfPdfViewer2>

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

The following image shows the viewer with the configured zoom limits.

Zoom range scenarios

• Limit zoom to a specific range for readability and usability.
• Prevent distortion or performance issues due to excessive zooming.
• Ensure readability on smaller screens by setting a minimum zoom.

Invalid input handling

SfPdfViewer handles invalid input values as follows:

• Values below 1: Automatically fall back to the default minimum (10)
• When MinZoomValue exceeds MaxZoomValue: MaxZoomValue is adjusted to match MinZoomValue

Dynamic zoom value configuration

Minimum and maximum zoom values can be changed dynamically at runtime.

@using Syncfusion.Blazor.SfPdfViewer
@using Syncfusion.Blazor.Buttons

<SfButton OnClick="SetDynamicValues">Set Dynamic Values</SfButton>
<SfButton OnClick="SetValueBeyondLimit">Set Value Beyond Limit</SfButton>
<SfButton OnClick="SwapMinMaxValue">Swap MinMax Value</SfButton>

<SfPdfViewer2 @ref="viewer" 
              DocumentPath="@DocumentPath" 
              Height="100%" 
              Width="100%" 
              MaxZoomValue="@maxZoom" 
              MinZoomValue="@minZoom">
</SfPdfViewer2>

@code {
    private SfPdfViewer2? viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    private int maxZoom = 200;
    private int minZoom = 50;

    private void SetDynamicValues()
    {
        maxZoom = 260;
        minZoom = 25;
    }

    private void SetValueBeyondLimit()
    {
        // Values exceed the supported 10%–400% range to demonstrate invalid input handling.
        maxZoom = 500;
        minZoom = 2;
    }

    private void SwapMinMaxValue()
    {
        // Intentionally assign an inverted range to demonstrate auto-correction behavior.
        maxZoom = 50;
        minZoom = 200;
    }
}

The following image shows the dynamic runtime configuration in action.

Integration with zoom operations

The configured zoom limits apply to all zoom operations, including programmatic methods.

@using Syncfusion.Blazor.SfPdfViewer
@using Syncfusion.Blazor.Buttons

<SfButton OnClick="OnZoomInClick">Zoom In</SfButton>
<SfButton OnClick="OnZoomOutClick">Zoom Out</SfButton>
<SfButton OnClick="OnFitPageClick">Fit To Page</SfButton>
<SfButton OnClick="OnFitWidthClick">Fit To Width</SfButton>
<SfButton OnClick="OnFitHeightClick">Fit To Height</SfButton>

<SfPdfViewer2 @ref="viewer" 
              DocumentPath="@DocumentPath" 
              Height="100%" 
              Width="100%" 
              MaxZoomValue="200" 
              MinZoomValue="50">
</SfPdfViewer2>

@code {
    private SfPdfViewer2? viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    private async void OnZoomInClick()
    {
        await viewer.ZoomInAsync();
    }

    private async void OnZoomOutClick()
    {
        await viewer.ZoomOutAsync();
    }

    private async void OnFitPageClick()
    {
        await viewer.FitToPageAsync();
    }

    private async void OnFitWidthClick()
    {
        await viewer.FitToWidthAsync();
    }

    private async void OnFitHeightClick() 
    { 
        await viewer.FitToHeightAsync();
    } 
}

The following image shows zoom limits applied to the built-in zoom operations.

Integration with tile rendering

Zoom limits work with tile rendering to improve performance at higher zoom levels. The example demonstrates broader limits for illustration; apply appropriate bounds for production scenarios. The viewer supports 10%–400% by default unless otherwise configured.

@using Syncfusion.Blazor.SfPdfViewer
@using Syncfusion.Blazor.Buttons

<SfButton OnClick="EnableTileRendering">Enable Tile Rendering</SfButton>

<SfPdfViewer2 @ref="viewer" 
              DocumentPath="@DocumentPath" 
              Height="100%" 
              Width="100%" 
              MaxZoomValue="500" 
              MinZoomValue="25">
    <PdfViewerTileRenderingSettings EnableTileRendering="enableTile" 
                                   X="@xValue" 
                                   Y="@yValue">
    </PdfViewerTileRenderingSettings>
</SfPdfViewer2>

@code {
    private SfPdfViewer2? viewer;
    private bool enableTile = false;
    private int xValue = 3;
    private int yValue = 3;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    private void EnableTileRendering()
    {
        enableTile = true;
    }
}

Optimizing Zoom Performance with RestrictZoomRequest

Use the RestrictZoomRequest property to optimize performance during zoom operations. This property controls how page images are regenerated on the client during zoom changes.

RestrictZoomRequest Property

Property Value: A boolean value that controls how images are regenerated during zoom operations. By default it is false.

• When set to true: A single image is generated at 100% zoom and reused across all zoom levels. This reduces client-side processing and improves performance on resource-constrained devices, with potential clarity reduction at zoom levels other than 100%.
• When set to false (default): Page images are regenerated for each zoom level, providing a more visually accurate experience at the cost of increased client-side processing.

Basic Usage of RestrictZoomRequest in Blazor SfPdfViewer Component

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 DocumentPath="@DocumentPath"
              Height="600px"
              Width="100%"
              RestrictZoomRequest="true">
</SfPdfViewer2>

@code {
    private string DocumentPath { get; set; } = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
}

The following image shows the viewer with RestrictZoomRequest enabled.

See also

• Navigation in Blazor SfPdfViewer Component