Print the SfPdfViewer component inside the Dialog component in Blazor
14 Oct 20252 minutes to read
The SfPdfViewer supports printing the loaded PDF document by default. The following example hosts the viewer inside a Syncfusion Dialog (popup) and triggers printing automatically after the PDF finishes loading.
The following code illustrates how to perform print action once SfPdfViewer is loaded.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.SfPdfViewer
<div id="target" style="width:800px;height:500px">
<SfButton @onclick="OnClick">Open PDF Viewer</SfButton>
<SfDialog @ref="@dialog"
Target="#target"
MinHeight="100%"
Width="100%"
CloseOnEscape="true"
AllowDragging="true"
Visible="false"
IsModal="true"
Header="@Header"
ShowCloseIcon="false">
<SfButton @onclick="OnClickopen">Open PDF Document</SfButton>
<SfPdfViewer2 @ref="viewer"
Width="100%"
Height="100%">
<PdfViewerEvents DocumentLoaded="@documentLoad">
</PdfViewerEvents>
</SfPdfViewer2>
</SfDialog>
</div>
@code{
SfPdfViewer2 viewer;
SfDialog dialog;
public void OnClick(MouseEventArgs args)
{
//Method to show the dialog window.
this.dialog.Show(true);
}
//Triggers when the dialog is opened.
public async void OnClickopen(MouseEventArgs args)
{
//Reads the contents of the file into a byte array, and then closes the file.
byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/data/HTTP Succinctly.pdf");
//Converts the byte array in to base64 string.
string base64String = Convert.ToBase64String(byteArray);
//PDF document will get loaded from the base64 string.
await viewer.LoadAsync("data:application/pdf;base64," + base64String, null);
}
private async void documentLoad(LoadEventArgs args)
{
//Perform print action on the SfPdfViewer.
await viewer.PrintAsync();
}
public string Header { get; set; } = "SfPdfViewer";
}