Load PDF documents dynamically in Blazor SfPdfViewer Component

14 Oct 20252 minutes to read

In many scenarios, a PDF document must be switched or reloaded after the initial load. Use the LoadAsync() method of the SfPdfViewer component to load a PDF from a base64 data URL or from a file/URL path at runtime.

The following code example shows how to load a base64 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.

NOTE

  • In Blazor Server, files can be read from the server file system. Ensure the path points to an existing file and that casing matches the actual folder and file names.
  • In Blazor WebAssembly, direct access to the server file system is not available. To generate a base64 string, fetch the file using HttpClient or call a web API, then convert the received bytes to a base64 string before calling LoadAsync.

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

  • LoadAsync accepts an accessible URL or a path that resolves to a publicly served file. Ensure the target file is available under the app’s static file directory (commonly wwwroot) and that the request path correctly maps to that file.
  • If the specified path or URL is not reachable, the request may result in a 404 response and the document will not load. Verify the file location, URL accessibility, and case sensitivity.

NOTE

You can refer to our Blazor SfPdfViewer feature tour page for detailed feature overviews. You can also explore the Blazor SfPdfViewer example to understand the core features of SfPdfViewer.

See also