Using API Methods

Наши примеры проектов и шаблоны отчётов помогут Вам разобраться в основах работы с нашими продуктами.
Открыть на GitHub
Продукты ✖Reports для Vue.js ✖Вьювер ✖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.
Открыть на GitHub Скачать
Используя этот сайт, вы соглашаетесь на использование файлов Cookie для аналитики и персонализированного контента. Файлы Cookie хранят полезную информацию на вашем компьютере, чтобы помочь нам повысить эффективность и удобство использования. Для получения дополнительной информации, пожалуйста, прочтите Конфиденциальность и Использование Cookie.
Я согласен