Create the PDF Viewer in a Splitter component in Blazor

17 Jul 20262 minutes to read

The Blazor Splitter organizes content into resizable, draggable panes. The following example shows how to place the PDF Viewer inside a Splitter pane so users can view a document alongside other UI content. The sample renders two panes a left pane with placeholder content and a right pane that hosts the SfPdfViewer loading the sample document.

@using Syncfusion.Blazor.SfPdfViewer
@using Syncfusion.Blazor.Layouts

<!--This splitter layout holds two panes-->
<SfSplitter Height="100%" Width="100%">
    <!--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-->
                <SfPdfViewer2 @ref="@viewer"
                              DocumentPath="@DocumentPath"
                              Height="100%"
                              Width="100%">
                </SfPdfViewer2>

            </ContentTemplate>
        </SplitterPane>

    </SplitterPanes>
</SfSplitter>

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

View sample in GitHub.

See also