So verwenden Sie den Online Designer in einer Angular Single-Page-Webanwendung

In diesem Artikel geht es um die Art und Weise, wie FastReport Online Designer in auf Angular Webframework- und ASP.Net Core-basierter Single-Page-Webanwendung verwendet wird. Da das Back-End dieser SPA-Anwendung auf ASP.Net Core implementiert ist, können wir die FastReport-Bibliotheken leicht nutzen. Es bleibt nur noch eine Frage: Wie wird das Web-Reportobjekt in der Angular Client-App angezeigt?

Sie wissen vielleicht, dass Angular Webframework in erster Version in JavaSkript implementiert war. Alle nachfolgenden Versionen sind in TypeScript geschrieben. Jetzt heißt die erste Version von Angular - AngularJS, indem andere einen digitalen Index haben: 2, 3, ... 7. Wir möchten einen Demo-App einstellen, das an Angular 7 basiert wird.

Bevor noch wir das Entwickeln starten, lassen Sie uns die Entwicklungsumgebung vorbereiten. Erstens ist Node.js Plattform zu installieren. Es aktiviert JavaScript auf der Serverseite. Laden Sie die Distribution vom Herstellers Website https://nodejs.org/de/ herunter und installieren Sie sie. Node.js enthält NPM-Paketmanager, der Installierung von nützlichen JavaScript-Bibliotheken mit Konsolenbefehlen ermöglicht. Und auch was notwendig ist, dass Sie .Net Core SDK 2.0 und höher installiert haben sollen.

Um schneller das Demo-App zu entwickeln, verwenden Sie Windows-Eingabeaufforderung. Wir starten cmd.exe und gehen zu dem Dateiverzeichnis, in dem wir das Projekt erstellen möchten. Und wir führen den Befehl aus:

 dotnet new angular -o AngularOnlineDesignerFRCore

Weiter brauchen wir den Online-Designer. Ihn kann man im Kundenabschnitt auf unserem Site www.fast-report.com herunterladen. Ich möchte Ihnen in Erinnerung bringen, dass ein neues Build des Online-Designers im Designer für .Net Core Framework in erster Linie zu assemblieren ist.

Öffnen Sie unseres Projekt in Visual Studio. Nach dem Herunterladen des Archivs mit Online.Designer, entpacken Sie es in den wwwroot-Ordner im Projekt.

Jetzt können wir FastReport-Bibliotheken ins Projekt, das NuGet-Packetmanager unterstützt, hinzufügen. In der rechten Oberecke des Managers gibt es Dropdown-Liste mit Paketquellen. Jetzt brauchen wir eine lokale Quelle. Aber Sie brauchen es zu konfigurieren. Machen Sie es, klicken Sie auf das Icon in Form eines Zahnrades. Als nächstes wählen Sie die lokale Quelle aus und legen Sie dafür den Pfad zum Verzeichnis auf der lokalen Festplatte fest:

C: \ Program Files (x86) \ FastReports \ FastReport.Net \ Nugets. After completing the settings, install two available packages: FastReport.Core and FastReport.Web.

Um FastReport in Ihrer Projekte zu benutzen, brauchen Sie auch folgender Link in den Sturtup.cs-File hinzugefügt haben, durch die spezielle Methode: 

1
2
3
4
5
6

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
 {
…
 app.UseFastReport();
…
}

Um die Berichte in den Designer zu uploaden, brauchen wir die nützliche Berichtsvorlagen in den Server zu ergänzen. Um das zu schaffen, erstellen Sie App_Data-Ordner im Stammverzeichnis des Projektes. Fügen Sie einige Berichtsvorlagen aus dem Ordner FastReport.Net Delivery, Demos / Reports hinzu. Also, kopieren Sie das nwind.xml Data File aus diesen Ordner:

