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.

Используя этот сайт, вы соглашаетесь на использование файлов Cookie для аналитики и персонализированного контента. Файлы Cookie хранят полезную информацию на вашем компьютере, чтобы помочь нам повысить эффективность и удобство использования. Для получения дополнительной информации, пожалуйста, прочтите Конфиденциальность и Использование Cookie.