Load PDF documents dynamically in Blazor PDF Viewer Component

12 Aug 20211 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 void clicked()
    {
        byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/Data/Python_Succinctly.pdf");
        string base64String = Convert.ToBase64String(byteArray);
        Viewer.Load("data:application/pdf;base64," + base64String, null);
    }
}

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 void clicked()
    {
        Viewer.Load("wwwroot/data/Python_Succinctly.pdf", null);
    }
}

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.