Jetzt können wir das Programmieren starten. Wir haben einen Controller - SampleDataController. Da wir eine Demo-Anwendung mit Beispielseiten erstellt haben, haben wir unnötige Elemente im Controller und im Client. Wir werden nun alle Methoden aus dem SampleDataController.cs-Controller entfernen und unsere eigenen hinzufügen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

using System;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
using System.IO;
 
namespace AngularOnlineDesignerFRCore.Controllers
{
 [Route("api/[controller]")]
 public class SampleDataController : Controller
 {
 [HttpGet("[action]")]
 public IActionResult Design(string report)
 {
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 WebReport.Report.Load("App_Data/"+report+".frx"); // Load the report into the WebReport object
 System.Data.DataSet dataSet = new System.Data.DataSet(); // Create a data source
 dataSet.ReadXml("App_Data/nwind.xml"); // Open the xml database
 WebReport.Report.RegisterData(dataSet, "NorthWind"); // Registering the data source in the report
 WebReport.Mode = WebReportMode.Designer; // Set the web report object mode - designer display
 WebReport.DesignerLocale = "en";
 WebReport.DesignerPath = @"WebReportDesigner/index.html"; // We set the URL of the online designer
 WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport"; // Set the view URL for the report save method
 WebReport.Debug = true;
 ViewBag.WebReport = WebReport; // pass the report to View
 return View();
 }
 
 [HttpPost("[action]")]
 // call-back for save the designed report
 public IActionResult SaveDesignedReport(string reportID, string reportUUID)
 {
 ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID); // We set the message for representation
 Stream reportForSave = Request.Body; // Write the result of the Post request to the stream.
 string pathToSave = @"App_Data/TestReport.frx"; // get the path to save the file
 using (FileStream file = new FileStream(pathToSave, FileMode.Create)) // Create a file stream
 {
 reportForSave.CopyTo(file); // Save query result to file
 }
 return View();
 }
 }
}

Die erste Design-Methode verwendet den Berichtsparameter, der den Namen des zu ladenden Berichts darstellt. Wir erstellen das Berichtsobjekt, laden die Berichtsvorlage dort hinein und verbinden diese mit der Datenquelle. Als nächstes schalten Sie den Designmodus für das Berichtsobjekt ein, legen den Pfad zur Online-Seite des Designers und den Pfad zur Berichtsspeichermethode fest.

Die zweite Methode ist ein Rückruf zum Speichern des Berichts. Indem wir im Designer auf die Schaltfläche Save klicken, initiieren wir ein Speicherereignis, das diesen Rückruf auslöst. Bei dieser Methode haben wir das Speichern der Berichtsdatei auf dem Server als TestReport implementiert.

Für diese Methode sind Views zu erstellen. Aber in unserem Projekt gibt es keine Views-Ordner. Dann erstellen wir es im Stammverzeichnis des Projektes. Drinnen brauchen sie noch einen anderen Ordner anzulegen - SampleData. Hier fügen wir die Views hinzu. Erstens wird es für Design-Methode gemacht. Die Datei wird auf die gleiche Weise aufgerufen, und ihr Inhalt ist sehr knapp gehalten:

1

@await ViewBag.WebReport.Render();

Wir geben einfach das webbasierte Berichtsobjekt aus. Die Render-Methode konvertiert es in html. Fügen Sie den anderen Ansicht für den SaveDesignedReport-Methode hinzu:

1

@ ViewBag.Message

In diesem View wird eine Statusmeldung für das Save Report Event angezeigt.

In dieser Phase kann die serverseitige Programmierung als abgeschlossen betrachtet werden. Gehen Sie zum Frontend.

Alles, was mit Single-Page-Webanwendung verknüpft ist, ist in ClientApp-Verzeichnis lokalisiert. Installieren Sie es im Solution Browser. Drinnen interessieren wir uns für SRC-Ordner und später für das App.

Für die Anzeige der Hauptseite ist App.Component.ts zuständig. Jetzt beginnen wir es zu editieren:

1
2
3
4
5
6
7
8
9
10

import { Component } from '@angular/core';
 
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
})
 
