Using the two Viewer in the One Project

Наши примеры проектов и шаблоны отчётов помогут Вам разобраться в основах работы с нашими продуктами.
Открыть на GitHub
Продукты ✖Reports.JS ✖Вьювер ✖Компоненты ✖
Because the viewer is a component, you can place several instances on one page. This example shows two independent viewers side by side.

Viewer setup. Configure the viewer, load the report, assign it to the component, and process the requests or events raised by the UI.
<script setup lang="ts">
import { Viewer, Stimulsoft } from 'stimulsoft-reports-js-vuejs/viewer';

var report1 = new Stimulsoft.Report.StiReport();
report1.loadFile("Reports/SimpleList.mrt");
var report2 = new Stimulsoft.Report.StiReport();
report2.loadFile("Reports/TwoSimpleLists.mrt");

var viewerOptions = new Stimulsoft.Viewer.StiViewerOptions();
viewerOptions.height = "100vh";
</script>

<template>
    <div class="container-viewer">
        <Viewer :report="report1" :options="viewerOptions" />
        <Viewer :report="report2" :options="viewerOptions" />
    </div>
</template>
Each viewer holds its own report and options, so multiple previews coexist on one page without interfering — useful for dashboards or comparison views.
Открыть на GitHub Скачать