Using API Methods

Unsere Beispiele der Projekte und Berichtsvorlagen helfen Ihnen, die Grundlagen der Arbeit mit unserer Software zu erlernen.
Auf GitHub ansehen
Produkte ✖Reports für Vue.js ✖Viewer ✖REST ✖
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 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>
The key parts of the API used here:



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.
Auf GitHub ansehen Herunterladen
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.
I agree