export class AppComponent {
}

Erstens betrachten Sie die Seitenvorlage in der Datei app.component.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class='container-fluid'>
 <div class='row'>
 <div>
 <input type="radio" id="reportChoice1"
 name="report" value="Text" (click)="this.report = 'Text'">
 <label for="reportChoice1">Text</label>
 <input type="radio" id="reportChoice2"
 name="report" value="Master-Detail" (click)="this.report = 'Master-Detail'">
 <label for="reportChoice2">Master-Detail</label>
 </div>
 <div>
 <input type="button" (click)="Clicked()" value="Show Online Designer" />
 <div *ngIf="flag" [innerHTML]="html | safeHtml"></div>
 </div>
 </div>
</div>

Das erste, was Ihnen auffällt, sind die Radiobuttons. Mit ihnen wählen wir einen der beiden Berichte aus, die im Online-Designer geöffnet werden sollen. Die Radiobuttons sind für das Event subskribiert (Klick). Dieses Ereignis setzt den Wert des variablen Berichts. Wir werden darüber reden, wenn wir die Anwendungskomponente finalisieren.

Als nächstes ist der Button, der auch für das Klick-Event subskribiert ist.  Die Klick-Funktion () wird von diesem Event aufgerufen. Die nächste <div> hat eine Bedingung - wenn die Merker–Variable wahr ist, dann zeigt sie den verschachtelten HTML-Code an, den wir aus der HTML-Variablen entnehmen. Aber achten Sie auf die SafeHTML-Funktion, die wir auf die HTML-Variable über die Pipe angewendet haben. Die Funktion normalisiert HTML-Code, macht es sicher und ist für das Eingliedern in DOM geeignet.

Das Feature ist zu implementieren. Um es zu machen, legen Sie das neue TypeScript-Datei in aktuellen Ordner - App. Nennen Sie es SafeHTML.Pipe.ts: 

1
2
3
4
5
6
7
8
9
10

import { PipeTransform, Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
 
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
 constructor(private sanitized: DomSanitizer) { }
 transform(value) {
 return this.sanitized.bypassSecurityTrustHtml(value);
 }
}

Die DomSanitizer-Bibliothek erledigt die ganze Arbeit für uns, Sie brauchen nur den HTML-Code an die bypassSecurityTrustHtml-Methode übergeben.

Kehren wir zurück zur App-Komponent. Wir implementieren die Klick-Funktion () darin: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { Component } from '@angular/core';
import { HttpClient } from "@angular/common/http";
 
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 providers: [HttpService]
})
export class AppComponent {
 html: string;
 flag: boolean;
 report: string;
 
constructor(private http: HttpClient){ }
 Clicked() {
this.flag = false;
this.http.get('api/SampleData/Design?report='+report, { headers: { 'Accept': 'text/html' }, responseType: 'text' as 'text' }).).subscribe((data: string) => { this.html = data; this.flag = true });
 }
}

Wir haben Class-Constructor hinzugefügt, das HttpClient unterstützt. Wir brauchen es, um die GET-Anfrage zu erfüllen. Die Klick-Funktion () setzt den Standardwert der Merker–Variable. Weiter führt es eine GET-Anfrage an die Design Controller-Methode durch. Der Name des Berichts aus dem Variablenbericht wird als Parameter übergeben. Wenn die Get-Request eine erfolgreiche Antwort erhielt, wird die Merker–Variable auf “wahr” gesetzt. Dadurch wird das <div> angezeigt, das der Berichtsdesigner anzeigen wird.

Es wäre jedoch eine gute Idee, eine Anfrage von einer Komponente an einen separaten Service zu richten. Machen Sie es. Erstellen Sie HTTP.Service.ts-Skript im aktuellen App-Verzeichnis: 

1
2
3
4
5
6
7
8
9
10
11

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
@Injectable()
export class HttpService {
 constructor(private http: HttpClient) { }
 
