Create PDF Viewer in Splitter Component in Blazor PDF Viewer Component

5 Dec 20241 minute to read

You can use Splitter to render the PDF Viewer while rendering more than one component. The following code snippet explains how to render the PDF Viewer component inside a Splitter pane. In this example, the Syncfusion® Splitter component is used to render PDF Viewer.

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

<!--This splitter layout holds two panes-->
<SfSplitter Height="640px" 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-->
                <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";
}

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.