Update PDF Viewer size at run-time in Blazor PDF Viewer Component

17 Dec 20222 minutes to read

You can stretch the PDF Viewer size to its container size while resizing the container at runtime. The following code snippet explains how to update the PDF Viewer size while resizing the Splitter at runtime. In this example, the Syncfusion’s Splitter component is used.

@using Syncfusion.Blazor.PdfViewer
@using Syncfusion.Blazor.PdfViewerServer
@using Syncfusion.Blazor.Layouts

<!--This splitter layout holds two panes-->
<SfSplitter Height="640px" Width="100%">
    <SplitterEvents Resizing="@onresize"></SplitterEvents>
    <!--Configures one or more panes to construct different layouts-->
    <SplitterPanes>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <div> Left pane </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="200px">
            <ContentTemplate>
                <!--Build the PDF Viewer inside a splitter pane-->
                <SfPdfViewerServer @ref="@viewer" DocumentPath="@DocumentPath">                   
                </SfPdfViewerServer>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code{

    SfPdfViewerServer viewer;
    
    //Sets the document path for initial loading.
    private string DocumentPath { get; set; } = "wwwroot/data/PDF Succinctly.pdf";

    //This method will get invoked when the splitter is resized.
    private void onresize()
    {
        //This method will update the PDF Viewer size when the container size is updated at runtime.
        viewer.UpdateViewerContainerAsync();
    }

}

NOTE

View sample in GitHub.

NOTE

You can refer to our Blazor PDF Viewer feature tour page for its groundbreaking feature representations. You can also explore our Blazor PDF Viewer example to understand how to explains core features of PDF Viewer.