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);
    }
}
Designer

Дизайнер для создания отчётов, дашбордов и форм

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

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

Stimulsoft

Reports.WEB

Stimulsoft Reports для Vue.js является частью продукта Stimulsoft Reports.WEB — кроссплатформенного набора инструментов для создания отчётов с использованием технологий ASP.NET, ASP.NET MVC, .NET, Angular, Blazor, React и Vue.js. В состав продукта входят мощный и быстрый движок отчётов на универсальной платформе .NET, удобный HTML5-дизайнер отчётов и интерактивный высокопроизводительный HTML5-вьювер отчётов.

Что дальше?

Мы подготовили множество примеров отчётов и дашбордов, сгруппированных по сферам использования. Вы можете подключить к ним свои данные и изменять соответственно вашим требованиям. Наши руководства для пользователей и техническая документация помогут вам сделать работу по визуализации и аналитике данных более эффективной и быстрой. Более того, вы можете забронировать учебные курсы с нашими специалистами и подписаться на наш YouTube-канал, чтобы всегда получать самые свежие видео.
Training Courses

Учебные курсы

Столкнулись со сложностями при создании отчётов и дашбордов? Не проблема! Свяжитесь с нами и забронируйте учебные курсы – наши специалисты всегда готовы помочь.
Videos

Видеоуроки

Мы подготовили видеоматериалы по разработке и созданию отчётов и дашбордов. Коллекция видео разбита по темам и постоянно обновляется.
Documentation

Documentation

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

Примеры кода

Оцените примеры проектов и шаблоны отчётов для работы с нашими продуктами. Также вы можете посмотреть и загрузить их с GitHub.
Используя этот сайт, вы соглашаетесь на использование файлов Cookie для аналитики и персонализированного контента. Файлы Cookie хранят полезную информацию на вашем компьютере, чтобы помочь нам повысить эффективность и удобство использования. Для получения дополнительной информации, пожалуйста, прочтите Конфиденциальность и Использование Cookie.