Using API Methods
Our sample projects and report templates can help you learn the basics of working with our products.For finer control you can talk to the viewer directly through its API instead of only reacting to events.
Getting a reference. Create a template ref of type
Because the viewer is not a reactive source itself, the example polls its values every 200 ms and copies them into refs so the displayed zoom and page number stay in sync with what the user sees.
Getting a reference. Create a template ref of type
StimulsoftViewerHandle and attach it to the component. Through that handle you get access to the viewer's properties and methods:<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { StimulsoftViewer, type StimulsoftViewerHandle } from 'stimulsoft-viewer-vue';
const viewerRef = ref<StimulsoftViewerHandle | null>(null);
const zoom = ref(100);
const currentPage = ref(0);
let interval: any = null;
// Poll the viewer state and mirror it into reactive refs
onMounted(() => {
interval = setInterval(() => {
if (viewerRef.value) {
zoom.value = viewerRef.value.zoom;
currentPage.value = viewerRef.value.currentPage;
}
}, 200);
});
onBeforeUnmount(() => clearInterval(interval));
function zoomTo50(): void {
if (viewerRef.value) viewerRef.value.zoom = 50;
}
function exportToPdf(): void {
viewerRef.value?.export('Pdf', { ImageResolution: 200 });
}
</script>
<template>
<div>
Zoom is {{ zoom }}<br />
Current page {{ currentPage + 1 }}<br />
<input type="button" value="Zoom to 50%" @click="zoomTo50" />
<input type="button" value="Export to PDF" @click="exportToPdf" />
<StimulsoftViewer ref="viewerRef" request-url="/Viewer/{action}" action="InitViewer" height="100vh" />
</div>
</template>viewerRef.value.zoom— reads or sets the zoom level in percent; assigning50zooms the report to 50%.viewerRef.value.currentPage— the zero-based index of the page the user is viewing (shown as+ 1for a human-friendly number).viewerRef.value.export('Pdf', { ImageResolution: 200 })— exports the report to a given format with export settings; here PDF at 200 DPI.
Because the viewer is not a reactive source itself, the example polls its values every 200 ms and copies them into refs so the displayed zoom and page number stay in sync with what the user sees.