How to handle Report Print, Export, and Server Request Events in Blazor App

This tutorial explains how to handle print progress, export progress, and server request events in the Bold Reports^® Web Report Viewer within a Blazor application. The video demonstrates how developers can track long-running operations and customize request handling during report processing.

Setup

Add the following code to the index.razor file in the Pages folder. This configures the report viewer options and renders the Bold Reports^® Viewer through JavaScript interop.

BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();

// Used to render the Bold Report Viewer component in Blazor page.

public async Task RenderReportViewer()

{

    viewerOptions.ReportName = "sales-order-detail";
    viewerOptions.ServiceURL = "/api/BoldReportsAPI";
    viewerOptions.AuthorizationToken = string.Empty;


    DotNetObjectReference<Index> dotNetReference = DotNetObjectReference.Create(this);
    await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", dotNetReference, "report-viewer", viewerOptions, "OnPrintProgressChanged");

}

Print Progress Changed

Fires whenever the print operation progress changes. This event can be used to display print status or progress information to users.

Razor Page

Add the following code in the index.razor file in the Pages folder.

[JSInvokable]
public Task OnPrintProgressChanged(string args)
{
    return ShowToastAsync("Printing report in progress…");
}

Interop File

Add the following code in the wwwroot/scripts/boldreports-interop.js file.

window.BoldReports = {
    RenderViewer: function (dotNetReference, elementID, reportViewerOptions, callback) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportName,
            reportServiceUrl: reportViewerOptions.serviceURL,
            // Notifies the Blazor component when the report is printing.
            printProgressChanged: function (args) {
                if (dotNetReference) {
                    dotNetReference.invokeMethodAsync(callback, args);
                }
            }
        });
    }
}

Export Progress Changed

Fires when the report export progress changes. This event is useful for showing custom progress indicators during long‑running export operations.

Razor Page

Add the following code in the index.razor file in the Pages folder.

[JSInvokable]
public Task OnExportProgressChanged(string args)
{
    return ShowToastAsync("Exporting report in progress…");
}

Interop File

Add the following code in the wwwroot/scripts/boldreports-interop.js file.

window.BoldReports = {
    RenderViewer: function (dotNetReference, elementID, reportViewerOptions, callback) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportName,
            reportServiceUrl: reportViewerOptions.serviceURL,
            // Notifies the Blazor component when the report export is in progress.
            exportProgressChanged: function (args) {
                if (dotNetReference) {
                    dotNetReference.invokeMethodAsync(callback, args);
                }
            }
        });
    }
}

Ajax Before Load

Fires before a request is sent from the Report Viewer to the server. This event allows you to modify request headers, inject authorization tokens, or customize request data.

Razor Page

Add the following code in the index.razor file in the Pages folder.

[JSInvokable]
public Task OnAjaxBeforeLoad(string args)
{
    return ShowToastAsync("Sending request to the server…");
}

Interop File

Add the following code in the wwwroot/scripts/boldreports-interop.js file.

window.BoldReports = {
    RenderViewer: function (dotNetReference, elementID, reportViewerOptions, callback) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportName,
            reportServiceUrl: reportViewerOptions.serviceURL,
            // Notifies the Blazor component before the request is sent to the server.
            ajaxBeforeLoad: function (args) {
                if (dotNetReference) {
                    dotNetReference.invokeMethodAsync(callback, args);
                }
            }
        });
    }
}

Implementation Workflow

Print and Export Monitoring

Use the printProgressChanged and exportProgressChanged events to track and display progress during printing and exporting operations.

Server Request Customization

Use the ajaxBeforeLoad event to customize server requests, attach authentication tokens, or modify request payloads dynamically.

To get more details about Print, Export, and Server Request Events in Blazor applications, you can check this video: