Syncfusion AI Assistant

How can I help you?

Create a SfPdfViewer within a popup window in Blazor

14 Oct 20252 minutes to read

For a quick preview experience, the PDF viewer can be hosted inside a dialog (popup) window. The following example demonstrates placing the SfPdfViewer component inside a Syncfusion® Dialog in a Blazor application. Selecting the Open PDF Viewer button opens a modal dialog sized to its container, and the viewer loads the specified document in the Created event.

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

<div id="target" style="width:800px;height:500px">

    <SfButton @onclick="OnClick">Open PDF Viewer</SfButton>

    <SfDialog @ref="@Dialog"
              Target="#target"
              Width="100%"
              Visible="false"
              IsModal="true"
              Header="@Header"
              ShowCloseIcon="true">
        <SfPdfViewer2 @ref="Viewer">
            <PdfViewerEvents Created="Created"></PdfViewerEvents>
        </SfPdfViewer2>
    </SfDialog>

</div>

@code {
    public SfPdfViewer2 Viewer { get; set; }
    SfDialog Dialog;

    public async void OnClick(MouseEventArgs args)
    {
        await this.Dialog.ShowAsync();
    }

    private async void Created()
    {
        await Viewer.LoadAsync(DocumentPath, null);
    }

    public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
    public string Header { get; set; } = "PDF Viewer";
}

View the popup dialog sample on GitHub

See also