Search results

Create PDF Viewer in a popup window in Blazor PDF Viewer component

For quick view, you might need to display the PDF file in a dialog window. The following code snippet explains how to use the PDF Viewer component inside a dialog window. In this example, the Syncfusion’s dialog component is used for Blazor.

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.PdfViewerServer

<div id="target" style="width:800px;height:500px">
    <SfButton @onclick="OnClick">Open PDF Viewer</SfButton>
    <SfDialog @ref="@dialog" Target="#target" Width="1060px" Visible="false"
        IsModal="true" Header= "@Header" ShowCloseIcon="true">
        <DialogEvents OnOpen="OnOpen"></DialogEvents>
        <SfPdfViewerServer @ref="@viewer"/>
    </SfDialog>
</div>
@code{
        SfPdfViewerServer viewer;
        SfDialog dialog;

        public void OnClick(MouseEventArgs args)
        {
            this.dialog.Show();
        }

        public void OnOpen(BeforeOpenEventArgs args)
        {
            viewer.Load(DocumentPath, null);
        }
        public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
        public string Header { get; set; } = "PDF Viewer";
}