Set up the report viewer in .NET 10.0, load a template, and connect the component to the application.

Client-side events. Every viewer event is exposed as a React prop named on<Event>. Pass a handler function and it will be invoked with an event object:
import React from 'react';
import { StimulsoftViewer } from 'stimulsoft-viewer-react';

export const App: React.FC = () => {
    const loaded = (): void => {
        console.log('Report loaded');
    };

    const onExport = (event: any): void => {
        console.log(`Export to: ${event.format}`);
    };

    return (
        <StimulsoftViewer
            requestUrl="/Viewer/{action}"
            action="InitViewer"
            height="100vh"
            onLoaded={loaded}
            onExport={onExport}
        />
    );
};

Here two events are handled: onLoaded fires once the report has been rendered and is ready, and onExport fires when the user exports the report — the event object carries details such as the target format. The same pattern works for other viewer events (printing, interaction, e-mail, and more); simply add the corresponding on... prop.

Server-side handling. Interactive events that need the server are routed to the ViewerEvent action, registered in the options during initialization:
public IActionResult InitViewer()
{
    var requestParams = StiReactViewer.GetRequestParams(this);

    var options = new StiReactViewerOptions();
    options.Actions.GetReport = "GetReport";
    options.Actions.ViewerEvent = "ViewerEvent";

    return StiReactViewer.ViewerDataResult(requestParams, options);
}

[HttpPost]
public IActionResult ViewerEvent()
{
    return StiReactViewer.ViewerEventResult(this);
}

The StiReactViewer.ViewerEventResult helper processes the incoming event and returns the result the viewer expects, so server-side actions such as export and print work out of the box.

By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.