 getData(report) {
 return this.http.get('api/SampleData/Design?report='+report, { headers: { 'Accept': 'text/html' }, responseType: 'text' as 'text' });
 }
}

Jetzt konvertieren Sie App.Component.ts um es zu benutzen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { Component } from '@angular/core';
import { HttpService } from "./http.service";
 
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [HttpService]
})
export class AppComponent {
html: string;
flag: boolean;
report: string;
 
constructor(private httpService: HttpService) {
}
 
Clicked() {
this.flag = false;
this.httpService.getData(this.report).subscribe((data: string) => { this.html = data; this.flag = true });
}
}

Damit die hinzugefügten Module geladen und in der Komponente verfügbar sind, müssen sie zu app.module.ts hinzugefügt werden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { SafeHtmlPipe } from './safeHtml.pipe';
 
@NgModule({
 declarations: [
 AppComponent,
 NavMenuComponent,
 SafeHtmlPipe
 ],
 imports: [
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
 HttpClientModule,
 FormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Nun können sowohl der Service als auch die Pipe in der AppComponent verwendet werden.

Dies genügt, um die Anwendung zu starten und den Berichtsdesigner mit dem heruntergeladenen Bericht anzuzeigen. Aber es gibt eine Kleinigkeit. Seitdem WebReportDesigner muss in wwwroot-Verzeichniss verortet werden, kann er die View aus dem Backend nicht verwenden, um das Event des Berichtsspeichers zu behandeln.

Wir werden zur Rettung kommen, indem wir Client-Proxying zum Backend durchführen. So weisen wir darauf hin, dass Anfragen an den Serverport, in unserem Fall an den ng-Server, gesendet werden müssen.

Um Proxy zu konfigurieren, brauchen Sie die Proxy.Config.Json-Datei in dem Src-Verzeichnis zu erstellen: 

1
2
3
4
5
6
7

{
 "/": {
 "target": "http://localhost:4200/",
 "secure": false,
 "logLevel": "debug"
 }
}

In unserem Fall haben wir den ng-Server-Port 4200, aber es kann unterschiedlich sein. Sie können es erlernen, indem Sie den Server von der Konsole aus starten. Führen Sie dazu die Windows-Befehlszeile aus, gehen Sie mit dem Befehl cd in das Verzeichnis ClientApp und führen Sie aus: npm start. Aus dem Text, der als nächstes erscheint, können Sie die gewünschte Portnummer entnehmen.

Öffnen Sie nun die Datei package.json im Verzeichnis src und ändern Sie die folgenden Einstellungen darin:

1
2
3
4
5
6
7
8

 {
 "scripts": {
…
 
 "start": "ng serve --proxy-config proxy.config.json",
"build": "ng build --prod --output-path ../AngularOnlineDesignerFRCore/wwwroot",
 …
 }

Daher haben wir die Konfigurationsdatei für das Proxying angegeben und den wwwwroot-Ordner für die ClientApp-Assembly festgelegt.

Nun können Sie die Anwendung ausführen und die geleistete Arbeit auswerten. Wir erwarten eine fast leere Seite, mit nur diesen Kontrollen:

Wählen Sie ein aus die zwei Berichte und klicken Sie den ShowOnlineDesigner-Button:

Ein Designer erscheint mit einem geladenen Bericht. Klicken Sie auf die Registerkarte Bericht und dann auf die Schaltfläche Speichern:

Wenn das Proxying korrekt konfiguriert ist, sehen Sie die Nachricht “save” im grünen Rahmen rechts. Die Berichtsdatei wird auf dem Server gespeichert.

An dieser Stelle gehen wir davon aus, dass die Arbeiten am Demonstrationsprojekt abgeschlossen sind.

Fassen wir zusammen.

Die Backend-Entwicklung ist fast identisch mit einer normalen ASP.Net Core-Anwendung. Auch die Überarbeitung des Frontends ist nicht so schwierig, wenn man bedenkt, dass wir fast alle Dateien in einem Befehl generiert haben.