Einführung

Berichts- und Dashboards-Viewer ist eine spezielle Komponente für Anzeigen von Dokumenten. Die Komponente ist voll einstellbar, schnell und bequem, hat einen breiten Satz von Fähigkeiten. Für volle Integration in die Projekte bieten wir viele Gestaltungsthemen und Optionen für Anpassung des Aussehens und der Funktionalität der Anwendung.

Erste Schritte

Öffnen Sie Visual Studio und wählen im Menü File zuerst New, und dann Project aus. Danach wählen Sie den Befehl ASP.NET Core Web Application aus und klicken auf Next.

Dann muss man den Namen und Speicherort des Projektes, den Namen der Lösung (zum Beispiel, AngularViewer) angeben, und auf Create klicken.

Der nächste Schritt ist die Wahl der Plattform: in diesem Beispiel wählen wir .NET 8 und höher. Vergessen Sie nicht den Parameter Configure for HTTPS deaktivieren und klicken auf die Schaltfläche Create.

Installieren vom NuGet-Paket

Dann muss man das NuGet-Paket Stimulsoft.Reports.Angular.NetCore installieren:

• im Kontextmenü des Projektes wählen wir den Befehl Select Manage NuGet Packages aus;
• wählen ein Element und die Version des Paketes aus;
• klicken auf Install.

Weiter muss man ViewerController in den Ordner Controllers hinzufügen, dafür muss man:

• das Kontextmenü des Ordners Controllers aufrufen und Add item auswählen;
• den Befehl Controller... wählen und als Controller-Typ MVC Controller – Empty;
• auf die Schaltfläche Add klicken und den Namen des Controllers, z.B., ViewerController, angeben;
• noch einmal auf Add klicken.

Danach beginnen wir gerade mit dem Bericht zu arbeiten: erstellen wir den Ordner Reports im Projekt, die Vorlage, zum Beispiel, MasterDetail.mrt, und den folgenden Code im 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);
        }
    }
}

Auch muss man die Konfiguration des NET-Servers einstellen: die CORS-Richtlinie erlauben und fallback-Vorrichtung festlegen. Es muss in der Datei Program.cs erfüllt werden.

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();

Weiter muss man den Ordner des Projektes im Explorer öffnen und die Komponenten vom Angular-Client aus npm installieren.

Console

npm install stimulsoft-viewer-angular

Schließen Sie die Konsole, löschen den Ordner ClientApp und öffnen die Konsole neu. Dann geben den folgenden Befehl an:

Console

ng new ClientApp

Wählen Sie das CSS-Format aus, klicken auf Enter, schließen die Konsole und gehen zum ClientApp-Ordner.

Öffnen Sie die Konsole und laden stimulsoft-viewer-angular:

Console

npm install stimulsoft-viewer-angular

Schließen Sie die Konsole. Öffnen die Datei app.module.ts im Editor aus dem Verzeichnis "...ClientApp\src\app\" und fügen StimulsoftViewerModule hinzu. Weiter fügen Sie unten angegebenen Code in app.module.ts hinzu:

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 { }

Öffnen Sie die Datei app.component.html im Editor aus dem Verzeichnis "...ClientApp\src\app\" und fügen AppComponent hinzu. Dann fügen Sie unten angegebenen Code in app.component.html hinzu:

app.component.html

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

Gehen Sie zum Visual Studio und führen das Projekt aus. In dem Projekt sehen Sie den Viewer mit dem angegebenen Bericht.

In unserer Dokumentation finden Sie die Beispiele der Lokalisierung des Viewers, des Sendens vom Bericht per E-Mail und der API-Methoden.