Report Viewer

TsgcHTMLComponent_ReportViewer mostra un report in una pagina web, con un pannello dei parametri, un'anteprima PDF, Scarica PDF, Stampa ed Esporta in Excel. Il report è un TsgcHTMLReport, un motore di report a bande che stampa gruppi, totali, grafici, codici a barre e sottoreport in PDF con il motore PDF di sgcHTML, senza strumenti di reportistica esterni, driver di stampa o DLL, in Delphi, C++ Builder e .NET.

TsgcHTMLComponent_ReportViewer e TsgcHTMLReport

Definisci il report con le sue bande e Parameters, collegalo al viewer e visualizzalo. Il viewer costruisce un modulo dai parametri, e l'anteprima, il download e la stampa sono lo stesso PDF, generato sul server con i valori applicati dall'utente, quindi ciò che l'utente vede è ciò che stampa. Sul server non viene conservato nulla tra le richieste.

Classi dei componenti

TsgcHTMLComponent_ReportViewer, il viewer, e TsgcHTMLReport, il motore di report non visuale che mostra

Rendering

Un pannello dei parametri, un'anteprima disegnata con il pdf.js incorporato del visualizzatore PDF, e i link Scarica PDF, Stampa ed Esporta in Excel

Linguaggi

Delphi, C++ Builder, .NET

Un report vendite con parametri, nel browser

Il report dichiara un periodo obbligatorio e una regione. Il viewer li trasforma in campi, e il report filtra i suoi dati nel proprio evento OnBeforeGenerate con i valori che l'utente applica.

uses
  sgcHTML_Export_PDF, sgcHTML_Report, sgcHTML_Component_ReportViewer;

// il report
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;

// una banda di dettaglio: una riga per ogni record
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;

// il viewer
oViewer := TsgcHTMLComponent_ReportViewer.Create(Self);
oViewer.Name := 'SalesViewer';
oViewer.HTMXEngine := sgcHTMXEngine1;
oViewer.Report := oReport;
oViewer.TokenSecret := LoadSecretFromConfig;
oTemplate.BodyContent := oViewer.HTML;

// il report filtra i suoi dati con i valori del viewer
procedure TForm1.ReportBeforeGenerate(Sender: TObject; aParams: TStrings);
var
  vPeriod: string;
begin
  vPeriod := aParams.Values['Period'];   // from;to
  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 è un TsgcHTMLReport di lunga durata *@
@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;

// il report
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);

// il viewer
var viewer = new TsgcHTMLComponent_ReportViewer();
viewer.Name = "SalesViewer";
viewer.HTMXEngine = engine;
viewer.Report = report;
viewer.TokenSecret = configuration["Reports:Secret"];
template.BodyContent = viewer.HTML;

// lo stesso report, senza il viewer: un PDF del terzo trimestre
var values = new List<string> { "Period=2026-07-01;2026-09-30" };
report.SaveToFile("q3.pdf", values);

Cosa ottengono i tuoi utenti

Scegli i valori, guarda il report, poi scaricalo, stampalo o apri i suoi dati in Excel.

Pannello dei parametri

Ogni parametro del report diventa un campo con etichetta: testo, numero, data, un intervallo di date con Da e A, un select delle Options e una checkbox. Un parametro Required mostra un asterisco ed è controllato nel browser prima di Applica e di nuovo sul server. Reimposta ripristina il valore predefinito di ogni campo.

Anteprima PDF

L'anteprima usa il pdf.js incorporato di TsgcHTMLComponent_PDFViewer, con la sua barra degli strumenti, la navigazione tra le pagine, lo zoom e la ricerca. Uno spinner con il testo Generazione del report... la copre finché non viene disegnata la prima pagina. Con AutoGenerate l'anteprima si carica subito con i valori predefiniti.

Download, stampa ed Excel

Scarica PDF e Stampa sono lo stesso PDF dell'anteprima, e il download prende il nome da FileName. Esporta in Excel scrive i dati del report con ExportToXLSX. ShowDownload, ShowPrint e ShowExportXLSX mostrano o nascondono ciascuno.

Messaggi chiari

