Stimulsoft Reports
Генератор отчётов для Vue.js
Встраиваемые компоненты для создания, просмотра и экспорта отчётов в приложениях, написанных с помощью фреймворка Vue.js. Совместимость с Vue 3+ и .NET Core 6/8/10. Генератор отчётов построен с учётом архитектуры Vue, обеспечивая тесную интеграцию с вашим проектом.Отчётность для Vue.js-проектов
Проектируйте профессиональные отчёты и дашборды непосредственно в ваших Vue-приложениях. Генератор отчётов Stimulsoft предоставляет все необходимые инструменты для визуализации данных и настройки внешнего вида документов. Встроенные интерактивные компоненты делают работу с отчётами удобной и наглядной для конечных пользователей.Загрузка...
Установка и быстрый старт
Установите необходимые npm-пакеты за пару минут и добавьте всего несколько строк кода для интеграции генератора отчётов в ваш Vue.js-проект. Компоненты полностью готовы к использованию, поддерживают Vue 3+ и настраиваются через знакомые механизмы — props, события и слоты. Начните создавать отчёты прямо сейчас, не тратя время на сложную настройку. bash
npm install stimulsoft-viewer-vue
dotnet add package Stimulsoft.Reports.Vue
Интерактивный просмотр отчётов
Встраивайте готовые отчёты в ваше Vue.js-приложение с помощью специализированного компонента — вьювера. Он полностью поддерживает интерактивность, обновляет содержимое при изменении данных и легко управляется через параметры и события. Встроенный вьювер органично вписывается в интерфейс приложения и предоставляет пользователям все необходимые инструменты для работы с отчётами. App.vue
<script setup lang="ts">
import { StimulsoftViewer } from 'stimulsoft-viewer-vue';
</script>
<template>
<StimulsoftViewer
request-url="/Viewer/{action}"
action="InitViewer"
height="100vh"
/>
</template>
Экспорт и сохранение документов
Экспортируйте готовые отчёты в самые востребованные форматы: PDF, Excel, Word, HTML, CSV, JSON, XML и другие. Функция экспорта доступна прямо из вашего Vue-приложения через встроенный API компонентов. Настраивайте параметры выгрузки, сохраняйте структуру и оформление документов — результат всегда соответствует вашим требованиям. App.vue
<script setup lang="ts">
import { ref } from 'vue';
import { StimulsoftViewer } from 'stimulsoft-viewer-vue';
import type { StimulsoftViewerHandle } from 'stimulsoft-viewer-vue';
const viewerRef = ref<StimulsoftViewerHandle | null>(null);
const exportToPdf = () => {
if (viewerRef.value)
viewerRef.value.export('Pdf', { ImageResolution: 200 });
};
</script>
<template>
<input type="button" @click="exportToPdf" value="Export to PDF" />
</template>
Работа с отчётами на стороне ASP.NET-сервера
Серверная часть генератора отчётов для Vue.js работает на базе ASP.NET. Все ресурсоёмкие процессы — загрузка шаблонов, рендеринг, подготовка данных и экспорт — выполняются на сервере. Это снижает нагрузку на клиентскую сторону Vue-приложений и ускоряет работу с отчётами. Серверный компонент легко интегрируется через стандартные API и совместим с .NET 6, 8, 10 и новее, гарантируя стабильность в любых проектах. ViewerController.cs
using Microsoft.AspNetCore.Mvc;
using Stimulsoft.Report;
using Stimulsoft.Report.Vue;
[Controller]
public class ViewerController : Controller
{
[HttpPost]
public IActionResult InitViewer()
{
var requestParams = StiVueViewer.GetRequestParams(this);
var options = new StiVueViewerOptions();
options.Actions.GetReport = "GetReport";
options.Actions.ViewerEvent = "ViewerEvent";
return StiVueViewer.ViewerDataResult(requestParams, options);
}
[HttpPost]
public IActionResult GetReport()
{
var report = StiReport.CreateNewReport();
var path = StiVueHelper.MapPath(this, "Reports/MasterDetail.mrt");
report.Load(path);
return StiVueViewer.GetReportResult(this, report);
}
}

Дизайнер для создания отчётов, дашбордов и форм
Дизайнер Stimulsoft — это основной инструмент для визуального проектирования отчётности в Vue‑приложениях. Подключайте данные из любых источников: SQL, NoSQL, облачные хранилища, файловые системы и другие.Используйте более 80 типов диаграмм, включая 3D‑визуализацию, встроенные штрихкоды, интерактивные элементы, события и многое другое. Дизайнер может работать как отдельное приложение на компьютере, встраиваться в ваше Vue‑приложение или запускаться прямо в браузере.