Сегодня мы рассмотрим, как использовать React-вьювер для отображения отчётов в веб-приложениях на ASP.NET Core.Вьювер отчетов – это специализированный компонент для просмотра документов. Он полностью настраиваемый, быстрый и удобный в использовании, с широким набором функций. Чтобы обеспечить бесшовную интеграцию в проекты, мы предоставляем множество опций кастомизации как внешнего вида, так и функциональности приложения.
Начало работы
Пошаговая инструкция:- откройте Visual Studio;
- перейдите в меню File;
- выберите New, затем Project;
- выберите ASP.NET Core Web Application и нажмите Next;
- укажите имя проекта, расположение и имя решения (например, ReactViewer), затем нажмите Create;
- перейдите к выбору платформы: выберите .NET 8 или более позднюю версию. Убедитесь, что опция Configure for HTTPS отключена, и нажмите Create.
Установка NuGet-пакета
Следующий шаг – установка NuGet-пакета Stimulsoft.Report.React:- В контекстном меню проекта выберите Manage NuGet Packages;
- Выберите пакет и укажите версию;
- Нажмите Install.
Далее добавьте ViewerController в папку Controllers:
- Откройте контекстное меню папки Controllers и выберите Add item;
- Выберите Controller... и установите тип контроллера MVC Controller – Empty;
- Нажмите Add и введите имя контроллера, например ViewerController;
- Снова нажмите Add again.
Конфигурация ViewerController.cs
Создайте папку Reports в проекте и добавьте шаблон отчёта, например, MasterDetail.mrt. Затем вставьте следующий код в ViewerController.cs:using Microsoft.AspNetCore.Mvc;
using Stimulsoft.Report;
using Stimulsoft.Report.React;
namespace ReactViewer.Controllers
{
[Controller]
public class ViewerController : Controller
{
static ViewerController()
{
// How to Activate
//Stimulsoft.Base.StiLicense.Key = "6vJhGtLLLz2GNviWmUTrhSqnO...";
//Stimulsoft.Base.StiLicense.LoadFromFile("license.key");
}
[HttpPost]
public IActionResult InitViewer()
{
var requestParams = StiReactViewer.GetRequestParams(this);
var options = new StiReactViewerOptions();
options.Actions.GetReport = "GetReport";
options.Actions.ViewerEvent = "ViewerEvent";
options.Appearance.ScrollbarsMode = true;
return StiReactViewer.ViewerDataResult(requestParams, options);
}
[HttpPost]
public IActionResult GetReport()
{
var report = StiReport.CreateNewReport();
var path = StiReactHelper.MapPath(this, "Reports/MasterDetail.mrt");
report.Load(path);
return StiReactViewer.GetReportResult(this, report);
}
[HttpPost]
public IActionResult ViewerEvent()
{
return StiReactViewer.ViewerEventResult(this);
}
}
}Конфигурация .NET Server
Настройте .NET-сервер, включив поддержку CORS и статических файлов. Это необходимо сделать в файле Startup.cs:public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseRouting();
app.UseCors(builder =>
builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
});
}Установка npm-пакета для React
Откройте папку проекта в Проводнике и создайте папку ClientApp. Откройте консоль внутри неё и выполните:npx create-react-app . --template typescriptnpm install stimulsoft-viewer-reactПакет stimulsoft-viewer-react опубликован в npm и включает полные TypeScript-типизации (.d.ts файлы) для автодополнения в среде разработки.
Интеграция вьювера в App.tsx
Откройте файл App.tsx в папке src и замените его содержимое следующим кодом:import React from 'react';
import { StimulsoftViewer } from 'stimulsoft-viewer-react';
export const App: React.FC = () => {
return (
<StimulsoftViewer
requestUrl="/Viewer/{action}"
action="InitViewer"
height="100vh"
/>
);
};Сборка и запуск приложения
Чтобы собрать клиентскую часть React и скопировать результат в папку wwwroot, откройте консоль в каталоге ClientApp и выполните следующие команды:npm install
npx react-scripts build
xcopy /E /Y build\* ..\wwwroot\После завершения сборки запустите проект в Visual Studio. Вы увидите, что в браузере загрузился вьювер с указанным отчётом. Обратите внимание!
Клиентская часть на React собирается один раз и обслуживается как статические файлы из папки wwwroot. В рабочей среде отдельный Node.js-сервер не требуется.
Свойства компонента StimulsoftViewer
Компонент StimulsoftViewer принимает следующие свойства:| Свойство | Тип | Описание |
|---|---|---|
requestUrl |
string | URL-адрес серверной части с подставляемым параметром {action} |
action |
string | Первое событие. По умолчанию, 'InitViewer' |
width |
string | Ширина вьювера. По умолчанию, '100%' |
height |
string | Высота вьювера. По умолчанию, '650px' |
onLoaded |
() => void | Вызывается, когда вьювер заканчивает загрузку |
onError |
(error) => void | Вызывается при ошибке вьювера |
onExport |
(data) => void | Вызывается после экспорта отчета |
onPrint |
(data) => void | Вызывается после печати отчета |
Использование методов API
Компонент StimulsoftViewer предоставляет императивный API через ref-хендл. Это позволяет программно вызывать действия вьювера из вашего приложения:import React, { useRef } from 'react';
import { StimulsoftViewer, StimulsoftViewerHandle } from 'stimulsoft-viewer-react';
export const App: React.FC = () => {
const viewerRef = useRef<StimulsoftViewerHandle>(null);
return (
<div>
<button onClick={() => viewerRef.current?.export('Pdf')}>
Export PDF
</button>
<button onClick={() => viewerRef.current?.print()}>
Print
</button>
<StimulsoftViewer
ref={viewerRef}
requestUrl="/Viewer/{action}"
action="InitViewer"
height="calc(100vh - 50px)"
/>
</div>
);
};
Хотите узнать больше об использовании компонентов Stimulsoft для React? Свяжитесь с нами — мы будем рады помочь!