TsgcHTMLComponent_ReportViewer zeigt einen Bericht in einer Webseite, mit einem Parameter-Panel, einer PDF-Vorschau, PDF herunterladen, Drucken und Nach Excel exportieren. Der Bericht ist ein TsgcHTMLReport, eine bandbasierte Berichts-Engine, die Gruppen, Summen, Diagramme, Barcodes und Unterberichte mit der PDF-Engine von sgcHTML als PDF ausgibt, ohne externes Berichtswerkzeug, Druckertreiber oder DLL, in Delphi, C++ Builder und .NET.
Definieren Sie den Bericht mit seinen Bändern und Parameters, verknüpfen Sie ihn mit dem Viewer und rendern Sie ihn. Der Viewer baut aus den Parametern ein Formular, und die Vorschau, der Download und der Druck sind dasselbe PDF, auf dem Server mit den vom Benutzer angewendeten Werten erzeugt, sodass der Benutzer druckt, was er sieht. Zwischen Anfragen wird nichts auf dem Server gehalten.
TsgcHTMLComponent_ReportViewer, der Viewer, und TsgcHTMLReport, die nicht visuelle Berichts-Engine, die er anzeigt
Ein Parameter-Panel, eine Vorschau mit dem eingebetteten pdf.js des PDF-Viewers und die Links PDF herunterladen, Drucken und Nach Excel exportieren
Delphi, C++ Builder, .NET
Der Bericht deklariert einen erforderlichen Zeitraum und eine Region. Der Viewer macht daraus Felder, und der Bericht filtert seine Daten in seinem eigenen Ereignis OnBeforeGenerate mit den Werten, die der Benutzer anwendet.
uses
sgcHTML_Export_PDF, sgcHTML_Report, sgcHTML_Component_ReportViewer;
// der Bericht
oReport := TsgcHTMLReport.Create(Self);
oReport.Title := 'Sales';
oReport.FileName := 'sales';
oReport.DataSet := qrySales;
oParam := oReport.Parameters.Add;
oParam.Name := 'Period';
oParam.Caption := 'Period';
oParam.Kind := rpkDateRange;
oParam.DefaultValue := '2026-01-01;2026-12-31';
oParam.Required := True;
oParam := oReport.Parameters.Add;
oParam.Name := 'Region';
oParam.Caption := 'Region';
oParam.Kind := rpkSelect;
oParam.Options.Add('EU=Europe');
oParam.Options.Add('US=United States');
oReport.OnBeforeGenerate := ReportBeforeGenerate;
// ein Detailband: eine Zeile pro Datensatz
oBand := oReport.Bands.Add;
oBand.Kind := rbkDetail;
oItem := oBand.Items.Add;
oItem.Text := '[Product]';
oItem.Width := 100;
oItem := oBand.Items.Add;
oItem.Text := '[Amount:#,##0.00]';
oItem.Left := 100;
oItem.Width := 80;
oItem.Align := paRight;
// der Viewer
oViewer := TsgcHTMLComponent_ReportViewer.Create(Self);
oViewer.Name := 'SalesViewer';
oViewer.HTMXEngine := sgcHTMXEngine1;
oViewer.Report := oReport;
oViewer.TokenSecret := LoadSecretFromConfig;
oTemplate.BodyContent := oViewer.HTML;
// der Bericht filtert seine Daten mit den Werten des Viewers
procedure TForm1.ReportBeforeGenerate(Sender: TObject; aParams: TStrings);
var
vPeriod: string;
begin
vPeriod := aParams.Values['Period']; // von;bis
qrySales.Close;
qrySales.ParamByName('FromDate').AsString := Copy(vPeriod, 1, Pos(';', vPeriod) - 1);
qrySales.ParamByName('ToDate').AsString := Copy(vPeriod, Pos(';', vPeriod) + 1, 10);
qrySales.ParamByName('Region').AsString := aParams.Values['Region'];
qrySales.Open;
end;@* Views/Reports/Sales.cshtml: SalesReport ist ein langlebiger TsgcHTMLReport *@
@model ReportsModel
<sgc-report-viewer name="sales" report="@Model.SalesReport"
show-export-xlsx="true" zoom="page-width"
css-height="720px" token-lifetime="300"
on-before-generate="Model.CheckAccess" />using esegece.sgcWebSockets;
// der Bericht
var report = new TsgcHTMLReport();
report.Title = "Sales";
report.FileName = "sales";
var param = report.Parameters.Add();
param.Name = "Period";
param.Caption = "Period";
param.Kind = TsgcHTMLReportParameterKind.rpkDateRange;
param.DefaultValue = "2026-01-01;2026-12-31";
param.Required = true;
report.OnBeforeGenerate += (sender, values) => LoadSales(values);
// der Viewer
var viewer = new TsgcHTMLComponent_ReportViewer();
viewer.Name = "SalesViewer";
viewer.HTMXEngine = engine;
viewer.Report = report;
viewer.TokenSecret = configuration["Reports:Secret"];
template.BodyContent = viewer.HTML;
// derselbe Bericht, ohne den Viewer: ein PDF des dritten Quartals
var values = new List<string> { "Period=2026-07-01;2026-09-30" };
report.SaveToFile("q3.pdf", values);Werte wählen, den Bericht ansehen, dann herunterladen, drucken oder seine Daten in Excel öffnen.
Jeder Parameter des Berichts wird zu einem beschrifteten Feld: Text, Zahl, Datum, ein Datumsbereich mit Von und Bis, eine Auswahl aus den Options und ein Kontrollkästchen. Ein erforderlicher Parameter zeigt ein Sternchen und wird im Browser vor Anwenden und erneut auf dem Server geprüft. Zurücksetzen stellt den Standard jedes Felds wieder her.
Die Vorschau nutzt das eingebettete pdf.js von TsgcHTMLComponent_PDFViewer, mit Symbolleiste, Seitennavigation, Zoom und Suche. Ein Spinner mit dem Text Bericht wird erstellt... verdeckt sie, bis die erste Seite gezeichnet ist. Mit AutoGenerate lädt die Vorschau sofort mit den Standardwerten.
PDF herunterladen und Drucken sind dasselbe PDF wie die Vorschau, und der Download ist nach FileName benannt. Nach Excel exportieren schreibt die Daten des Berichts mit ExportToXLSX. ShowDownload, ShowPrint und ShowExportXLSX zeigen oder verbergen jeden davon.
Ein fehlender erforderlicher Wert markiert das Feld und setzt den Fokus darauf. Wenn keine Zeile gedruckt wird, zeigt die Vorschau Keine Daten für die ausgewählten Parameter statt eines leeren PDFs. Eine abgelehnte oder fehlgeschlagene Erzeugung zeigt ihren Grund und deaktiviert die Links. Die Texte stammen aus dem Locale der Bibliothek.
Der Viewer ist eine beschriftete Region. Jedes Feld hat ein Label, ein Datumsbereich ist ein Fieldset mit einer Legende, erforderliche Felder tragen aria-required, und ein fehlender Wert setzt aria-invalid. Die Eingabetaste in einem Feld wendet die Parameter an, und ein höflicher Live-Bereich meldet erforderliche Felder, fehlende Daten, Ablehnungen und Fehler.
Die Engine hinter dem Viewer ist eine eigene nicht visuelle Komponente. Sie schreibt das PDF mit TsgcHTMLExportPDF, der PDF-Engine von sgcHTML, und derselbe Bericht kann auch als Excel-Tabelle geschrieben werden.
Ein Berichtskopf, Seitenköpfe, verschachtelte Gruppen mit Kopf- und Fußzeilen, Detailzeilen, Seitenfüße und ein Berichtsfuß. Gruppenköpfe können sich auf jeder neuen Seite wiederholen, KeepTogether hält eine Gruppe auf einer Seite, NewPageBefore und NewPageAfter erzwingen Seitenumbrüche, und ein Berichtskopf mit NewPageAfter ist ein Deckblatt.
Bänder enthalten Text, Bilder, Linien, Rechtecke, Diagramme, Rich-Text, Barcodes, QR-Codes und Unterberichte. Text wird an seinem Rahmen abgeschnitten, und Elemente mit AutoHeight vergrößern das Band passend zum umgebrochenen Text.
Texte enthalten Ausdrücke in [ ]: Felder mit Maske wie [Amount:#,##0.00], [Sum(Field)], [Count], [Avg(Field)], [Min(Field)], [Max(Field)], [RunningSum(Field)], [Page] von [Pages], [Param.Name] und [GroupValue]. Bänder und Elemente werden nur gedruckt, wenn ihre PrintIf-Bedingung wahr ist, etwa Amount > 1000.
Die Zeilen kommen aus einem DataSet, einem Grid, einem JSON-Array in RowsJSON oder dem Ereignis OnGetRow. LoadFromGrid baut einen Tabellenbericht aus den Spalten eines TsgcHTMLComponent_Grid, mit den Überschriften auf jeder Seite, Zebrastreifen, den Summen der numerischen Spalten und Seitenzahlen.
Ein Diagrammelement zeichnet die Zeilen seines Bands als Vektorgrafik: Balken, horizontale Balken, gestapelte Balken, Linie, Fläche, Kreis oder Ring, ein Diagramm pro Gruppe in einem Gruppenband. ChartSource druckt eine TsgcHTMLComponent_Chart so, wie die Webseite sie zeigt. Barcode-Elemente zeichnen Code 128, und QR-Code-Elemente verwenden die Fehlerkorrekturstufe M.
Ein Unterbericht-Element druckt einen anderen Bericht in seinem Band, etwa die Positionen einer Bestellung, über LinkFields mit der Hauptzeile verknüpft, bis zu 5 Ebenen tief, und setzt sich auf den nächsten Seiten fort. Ein Rich-Text-Element druckt HTML und fließt mit AutoHeight nach den Seitenköpfen über Seiten.
Elemente werden standardmäßig mit den Base-14-Schriften gedruckt, die die Zeichen von Windows-1252 enthalten. Registrieren Sie TrueType-Schriften in Fonts, um Kyrillisch, Griechisch, Arabisch, Hebräisch, Chinesisch, Japanisch, Koreanisch oder Symbole zu drucken. Nur die gedruckten Glyphen werden eingebettet, und FallbackFonts und AutoFallback decken die Zeichen ab, die einer Schrift fehlen.
Zahlen und Datumsangaben werden mit DecimalSeparator, ThousandSeparator, DateFormat und TimeFormat des Berichts gedruckt, nie mit den Regionaleinstellungen des Rechners, sodass ein Bericht auf jedem Computer und unter .NET gleich gedruckt wird. Mit einem festen CreationDate ergibt dieselbe Eingabe dieselben PDF-Bytes.
SaveToJSON schreibt Seiteneinrichtung, Schriften, Bänder, Elemente und Parameter, und LoadFromJSON liest sie wieder ein, nachdem es die gesamte Definition validiert hat, mit dem JSON-Pfad jedes Fehlers. Benutzer entwerfen Berichte im Browser mit dem Report Designer, und ein Doppelklick auf den Bericht öffnet denselben Designer in der Delphi-IDE.
Generate, SaveToFile, SaveToStream, GetPDFBytes, ExportToXLSX und HasData bauen jeweils ihre eigene Kopie der Zeilen und des Layouts. Ein Bericht bedient mehrere Anfragen eines Webservers gleichzeitig, jede mit eigenen Parametern gefiltert, ohne eigenes Lock.
Die Member des Viewers, zu denen Sie am häufigsten greifen.
Report ist der anzuzeigende TsgcHTMLReport. Ein Viewer bedient jeden Benutzer: Um jedem Benutzer einen anderen Bericht zu zeigen, etwa pro Mandant oder pro Rolle, geben Sie ihn in OnGetReport(Sender, aParams, aReport) zurück, das im Thread der Anfrage ausgelöst wird, wo sgcHTMLRequestSession die Sitzung liefert.
OnBeforeGenerate(Sender, aParams, aAccept, aErrorMessage) akzeptiert oder verweigert eine Erzeugung, wenn der Viewer rendert, bei jedem Anwenden und bei jedem GET eines Links, sodass auch ein kopierter Link abgelehnt wird. Verwenden Sie es für Berechtigungen und Regeln über Parameter hinweg, etwa einen Zeitraum von höchstens einem Jahr.
Jeder Dateilink trägt ein HMAC-SHA256-Token über die Komponente, das Format, die Parameterwerte, die Sitzung und den Ablauf und funktioniert nur in der Sitzung, die ihn gerendert hat. Links laufen nach TokenLifetime Sekunden ab (standardmäßig 300), und das Skript signiert frische für eine offen gelassene Seite. Setzen Sie dasselbe TokenSecret auf jedem Server hinter einem Load Balancer.
Die Werte reisen im Link, und der Bericht wird beim GET erzeugt, nachdem OnGetReport und OnBeforeGenerate erneut gelaufen sind. Dateien werden mit Cache-Control: private, no-store ausgeliefert, und eine fehlerhafte Anfrage, ein fehlerhaftes Token oder eine Ablehnung werden mit 400 oder 403 beantwortet.
ShowParameters, ShowToolbar, ShowPageNav, ShowZoomControls und ShowSearch legen fest, was der Viewer zeigt, Zoom nimmt auto, page-width, fit oder einen Prozentwert, und Theme und CSSHeight bestimmen das Aussehen der Vorschau.
Mit ActionURL und ohne HTMXEngine leitet Ihr Host den Apply-Post an DispatchComponentEvent und die Dateilinks an DispatchComponentFile. GetReportURL signiert dieselben Links für Ihren eigenen Code, zum Beispiel um den Link zum PDF eines Zeitraums in einer Nachricht zu versenden.
In einer Razor-View rendert der Tag Helper <sgc-report-viewer> den Viewer. report nimmt einen langlebigen TsgcHTMLReport, oder lassen Sie es weg und verwenden Sie on-get-report. Apply sendet an den Komponenten-Ereignis-Endpunkt, und die PDF- und Excel-Links werden von der Komponenten-Dateiroute von UseSgcHtml ausgeliefert, sodass nichts gemappt werden muss.
Demos\60.HTML\01.RunTime\31.ReportViewer ist sgc Sales Reports, ein Server auf Port 8133 mit drei Berichten: Umsatz nach Region mit einem Balkendiagramm pro Region und einem Ringdiagramm des Anteils jeder Region, eine Rechnung mit Logo, einem QR-Code zum Bezahlen und einem Code-128-Barcode sowie ein Ausdruck eines Grids. Die Schaltfläche Neue Bestellung fügt eine Bestellung hinzu, und jede offene Vorschau wendet in jedem Browser ihre Parameter über den WebSocket der Seite erneut an. Die Designtime-, Lazarus- und .NET-Versionen spiegeln sie.
| Online ausprobierenSehen Sie es in der Demo Berichtsanzeige, live auf dem eSeGeCe-Demoserver. | Öffnen | |
| Online-HilfeVollständige API-Referenz und Verwendungshandbuch für den Viewer. | Öffnen | |
| TsgcHTMLReport-HilfeBänder, Ausdrücke, Diagramme, Unterberichte, Schriften und die JSON-Definition der Berichts-Engine. | Öffnen | |
| Report-Designer-KomponenteDie Bänder, Elemente und Parameter eines Berichts im Browser entwerfen. | Öffnen | |
| PDF-Viewer-KomponenteDer pdf.js-Viewer, der die Vorschau des Berichts zeichnet. | Öffnen | |
| Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten. | Öffnen | |
| Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte. | Öffnen | |
| PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode. | Öffnen |