Load a specific PDF on initial load in Blazor SfPdfViewer

17 Jul 20261 minute to read

Load a specific PDF on initial display and change the document at runtime in the Blazor SfPdfViewer component. To set the initial document, assign the DocumentPath property to a file path/URL or a data URI (base64). Updating the DocumentPath property reloads the viewer with the new document.

@inject HttpClient Http;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.SfPdfViewer;

<SfButton OnClick="LoadAnotherDocument">Load Another Document</SfButton>

<SfPdfViewer2 Height="100%"
              Width="100%"
              DocumentPath="@DocumentPath">
</SfPdfViewer2>


@code
{
    private string DocumentPath = "Data/PDF_Succinctly.pdf";

    private async Task LoadAnotherDocument()
    {
        //Sends a GET request to a specified Uri and returns the response body as a byte array.
        byte[] byteArray = await Http.GetByteArrayAsync("Data/FormFillingDocument.pdf");
        //Converts the byte array into base64 string.
        string base64String = Convert.ToBase64String(byteArray);
        //Sets the base64 string as document path for the PDF Viewer.
        DocumentPath = "data:application/pdf;base64," + base64String;
    }
}

When the Load Another Document button is clicked, the LoadAnotherDocument method runs. It uses HttpClient to download the PDF as a byte array, converts it to a base64 string, and then updates the DocumentPath property with a data URI. This updates the viewer to display the new document.

View sample in GitHub.

See also