Report Viewer

TsgcHTMLComponent_ReportViewer 在网页中显示报表,带有参数面板、PDF 预览、下载 PDF、打印和导出到 Excel。报表是一个 TsgcHTMLReport,这是一个分带报表引擎,使用 sgcHTML 的 PDF 引擎把分组、合计、图表、条形码和子报表输出为 PDF,无需外部报表工具、打印机驱动程序或 DLL。适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_ReportViewer and TsgcHTMLReport

用带区和 Parameters 定义报表,把它链接到查看器并渲染。查看器会根据参数生成表单,预览、下载和打印是同一份 PDF,由服务器使用用户应用的值生成,所见即所印。请求之间服务器上不保留任何内容。

组件类

查看器 TsgcHTMLComponent_ReportViewer,以及它所显示的非可视报表引擎 TsgcHTMLReport

渲染为

参数面板、用 PDF 查看器内嵌的 pdf.js 绘制的预览,以及“下载 PDF”“打印”和“导出到 Excel”链接

语言

Delphi, C++ Builder, .NET

在浏览器中查看带参数的销售报表

报表声明了必填的期间和地区。查看器把它们转换成字段,报表在自己的 OnBeforeGenerate 事件中用用户应用的值筛选数据。

uses
  sgcHTML_Export_PDF, sgcHTML_Report, sgcHTML_Component_ReportViewer;

// 报表
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;

// 明细带区:每行数据一行
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;

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

// 报表使用查看器的值筛选其数据
procedure TForm1.ReportBeforeGenerate(Sender: TObject; aParams: TStrings);
var
  vPeriod: string;
begin
  vPeriod := aParams.Values['Period'];   // 从;到
  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 是长期存在的 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;

// 报表
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);

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

// 同一份报表,不使用查看器:第三季度的 PDF
var values = new List<string> { "Period=2026-07-01;2026-09-30" };
report.SaveToFile("q3.pdf", values);

您的用户能得到什么

选择值,查看报表,然后下载、打印,或在 Excel 中打开其数据。

参数面板

报表的每个参数都变成一个带标签的字段:文本、数字、日期、带“从”和“到”的日期范围、Options 的选择框和复选框。必填参数显示星号,在“应用”之前先在浏览器中检查,并在服务器上再次检查。“重置”会恢复每个字段的默认值。

PDF 预览

预览使用 TsgcHTMLComponent_PDFViewer 内嵌的 pdf.js,带有它的工具栏、页面导航、缩放和搜索。在绘制出第一页之前,一个带有“正在生成报表...”文字的旋转图标会覆盖预览。启用 AutoGenerate 后,预览会立即用默认值加载。

下载、打印和 Excel

“下载 PDF”和“打印”与预览是同一份 PDF,下载的文件以 FileName 命名。“导出到 Excel”用 ExportToXLSX 写出报表的数据。ShowDownload、ShowPrint 和 ShowExportXLSX 分别显示或隐藏它们。

清晰的提示信息

缺少必填值时,会标出该字段并把焦点移到它上面。没有可打印的行时,预览会显示“所选参数没有数据”,而不是一份空白的 PDF。被拒绝或失败的生成会显示原因并禁用链接。文本来自库的区域设置。

无障碍和键盘

查看器是一个带标签的区域。每个字段都有标签,日期范围是带 legend 的 fieldset,必填字段带有 aria-required,缺少值时会设置 aria-invalid。在字段中按 Enter 会应用参数,polite 实时区域会播报必填字段、无数据、拒绝和错误。

分带报表输出为 PDF

查看器背后的引擎本身就是一个非可视组件。它用 sgcHTML 的 PDF 引擎 TsgcHTMLExportPDF 写出 PDF,同一份报表也可以写成 Excel 工作表。

带区

报表页眉、页眉、带页眉和页脚的嵌套分组、明细行、页脚和报表页脚。分组页眉可以在每个新页上重复,KeepTogether 让分组保持在同一页,NewPageBefore 和 NewPageAfter 用于分页,带有 NewPageAfter 的报表页眉就是封面。

项目

带区可包含文本、图像、线条、矩形、图表、富文本、条形码、二维码和子报表。文本会按其框裁剪,带有 AutoHeight 的项目会让带区随换行后的文本增高。

表达式和 PrintIf

