Heute werden wir erkunden, wie man den React-Viewer verwendet, um Berichte in ASP.NET Core-Webanwendungen anzuzeigen. Der Report-Viewer ist eine spezialisierte Komponente zur Dokumentenanzeige. Er ist vollständig anpassbar, schnell und benutzerfreundlich und bietet eine Vielzahl von Funktionen. Um eine nahtlose Integration in Projekte zu gewährleisten, bieten wir mehrere Anpassungsmöglichkeiten sowohl für das Aussehen als auch für die Funktionalität der Anwendung.
Erste Schritte
Schritt-für-Schritt-Anleitung:- öffnen Sie Visual Studio;
- gehen zum File-Menü;
- wählen New, danach Project aus;
- wählen ASP.NET Core Web Application und klicken auf Next;
- geben Sie den Namen des Projektes, Speicherort, und den Namen der Lösung (zum Beispiel, ReactViewer) an und klicken auf Create;
- gehen Sie zur Auswahl der Plattform: wählen Sie .NET 8 oder eine spätere Version aus. Stellen Sie sicher, dass die Option Configure for HTTPS deaktiviert ist, und klicken Sie auf Create.
Installation vom NuGet-Paket
Der nächste Schritt – die Installation vom NuGet-Paket Stimulsoft.Report.React:- im Kontextmenü des Projektes wählen Sie Manage NuGet Packages aus;
- wählen Sie das Paket aus und geben die Version an;
- klicken auf Install.
Danach fügen Sie ViewerController in Controllers-Ordner hinzu:
- öffnen Sie das Kontextmenü des Controllers-Ordners und wählen Add item aus;
- wählen Sie Controller... und setzen den Kontroller-Typen als MVC Controller – Empty;
- klicken Sie auf Add und geben den Namen des Kontrollers ein, zum Beispiel, ViewerController;
- klicken Sie auf Add erneut.
ViewerController.cs konfigurieren
Erstellen Sie den Ordner Reports im Projekt und fügen Sie eine Berichtsvorlage hinzu, zum Beispiel, MasterDetail.mrt. Dann fügen Sie den folgenden Code in ViewerController.cs ein: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 konfigurieren
Stellen Sie den .NET-Server, aktivieren die Unterstützung für CORS und statische Dateien. Das muss man in der Datei Startup.cs erfüllen: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?}");
});
}Installation vom npm-Paket für React
Öffnen Sie den Ordner des Projektes im Datei-Explorer und erstellen den Ordner ClientApp. Öffnen Sie eine Konsole darin und führen Sie den folgenden Code aus:npx create-react-app . --template typescriptnpm install stimulsoft-viewer-reactDas Paket stimulsoft-viewer-react ist auf npm veröffentlicht und enthält vollständige TypeScript-Typisierungen (.d.ts-Dateien) für die Autovervollständigung in der Entwicklungsumgebung.
Integration vom Viewer in App.tsx
Öffnen Sie die Datei App.tsx imsrc-Ordner und ersetzen Sie seinen Inhalt durch den folgenden Code:import React from 'react';
import { StimulsoftViewer } from 'stimulsoft-viewer-react';
export const App: React.FC = () => {
return (
<StimulsoftViewer
requestUrl="/Viewer/{action}"
action="InitViewer"
height="100vh"
/>
);
};Erstellen und Ausführen der Anwendung
Um den React-Client zu erstellen und das Ergebnis in den wwwroot-Ordner zu kopieren, öffnen Sie eine Konsole im Verzeichnis ClientApp und führen Sie die folgenden Befehle aus:npm install
npx react-scripts build
xcopy /E /Y build\* ..\wwwroot\Nachdem der Build abgeschlossen ist, führen Sie das Projekt in Visual Studio aus. Sie werden sehen, dass der Report-Viewer mit dem angegebenen Bericht im Browser geladen wird. Beachten Sie!
Der React-Client wird einmal erstellt und als statische Dateien aus dem wwwroot-Ordner bereitgestellt. In der Produktionsumgebung ist kein separater Node.js-Server erforderlich.
Die Eigenschaften der Komponente StimulsoftViewer
Die StimulsoftViewer-Komponente akzeptiert die folgenden Eigenschaften:| Eigenschaft | Typ | Beschreibung |
|---|---|---|
requestUrl |
string | Backend-URL mit {action}-Platzhalter |
action |
string | Erste aufzurufende Aktion. Standard: ‚InitViewer‘ |
width |
string | Breite des Viewers. Standard: ‚100%‘ |
height |
string | Höhe des Viewers. Standard: ‚650px‘ |
onLoaded |
() => void | Wird aufgerufen, wenn der Viewer das Laden abgeschlossen hat |
onError |
(error) => void | Wird bei einem Viewer-Fehler aufgerufen |
onExport |
(data) => void | Wird nach dem Export des Berichts aufgerufen |
onPrint |
(data) => void | Wird nach dem Drucken des Berichts aufgerufen |
Verwenden von API-Methoden
Die StimulsoftViewer-Komponente bietet eine imperative API über ein ref-Handle. Dadurch können Sie Viewer-Aktionen programmgesteuert aus Ihrer Anwendung heraus auslösen: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>
);
};
Möchten Sie mehr über die Verwendung von Stimulsoft React-Komponenten erfahren? Kontaktieren Sie uns – wir helfen Ihnen gerne!