Введение

Вьювер отчетов и дашбордов – это специальный компонент для просмотра документов. Компонент полностью настраиваемый, быстрый и удобный в работе, имеет широкий набор функциональных возможностей. Для полной интеграции в проекты мы предлагаем множество тем оформления и опций для кастомизации внешнего вида и функционала приложения.

Начало работы

Откройте Visual Studio и в меню File выберите сначала New, а после Project. Далее следует выбрать команду ASP.NET Core Web Application и нажать кнопку Next.

Далее нужно указать название проекта, расположение и имя решения (например, AngularViewer) и кликнуть Create.

Переходим к выбору платформы: в данном примере выбираем .NET 8 и выше. Не забудьте деактивировать параметр Configure for HTTPS, и нажмите кнопку Create.

Установка NuGet-пакета

Следующий шаг – установка NuGet-пакета Stimulsoft.Reports.Angular.NetCore:

• в контекстном меню проекта выбираем команду Manage NuGet Packages;
• выбираем элемент и указываем версию пакета;
• нажимаем Install.

Далее нужно добавить ViewerController в папку Controllers, для чего следует:

• вызвать контекстное меню папки Controllers и выбрать Add item;
• выбрать команду Controller... и установить в качестве типа контроллера MVC Controller – Empty;
• кликнуть по кнопке Add и указать имя контроллера, например, ViewerController;
• снова кликнуть Add .

Далее переходим непосредственно к работе с отчетом: создаём папку Reports в проекте, создаем шаблон, например MasterDetail.mrt, и следующий код во ViewerController.cs:

ViewController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Stimulsoft.Report;
using Stimulsoft.Report.Angular;
using Stimulsoft.Report.Web;

namespace AngularViewer.Controllers
{
    [Controller]
    public class ViewerController : Controller
    {
        static ViewerController()
        {
            // How to Activate
            //Stimulsoft.Base.StiLicense.Key = "6vJhGtLLLz2GNviWmUTrhSqnO...";
            //Stimulsoft.Base.StiLicense.LoadFromFile("license.key");
            //Stimulsoft.Base.StiLicense.LoadFromStream(stream);
        }

        [HttpPost]
        public IActionResult InitViewer()
        {
            var requestParams = StiAngularViewer.GetRequestParams(this);

            var options = new StiAngularViewerOptions();
            options.Actions.GetReport = "GetReport";
            options.Actions.ViewerEvent = "ViewerEvent";
            options.Appearance.ScrollbarsMode = true;

            return StiAngularViewer.ViewerDataResult(requestParams, options);
        }

        [HttpPost]
        public IActionResult GetReport()
        {
            var report = StiReport.CreateNewReport();
            var path = StiAngularHelper.MapPath(this, $"Reports/MasterDetail.mrt");
            report.Load(path);

            return StiAngularViewer.GetReportResult(this, report);
        }

        [HttpPost]
        public IActionResult ViewerEvent()
        {
            return StiAngularViewer.ViewerEventResult(this);
        }
    }
}

Также, сразу следует настроить конфигурацию NET-сервера, разрешив политику CORS и определив fallback-механизм для Angular. Это следует выполнить в файле Program.cs.

Program.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policy =>
    {
        policy.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
    });
});

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}

app.UseDefaultFiles();
app.UseStaticFiles();

app.UseRouting();
app.UseCors();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Use(async (context, next) =>
{
    await next();
    if (context.Response.StatusCode == 404 && !context.Request.Path.Value.StartsWith("/api"))
    {
        context.Request.Path = "/index.html";
        await next();
    }
});

app.Run();

Далее следует открыть папку проекта в проводнике и установить компоненты Angular-клиента из npm.

Console

npm install stimulsoft-viewer-angular

Закройте консоль, удалите папку ClientApp и снова откройте консоль. Далее введите следующую команду:

Console

ng new ClientApp

Выберите формат CSS, нажмите Enter, закройте консоль и перейдите в папку ClientApp.

Затем откройте консоль и загрузите stimulsoft-viewer-angular:

Console

npm install stimulsoft-viewer-angular

Закройте консоль. Откройте файл app.module.ts в редакторе из каталога "...ClientApp\src\app\" и добавьте StimulsoftViewerModule. Далее добавьте указанный ниже код в app.module.ts:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { StimulsoftViewerModule } from 'stimulsoft-viewer-angular';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StimulsoftViewerModule,
    HttpClientModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Откройте файл app.component.html в редакторе из каталога "...ClientApp\src\app\" и добавьте AppComponent. Далее добавьте указанный ниже код в app.component.html:

app.component.html

<stimulsoft-viewer-angular
  [requestUrl]="'http://localhost:5151/Viewer/{action}'"
  [action]="'InitViewer'"
  [height]="'100vh'"
></stimulsoft-viewer-angular>

Перейдите в Visual Studio и запустите проект. В нём вы увидите вьювер с указанным отчетом.

Также в нашей документации вы можете найти примеры локализации вьювера, отправки отчета по e-mail и API-методов.