Load PDF documents dynamically in Blazor SfPdfViewer Component

4 Jul 20242 minutes 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 SfPdfViewer control using the LoadAsync() method dynamically.

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

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

<SfButton @onclick="clicked">Load Document</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath"
              Height="100%"
              Width="100%"
              @ref="Viewer">
</SfPdfViewer2>

@code{
    SfPdfViewer2 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);
        await Viewer.LoadAsync("data:application/pdf;base64," + base64String, null);
    }
}

View sample in GitHub.

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

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

<SfButton @onclick="clicked">Load Document</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath"
              Height="100%"
              Width="100%"
              @ref="Viewer">
</SfPdfViewer2>

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

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

NOTE

You can refer to our Blazor SfPdfViewer feature tour page for its groundbreaking feature representations. You can also explore our Blazor SfPdfViewer example to understand how to explains core features of SfPdfViewer.

See also