Load PDF documents dynamically in Blazor PDF Viewer Component

7 Oct 20241 minute to read

At times, you might need to switch or load the PDF documents dynamically after the initial load operation. To achieve this, load the PDF document as a base64 string or file path in PDF Viewer control using the Load() method dynamically.

The following code example shows how to load a bas64 string dynamically.

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

<SfButton @onclick="clicked">Load Document</SfButton>
<SfPdfViewerServer DocumentPath="@DocumentPath" Height="500px" Width="1060px" @ref="Viewer"></SfPdfViewerServer>

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

    public async void clicked()
    {
        byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/Data/Python_Succinctly.pdf");
        string base64String = Convert.ToBase64String(byteArray);
        Viewer.LoadAsync("data:application/pdf;base64," + base64String, null);
    }
}

NOTE

View sample in GitHub.

The following code example shows how to load the PDF dynamically by specifying file path.

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

<SfButton @onclick="clicked">Load Document</SfButton>
<SfPdfViewerServer DocumentPath="@DocumentPath" Height="500px" Width="1060px" @ref="Viewer"></SfPdfViewerServer>

@code{
    SfPdfViewerServer Viewer;
    private string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";

    public async void clicked()
    {
        Viewer.LoadAsync("wwwroot/data/Python_Succinctly.pdf", null);
    }
}

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.