Load PDF documents dynamically in Blazor SfPdfViewer Component
7 Oct 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);
}
}
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.