Load desired PDF for initial loading in Blazor PDF Viewer Component

17 Dec 20221 minute to read

You can load your own PDF document for initial loading as well as change document at run-time in PDF Viewer hosted sample. To achieve that, you need to add your document in the server project and refer api/values as ServiceUrl in client project.

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

<SfButton OnClick="LoadAnotherDocument">Load Another Document</SfButton>
<SfPdfViewer ServiceUrl="/api/Values" DocumentPath="@DocumentPath" Height="900px"></SfPdfViewer>

@code
{
    //Sets the PDF document path for initial loading.
    public string DocumentPath { get; set; } = "PDF_Succinctly1.pdf";

    private async Task LoadAnotherDocument()
    {
        //Sends a GET request to a specified Uri and return 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;  
    }
}

NOTE

View sample in GitHub.