文本可以包含放在 [ ] 之间的表达式:带掩码的字段,例如 [Amount:#,##0.00],以及 [Sum(Field)]、[Count]、[Avg(Field)]、[Min(Field)]、[Max(Field)]、[RunningSum(Field)]、[Page] 之 [Pages]、[Param.Name] 和 [GroupValue]。带区和项目只在其 PrintIf 条件为 true 时打印,例如 Amount > 1000。

数据源

行来自 DataSet、Grid、RowsJSON 中的 JSON 数组或 OnGetRow 事件。LoadFromGrid 根据 TsgcHTMLComponent_Grid 的列生成表格报表,每页都有标题,带斑马纹行、数值列的合计和页码。

图表、条形码和二维码

图表项目把其带区的行绘制为矢量图形:条形图、横向条形图、堆叠条形图、折线图、面积图、饼图或环形图,在分组带区中每个分组一张图表。ChartSource 会按网页显示的样子打印 TsgcHTMLComponent_Chart。条形码项目绘制 Code 128,二维码项目使用 M 级纠错。

子报表和富文本

子报表项目在其带区内打印另一份报表,例如订单的明细行,通过 LinkFields 与主行关联,最多嵌套 5 层,并可延续到后续页面。富文本项目打印 HTML,使用 AutoHeight 时,它会在页眉之后跨页排布。

字体和语言

项目默认使用 Base-14 字体打印,这些字体包含 Windows-1252 的字符。在 Fonts 中注册 TrueType 字体即可打印西里尔文、希腊文、阿拉伯文、希伯来文、中文、日文、韩文或符号。只嵌入实际打印的字形,FallbackFonts 和 AutoFallback 负责补足字体缺少的字符。

到处输出一致

数字和日期使用报表的 DecimalSeparator、ThousandSeparator、DateFormat 和 TimeFormat 打印,而不是机器的区域设置,因此报表在每台计算机上以及在 .NET 上的打印结果都相同。固定 CreationDate 后,相同的输入会得到相同的 PDF 字节。

以 JSON 表示的定义

SaveToJSON 写出页面设置、字体、带区、项目和参数,LoadFromJSON 在验证整个定义之后将其读回,并给出任何错误的 JSON 路径。用户可以在浏览器中用 Report Designer 设计报表,双击报表则会在 Delphi IDE 中打开同一个设计器。

一份报表,多个请求

Generate、SaveToFile、SaveToStream、GetPDFBytes、ExportToXLSX 和 HasData 各自构建行和布局的独立副本。一份报表可以同时服务 Web 服务器的多个请求,每个请求用自己的参数筛选,无需您自己加锁。

关键属性、方法与事件

您最常用到的查看器成员。

Report 与 OnGetReport

Report 是要显示的 TsgcHTMLReport。一个查看器为所有用户服务:要为每位用户显示不同的报表,例如按租户或按角色,请在 OnGetReport(Sender, aParams, aReport) 中返回,它在请求的线程上触发,sgcHTMLRequestSession 在该线程上提供会话。

OnBeforeGenerate

OnBeforeGenerate(Sender, aParams, aAccept, aErrorMessage) 在查看器渲染时、每次“应用”时以及每次对链接的 GET 时接受或拒绝生成,因此复制的链接也会被拒绝。可用于权限,以及跨参数的规则,例如期间最长一年。

签名链接

每个文件链接都带有一个 HMAC-SHA256 令牌,覆盖组件、格式、参数值、会话和过期时间,且只在渲染它的会话中有效。链接在 TokenLifetime 秒(默认 300)后过期,脚本会为一直开着的页面签发新链接。请在负载均衡器后面的每台服务器上设置相同的 TokenSecret。

服务器上没有状态

值随链接传递,报表在 GET 时生成,此时 OnGetReport 和 OnBeforeGenerate 会再次运行。文件以 Cache-Control: private, no-store 提供,错误的请求、错误的令牌或拒绝会返回 400 或 403。

预览选项

ShowParameters、ShowToolbar、ShowPageNav、ShowZoomControls 和 ShowSearch 设置查看器显示的内容,Zoom 接受 auto、page-width、fit 或百分比,Theme 和 CSSHeight 设置预览的外观。

没有引擎时

设置 ActionURL 且没有 HTMXEngine 时,由您的宿主把“应用”的提交路由到 DispatchComponentEvent,把文件链接路由到 DispatchComponentFile。GetReportURL 为您自己的代码签发同样的链接,例如在消息中发送某个期间的 PDF 链接。

undefined

在 Razor 视图中,<sgc-report-viewer> Tag Helper 渲染查看器。report 接受一个长期存在的 TsgcHTMLReport,或省略它并使用 on-get-report。“应用”提交到组件事件端点,PDF 和 Excel 链接由 UseSgcHtml 的组件文件路由提供,因此无需映射任何内容。

演示

Demos\60.HTML\01.RunTime\31.ReportViewer 是 sgc Sales Reports,一个在端口 8133 上的服务器,包含三份报表:按地区的销售报表,每个地区一张条形图,外加各地区占比的环形图;带徽标、支付二维码和 Code 128 条形码的发票;以及网格的打印输出。“New order”按钮添加一个订单,每个浏览器中每个已打开的预览都会通过页面的 WebSocket 重新应用其参数。设计时、Lazarus 和 .NET 版本与之对应。

继续探索

在线试用查看 报表查看器 演示,它在 eSeGeCe 演示服务器上实时运行。
在线帮助查看器的完整 API 参考和使用指南。
TsgcHTMLReport 帮助报表引擎的带区、表达式、图表、子报表、字体和 JSON 定义。
Report Designer 组件在浏览器中设计报表的带区、项目和参数。
PDF Viewer 组件绘制报表预览的 pdf.js 查看器。
所有 sgcHTML 组件浏览 80 多个组件的完整功能矩阵。
下载免费试用版30 天试用版包含 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。
超值之选:All-AccesseSeGeCe 全部产品,含高级支持,每年 €1,059 起。
查看 All-Access 价格

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。