Working with onDesign and onExit Events
Наши примеры проектов и шаблоны отчётов помогут Вам разобраться в основах работы с нашими продуктами.The viewer and designer can be combined into one edit-and-preview flow, switching between them with a reactive flag (Vue).
Toggle the two components with a ref.
How it works. A reactive
Toggle the two components with a ref.
<script setup lang="ts">
import { ref } from 'vue';
import { Viewer, Stimulsoft } from 'stimulsoft-reports-js-vuejs/viewer'
import { Designer } from 'stimulsoft-reports-js-vuejs/designer'
const isViewer = ref(true);
function onDesignReport(args) { isViewer.value = false; }
async function onExitDesigner() { await report.renderAsync2(); isViewer.value = true; }
</script>
<template>
<Viewer v-if="isViewer" :options="viewerOptions" :report="report" @design-report="onDesignReport" />
<Designer v-else :options="designerOptions" :report="report" @exit="onExitDesigner" />
</template>onDesignReport— the viewer's Design button; switch the flag to show the designer.onExit— the designer's Exit menu; re-render the report and switch back to the viewer.
How it works. A reactive
ref chooses which component renders, so users move from preview to editing and back within one screen.