Print large page documents in SfPdfViewer component in Blazor
13 Jan 20251 minute to read
This guide demonstrates how to implement a custom printing solution for large PDF documents in the Syncfusion® Blazor SfPdfViewer component.
Implement Print Handler
Add a custom print toolbar item to the primary toolbar of the SfPdfViewer, and implement a click handler to handle its functionality. The handler retrieves the byte array of the loaded PDF document and invokes a JavaScript function to print the PDF on the client-side.
private async Task ClickAction(ClickEventArgs Item)
{
if (Item.Item.Id == "print" && Viewer != null)
{
//get the byte array of loaded PDF
byte[] bytes = await Viewer.GetDocumentAsync();
//send the byte array to client
await JSRuntime.InvokeVoidAsync("printPDF", bytes);
}
}Add JavaScript Function
Add a printPDF function to your JavaScript file that converts the byte array into a Blob object and generates a Blob URL for the loaded PDF. The Blob URL is then used to open the PDF in a new tab or trigger the print dialog.
// Convert the byte array to a Blob object
const blob = new Blob([byteArray], { type: 'application/pdf' });
// Generate a Blob URL for the loaded PDF
const blobUrl = URL.createObjectURL(blob);The Blob URL is opened in a new browser window or tab, and the native window.print() function is called to execute the print operation.
// Open the Blob URL in a new window or tab
const printWindow = window.open(blobUrl, '_blank');
// open the print window of browser
const tryPrint = () => {
printWindow.focus();
printWindow.print();
};NOTE
Ensure that users have pop-ups enabled for your site in their browser settings, as this solution opens the PDF in a new window or tab for printing.
