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 BoldReportViewerOptions.cs file. This defines the ReportViewerEvents and CallBacks for linking event names to handler methods.

namespace BlazorReportingTools.Data
{
    public static class ReportViewerEvents
    {
        public const string PrintProgressChanged  = "printProgressChanged";
        public const string ExportProgressChanged = "exportProgressChanged";
        public const string AjaxBeforeLoad        = "ajaxBeforeLoad";
    }

    public class BoldReportViewerOptions
    {
        public string ReportName { get; set; } = string.Empty;
        public string ServiceURL { get; set; } = string.Empty;
        public Dictionary<string, string> CallBacks { get; set; } = new();
    }
}

In the Pages folder, add the following code to the index.razor file. This configures the report viewer settings and uses JavaScript interop to allow the viewer to trigger event callbacks within the Blazor page.

@page "/"
@implements IAsyncDisposable
@inject IJSRuntime JSRuntime

<div id="report-viewer"></div>

@code {
    private BoldReportViewerOptions viewerOptions = new();
    private DotNetObjectReference<Index>? dotNetReference;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            viewerOptions.ReportName = "sales-order-detail";
            viewerOptions.ServiceURL = "/api/BoldReportsAPI";
            viewerOptions.CallBacks = new Dictionary<string, string>
            {
                [ReportViewerEvents.PrintProgressChanged]  = nameof(Index.OnPrintProgressChanged),
                [ReportViewerEvents.ExportProgressChanged] = nameof(Index.OnExportProgressChanged),
                [ReportViewerEvents.AjaxBeforeLoad]        = nameof(Index.OnAjaxBeforeLoad)
            };

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

    public async ValueTask DisposeAsync()
    {
        dotNetReference?.Dispose();
        await ValueTask.CompletedTask;
    }
}

Interop File

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

window.BoldReports = {
    Events: {
        PrintProgressChanged:  "printProgressChanged",
        ExportProgressChanged: "exportProgressChanged",
        AjaxBeforeLoad:        "ajaxBeforeLoad"
    },

    RenderViewer: function (dotNetReference, elementId, viewerOptions) {
        var callbacks = viewerOptions.CallBacks || {};
        var events = window.BoldReports.Events;

        var invoke = function (eventKey, args) {
            if (dotNetReference && callbacks[eventKey]) {
                dotNetReference.invokeMethodAsync(callbacks[eventKey], args);
            }
        };

        $("#" + elementId).boldReportViewer({
            reportPath: viewerOptions.ReportName,
            reportServiceUrl: viewerOptions.ServiceURL,

            // Notifies the Blazor component when the report is printing.
            printProgressChanged: function (args) { invoke(events.PrintProgressChanged, args); },

            // Notifies the Blazor component when the report export is in progress.
            exportProgressChanged: function (args) { invoke(events.ExportProgressChanged, args); },

            // Notifies the Blazor component before a request is sent to the server.
            ajaxBeforeLoad: function (args) { invoke(events.AjaxBeforeLoad, args); }
        });
    }
};

Event Handlers

Add the following event handler methods in the index.razor file in the Pages folder. The [JSInvokable] attribute allows the interop file to call each method when the viewer fires the corresponding event. The args parameter carries the event details passed from the viewer.

Print Progress Changed

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

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

Export Progress Changed

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

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

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.

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

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: