Using Viewer Events
Our sample projects and report templates can help you learn the basics of working with our products.Set up the report viewer in .NET 6.0, load a template, and connect the component to the application.
Client-side events. The Vue component emits events, so you subscribe with the
Two events are handled here:
Server-side handling. Interactive events that need the server are routed to the
The
Client-side events. The Vue component emits events, so you subscribe with the
@event directive and pass your own handler functions:<script setup lang="ts">
import { StimulsoftViewer } from 'stimulsoft-viewer-vue';
function loaded(): void {
console.log('Report loaded');
}
function onExport(event: any): void {
console.log(`Export to: ${event.format}`);
}
</script>
<template>
<StimulsoftViewer
request-url="/Viewer/{action}"
action="InitViewer"
height="100vh"
@loaded="loaded"
@export="onExport"
/>
</template>Two events are handled here:
@loaded fires once the report has been rendered and is ready, and @export 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 @... handler.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 = StiVueViewer.GetRequestParams(this);
var options = new StiVueViewerOptions();
options.Actions.GetReport = "GetReport";
options.Actions.ViewerEvent = "ViewerEvent";
return StiVueViewer.ViewerDataResult(requestParams, options);
}
[HttpPost]
public IActionResult ViewerEvent()
{
return StiVueViewer.ViewerEventResult(this);
}The
StiVueViewer.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.