Un valore obbligatorio mancante segna il campo e sposta il focus su di esso. Quando nessuna riga viene stampata, l'anteprima mostra Nessun dato per i parametri selezionati invece di un PDF vuoto. Una generazione rifiutata o fallita mostra il motivo e disattiva i link. I testi provengono dalla localizzazione della libreria.

Accessibilità e tastiera

Il viewer è una regione con etichetta. Ogni campo ha un'etichetta, un intervallo di date è un fieldset con una legenda, i campi obbligatori portano aria-required e un valore mancante imposta aria-invalid. Invio in un campo applica i parametri, e una regione live cortese annuncia i campi obbligatori, l'assenza di dati, i rifiuti e gli errori.

Report a bande in PDF

Il motore dietro il viewer è un componente non visuale a sé stante. Scrive il PDF con TsgcHTMLExportPDF, il motore PDF di sgcHTML, e lo stesso report può essere scritto anche come foglio Excel.

Bande

Un'intestazione del report, intestazioni di pagina, gruppi annidati con intestazioni e piè di gruppo, righe di dettaglio, piè di pagina e un piè del report. Le intestazioni di gruppo possono ripetersi a ogni nuova pagina, KeepTogether mantiene un gruppo su una pagina, NewPageBefore e NewPageAfter inseriscono interruzioni di pagina, e un'intestazione del report con NewPageAfter è una copertina.

Elementi

Le bande contengono testo, immagini, linee, rettangoli, grafici, testo formattato, codici a barre, codici QR e sottoreport. Il testo viene ritagliato al suo riquadro, e gli elementi con AutoHeight fanno crescere la banda per adattarsi al testo a capo.

Espressioni e PrintIf

