TsgcHTMLComponent_ReportViewer muestra un informe en una página web, con un panel de parámetros, una vista previa en PDF, Descargar PDF, Imprimir y Exportar a Excel. El informe es un TsgcHTMLReport, un motor de informes por bandas que imprime grupos, totales, gráficos, códigos de barras y subinformes en PDF con el motor PDF de sgcHTML, sin herramienta de informes externa, controlador de impresora ni DLL, en Delphi, C++ Builder y .NET.
Define el informe con sus bandas y Parameters, enlázalo al visor y renderízalo. El visor construye un formulario a partir de los parámetros, y la vista previa, la descarga y la impresión son el mismo PDF, generado en el servidor con los valores que aplicó el usuario, así que lo que el usuario ve es lo que imprime. No se guarda nada en el servidor entre peticiones.
TsgcHTMLComponent_ReportViewer, el visor, y TsgcHTMLReport, el motor de informes no visual que muestra
Un panel de parámetros, una vista previa dibujada con el pdf.js incrustado del visor de PDF, y los enlaces Descargar PDF, Imprimir y Exportar a Excel
Delphi, C++ Builder, .NET
El informe declara un periodo obligatorio y una región. El visor los convierte en campos, y el informe filtra sus datos en su propio evento OnBeforeGenerate con los valores que aplica el usuario.
uses
sgcHTML_Export_PDF, sgcHTML_Report, sgcHTML_Component_ReportViewer;
// el informe
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 de detalle: una línea por fila
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;
// el visor
oViewer := TsgcHTMLComponent_ReportViewer.Create(Self);
oViewer.Name := 'SalesViewer';
oViewer.HTMXEngine := sgcHTMXEngine1;
oViewer.Report := oReport;
oViewer.TokenSecret := LoadSecretFromConfig;
oTemplate.BodyContent := oViewer.HTML;
// el informe filtra sus datos con los valores del visor
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 es un TsgcHTMLReport de larga vida *@
@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;
// el informe
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);
// el visor
var viewer = new TsgcHTMLComponent_ReportViewer();
viewer.Name = "SalesViewer";
viewer.HTMXEngine = engine;
viewer.Report = report;
viewer.TokenSecret = configuration["Reports:Secret"];
template.BodyContent = viewer.HTML;
// el mismo informe, sin el visor: un PDF del tercer trimestre
var values = new List<string> { "Period=2026-07-01;2026-09-30" };
report.SaveToFile("q3.pdf", values);Elige los valores, mira el informe y luego descárgalo, imprímelo o abre sus datos en Excel.
Cada parámetro del informe se convierte en un campo con etiqueta: texto, número, fecha, un intervalo de fechas con Desde y Hasta, un select de las Options y un checkbox. Un parámetro Required muestra un asterisco y se comprueba en el navegador antes de Aplicar y de nuevo en el servidor. Restablecer devuelve cada campo a su valor por defecto.
La vista previa usa el pdf.js incrustado de TsgcHTMLComponent_PDFViewer, con su barra de herramientas, navegación por páginas, zoom y búsqueda. Un indicador de carga con el texto Generando informe... la cubre hasta que se dibuja la primera página. Con AutoGenerate la vista previa se carga de inmediato con los valores por defecto.
Descargar PDF e Imprimir son el mismo PDF que la vista previa, y la descarga se nombra según FileName. Exportar a Excel escribe los datos del informe con ExportToXLSX. ShowDownload, ShowPrint y ShowExportXLSX muestran u ocultan cada uno.
Un valor obligatorio que falta marca el campo y lleva el foco a él. Cuando no se imprime ninguna fila, la vista previa muestra No hay datos para los parámetros seleccionados en lugar de un PDF vacío. Una generación rechazada o fallida muestra su motivo y desactiva los enlaces. Los textos proceden de la configuración regional de la biblioteca.
El visor es una región con etiqueta. Cada campo tiene una etiqueta, un intervalo de fechas es un fieldset con una leyenda, los campos obligatorios llevan aria-required y un valor que falta establece aria-invalid. Intro en un campo aplica los parámetros, y una región live cortés anuncia campos obligatorios, ausencia de datos, rechazos y errores.
El motor detrás del visor es un componente no visual propio. Escribe el PDF con TsgcHTMLExportPDF, el motor PDF de sgcHTML, y el mismo informe también puede escribirse como una hoja de Excel.
Un encabezado de informe, encabezados de página, grupos anidados con encabezados y pies, filas de detalle, pies de página y un pie de informe. Los encabezados de grupo pueden repetirse en cada página nueva, KeepTogether mantiene un grupo en una página, NewPageBefore y NewPageAfter insertan saltos de página, y un encabezado de informe con NewPageAfter es una portada.
Las bandas contienen texto, imágenes, líneas, rectángulos, gráficos, texto enriquecido, códigos de barras, códigos QR y subinformes. El texto se recorta a su caja, y los elementos con AutoHeight hacen crecer la banda para ajustarse al texto ajustado.
Los textos contienen expresiones entre [ ]: campos con una máscara como [Amount:#,##0.00], [Sum(Field)], [Count], [Avg(Field)], [Min(Field)], [Max(Field)], [RunningSum(Field)], [Page] de [Pages], [Param.Name] y [GroupValue]. Las bandas y los elementos se imprimen solo cuando su condición PrintIf es verdadera, como Amount > 1000.
Las filas proceden de un DataSet, un Grid, una matriz JSON en RowsJSON o el evento OnGetRow. LoadFromGrid construye un informe de tabla con las columnas de un TsgcHTMLComponent_Grid, con los títulos en cada página, filas cebra, los totales de las columnas numéricas y números de página.
Un elemento de gráfico dibuja las filas de su banda como gráficos vectoriales: barras, barras horizontales, barras apiladas, líneas, áreas, circular o anillo, un gráfico por grupo en una banda de grupo. ChartSource imprime un TsgcHTMLComponent_Chart tal como lo muestra la página web. Los elementos de código de barras dibujan Code 128, y los elementos de código QR usan el nivel de corrección de errores M.
Un elemento de subinforme imprime otro informe dentro de su banda, como las líneas de un pedido, enlazado a la fila maestra mediante LinkFields, hasta 5 niveles de profundidad, y continúa en las páginas siguientes. Un elemento de texto enriquecido imprime HTML y, con AutoHeight, fluye entre páginas después de los encabezados de página.
Los elementos se imprimen por defecto con las fuentes Base-14, que contienen los caracteres de Windows-1252. Registra fuentes TrueType en Fonts para imprimir cirílico, griego, árabe, hebreo, chino, japonés, coreano o símbolos. Solo se incrustan los glifos impresos, y FallbackFonts y AutoFallback cubren los caracteres que le faltan a una fuente.
Los números y las fechas se imprimen con DecimalSeparator, ThousandSeparator, DateFormat y TimeFormat del informe, nunca con la configuración regional de la máquina, así que un informe se imprime igual en cualquier equipo y en .NET. Con un CreationDate fijo, la misma entrada da los mismos bytes de PDF.
SaveToJSON escribe la configuración de página, las fuentes, las bandas, los elementos y los parámetros, y LoadFromJSON los lee de vuelta tras validar toda la definición, con la ruta JSON de cualquier error. Los usuarios diseñan informes en el navegador con el Report Designer, y un doble clic en el informe abre el mismo diseñador en el IDE de Delphi.
Generate, SaveToFile, SaveToStream, GetPDFBytes, ExportToXLSX y HasData construyen cada uno su propia copia de las filas y del diseño. Un informe atiende varias peticiones de un servidor web a la vez, cada una filtrada con sus propios parámetros, sin bloqueo propio.
Los miembros del visor que más usas.
Report es el TsgcHTMLReport que se muestra. Un visor atiende a todos los usuarios: para mostrar a cada usuario un informe distinto, por ejemplo por inquilino o por rol, devuélvelo en OnGetReport(Sender, aParams, aReport), que se dispara en el hilo de la petición donde sgcHTMLRequestSession da la sesión.
OnBeforeGenerate(Sender, aParams, aAccept, aErrorMessage) acepta o rechaza una generación, cuando el visor renderiza, en cada Aplicar y en cada GET de un enlace, de modo que un enlace copiado también se rechaza. Úsalo para permisos y para reglas entre parámetros, como un periodo de como máximo un año.
Cada enlace de archivo lleva un token HMAC-SHA256 sobre el componente, el formato, los valores de los parámetros, la sesión y la caducidad, y solo funciona en la sesión que lo renderizó. Los enlaces caducan tras TokenLifetime segundos (300 por defecto), y el script firma otros nuevos para una página que se deja abierta. Define el mismo TokenSecret en cada servidor detrás de un balanceador de carga.
Los valores viajan en el enlace, y el informe se genera en el GET, después de que OnGetReport y OnBeforeGenerate se ejecuten de nuevo. Los archivos se sirven con Cache-Control: private, no-store, y una petición incorrecta, un token incorrecto o un rechazo responden 400 o 403.
ShowParameters, ShowToolbar, ShowPageNav, ShowZoomControls y ShowSearch definen lo que muestra el visor, Zoom acepta auto, page-width, fit o un porcentaje, y Theme y CSSHeight definen el aspecto de la vista previa.
Con ActionURL y sin HTMXEngine, tu host enruta el envío de Aplicar a DispatchComponentEvent y los enlaces de archivo a DispatchComponentFile. GetReportURL firma los mismos enlaces para tu propio código, por ejemplo para enviar en un mensaje un enlace al PDF de un periodo.
En una vista Razor el Tag Helper <sgc-report-viewer> renderiza el visor. report acepta un TsgcHTMLReport de larga vida, o puedes omitirlo y usar on-get-report. Aplicar envía al endpoint de eventos de componentes y los enlaces de PDF y Excel los sirve la ruta de archivos de componentes de UseSgcHtml, así que no hace falta mapear nada.
Demos\60.HTML\01.RunTime\31.ReportViewer es sgc Sales Reports, un servidor en el puerto 8133 con tres informes: ventas por región con un gráfico de barras por región y un gráfico de anillo con la cuota de cada región, una factura con un logotipo, un código QR para pagar y un código de barras Code 128, y una impresión de un grid. El botón Nuevo pedido añade un pedido, y cada vista previa abierta, en cada navegador, vuelve a aplicar sus parámetros por el WebSocket de la página. Las versiones de tiempo de diseño, Lazarus y .NET lo replican.
| Pruébalo en líneaMíralo en la demo Visor de informes, funcionando en vivo en el servidor de demos de eSeGeCe. | Abrir | |
| Ayuda en líneaReferencia completa de la API y guía de uso del visor. | Abrir | |
| Ayuda de TsgcHTMLReportBandas, expresiones, gráficos, subinformes, fuentes y la definición JSON del motor de informes. | Abrir | |
| Componente Report DesignerDiseña las bandas, los elementos y los parámetros de un informe en el navegador. | Abrir | |
| Componente PDFViewerEl visor pdf.js que dibuja la vista previa del informe. | Abrir | |
| Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 80 componentes. | Abrir | |
| Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML. | Abrir | |
| PreciosLicencias Single, Team y Site con todo el código fuente. | Abrir |