В этой главе будет рассмотрен пример использования компонентов Stimulsoft в приложениях Vue.

 

 
Создайте проект Vue
В терминале перейдите в каталог, в котором необходимо разместить будущий проект. Затем следует выполнить команду.

 

terminal

 

npm create vue@latest my-app

 

 

 

Параметры настройки приложения можно оставить по умолчанию, или в случае необходимости изменить.

 

 

Установите компоненты Stimulsoft
Для начала необходимо скачать пакет Stimulsoft. Если необходимы только инструменты отчетности, то следует скачать пакет stimulsoft-reports-js. Если же требуются и средства отчетности и дашборды, то пакет stimulsoft-dashboards-js. Для этого следует выполнить команду в терминале.
 

terminal

 

npm install stimulsoft-dashboards-js

 

 

 

Интегрируйте Stimulsoft в приложение
Для этого следует отредактировать файл App.vue в папке src проекта. Для начала, следует импортировать модуль Stimulsoft и метод onMounted(). Здесь же можно изменить блок template и styles. В метод onMounted() передать callback функцию с инициализацией Stimulsoft компонентов. Например, будет вызван дизайнер отчетов с пустым отчетом.

 

App.vue

<script setup lang="ts">

import { onMounted } from "vue";

import { Stimulsoft } from "stimulsoft-dashboards-js/Scripts/stimulsoft.designer.js";

 

onMounted(() => {

let designer = new Stimulsoft.Designer.StiDesigner(false, "StiDesigner", false);

let report = new Stimulsoft.Report.StiReport();

 

designer.report = report;

designer.renderHtml("content");

});

</script>

 

<template>

<div id="app">

<div>

<h2 id="app-title">Stimulsoft Vue JS</h2>

<div id="content"></div>

</div>

</div>

</template>

 

<style>

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

color: #2c3e50;

margin-top: 60px;

}

 

#app-title {

text-align: center;

}

</style>

 

 

 

Или, вызвать вьювер с ранее созданным отчетом. Файлы отчетов следует предварительно скопировать в папку reports в директории проекта ./public.

 

App.vue

...

<script setup lang="ts">

import { onMounted } from "vue";

import { Stimulsoft } from "stimulsoft-dashboards-js/Scripts/stimulsoft.viewer.js";

 

onMounted(() => {

let viewer = new Stimulsoft.Viewer.StiViewer(false, "StiViewer", false);

let report = new Stimulsoft.Report.StiReport();

report.loadFile("reports/SimpleList.mrt");

 

viewer.report = report;

viewer.renderHtml("content");

});

</script>

...

 

 

Первый запуск
Vue приложение по умолчанию определяет команды в файле package.json. Поэтому для сборки и запуска проекта, достаточно в корневой папке проекта из терминала выполнить командy.

 

console

 

npm run dev