I testi contengono espressioni tra [ ]: campi con una maschera come [Amount:#,##0.00], [Sum(Field)], [Count], [Avg(Field)], [Min(Field)], [Max(Field)], [RunningSum(Field)], [Page] di [Pages], [Param.Name] e [GroupValue]. Le bande e gli elementi vengono stampati solo quando la loro condizione PrintIf è vera, come Amount > 1000.

Origini dati

Le righe provengono da un DataSet, un Grid, un array JSON in RowsJSON o dall'evento OnGetRow. LoadFromGrid costruisce un report a tabella con le colonne di un TsgcHTMLComponent_Grid, con le intestazioni su ogni pagina, righe zebrate, i totali delle colonne numeriche e i numeri di pagina.

Grafici, codici a barre e codici QR

Un elemento grafico disegna le righe della sua banda come grafica vettoriale: barre, barre orizzontali, barre impilate, linee, aree, torta o ciambella, un grafico per gruppo in una banda di gruppo. ChartSource stampa un TsgcHTMLComponent_Chart così come lo mostra la pagina web. Gli elementi codice a barre disegnano Code 128, e gli elementi codice QR usano il livello di correzione degli errori M.

Sottoreport e testo formattato

Un elemento sottoreport stampa un altro report dentro la sua banda, come le righe di un ordine, collegato alla riga principale tramite LinkFields, fino a 5 livelli di profondità, e continua nelle pagine successive. Un elemento di testo formattato stampa HTML e, con AutoHeight, scorre sulle pagine dopo le intestazioni di pagina.

Font e lingue

Gli elementi vengono stampati di default con i font Base-14, che contengono i caratteri di Windows-1252. Registra font TrueType in Fonts per stampare cirillico, greco, arabo, ebraico, cinese, giapponese, coreano o simboli. Vengono incorporati solo i glifi stampati, e FallbackFonts e AutoFallback coprono i caratteri che un font non ha.

Stesso output ovunque

Numeri e date vengono stampati con DecimalSeparator, ThousandSeparator, DateFormat e TimeFormat del report, mai con le impostazioni regionali della macchina, quindi un report si stampa allo stesso modo su ogni computer e su .NET. Con un CreationDate fisso lo stesso input dà gli stessi byte del PDF.

Definizione come JSON

SaveToJSON scrive l'impostazione della pagina, i font, le bande, gli elementi e i parametri, e LoadFromJSON li rilegge dopo aver validato l'intera definizione, con il percorso JSON di ogni errore. Gli utenti progettano i report nel browser con il Report Designer, e un doppio clic sul report apre lo stesso designer nell'IDE di Delphi.

Un report, molte richieste

Generate, SaveToFile, SaveToStream, GetPDFBytes, ExportToXLSX e HasData costruiscono ciascuno la propria copia delle righe e del layout. Un solo report serve più richieste di un server web contemporaneamente, ciascuna filtrata con i propri parametri, senza alcun lock proprio.

Proprietà, metodi ed eventi principali

I membri del viewer che usi più spesso.

Report e OnGetReport

Report è il TsgcHTMLReport da mostrare. Un viewer serve ogni utente: per mostrare a ogni utente un report diverso, per esempio per tenant o per ruolo, restituiscilo in OnGetReport(Sender, aParams, aReport), che scatta sul thread della richiesta dove sgcHTMLRequestSession fornisce la sessione.

OnBeforeGenerate

OnBeforeGenerate(Sender, aParams, aAccept, aErrorMessage) accetta o rifiuta una generazione, quando il viewer esegue il rendering, a ogni Applica e a ogni GET di un link, quindi anche un link copiato viene rifiutato. Usalo per i permessi e per le regole tra parametri, come un periodo di al massimo un anno.

Ogni link di file porta un token HMAC-SHA256 su componente, formato, valori dei parametri, sessione e scadenza, e funziona solo nella sessione che lo ha renderizzato. I link scadono dopo TokenLifetime secondi (300 di default), e lo script ne firma di nuovi per una pagina lasciata aperta. Imposta lo stesso TokenSecret su ogni server dietro un bilanciatore di carico.

Nessuno stato sul server

I valori viaggiano nel link, e il report viene generato sul GET, dopo che OnGetReport e OnBeforeGenerate sono stati eseguiti di nuovo. I file vengono serviti con Cache-Control: private, no-store, e una richiesta errata, un token errato o un rifiuto rispondono 400 o 403.

Opzioni di anteprima

ShowParameters, ShowToolbar, ShowPageNav, ShowZoomControls e ShowSearch impostano ciò che il viewer mostra, Zoom accetta auto, page-width, fit o una percentuale, e Theme e CSSHeight impostano l'aspetto dell'anteprima.

Senza un motore

Con ActionURL e senza HTMXEngine, il tuo host instrada l'invio di Applica a DispatchComponentEvent e i link dei file a DispatchComponentFile. GetReportURL firma gli stessi link per il tuo codice, per esempio per inviare in un messaggio un link al PDF di un periodo.

ASP.NET Core

In una vista Razor il Tag Helper <sgc-report-viewer> renderizza il viewer. report accetta un TsgcHTMLReport di lunga durata, oppure omettilo e usa on-get-report. Applica invia all'endpoint degli eventi dei componenti e i link PDF ed Excel sono serviti dalla route dei file dei componenti di UseSgcHtml, quindi non serve mappare nulla.

La demo

Demos\60.HTML\01.RunTime\31.ReportViewer è sgc Sales Reports, un server sulla porta 8133 con tre report: vendite per regione con un grafico a barre per regione e un grafico a ciambella della quota di ogni regione, una fattura con un logo, un codice QR per pagare e un codice a barre Code 128, e la stampa di un grid. Il pulsante Nuovo ordine aggiunge un ordine, e ogni anteprima aperta, in ogni browser, riapplica i suoi parametri tramite il WebSocket della pagina. Le versioni design time, Lazarus e .NET lo replicano.

Continua a esplorare

Provalo onlineGuardalo nella demo Visualizzatore di report, in esecuzione dal vivo sul server demo di eSeGeCe.
Guida in lineaRiferimento API completo e guida all'uso del viewer.
Guida di TsgcHTMLReportBande, espressioni, grafici, sottoreport, font e la definizione JSON del motore di report.
Componente Report DesignerProgetta nel browser le bande, gli elementi e i parametri di un report.
Componente PDFViewerIl visualizzatore pdf.js che disegna l'anteprima del report.
Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti.
Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.
PrezziLicenze Single, Team e Site con codice sorgente completo.
La scelta più conveniente: All-AccessTutti i prodotti eSeGeCe, con Supporto Premium incluso, a partire da €1,059/anno.
Vedi i prezzi All-Access

Pronto a Iniziare?

Scarica la versione di prova gratuita e inizia a creare interfacce web in Delphi, C++ Builder e .NET.