Report Viewer
TsgcHTMLComponent_ReportViewer 在网页中显示报表,带有参数面板、PDF 预览、下载 PDF、打印和导出到 Excel。报表是一个 TsgcHTMLReport,这是一个分带报表引擎,使用 sgcHTML 的 PDF 引擎把分组、合计、图表、条形码和子报表输出为 PDF,无需外部报表工具、打印机驱动程序或 DLL。适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_ReportViewer 在网页中显示报表,带有参数面板、PDF 预览、下载 PDF、打印和导出到 Excel。报表是一个 TsgcHTMLReport,这是一个分带报表引擎,使用 sgcHTML 的 PDF 引擎把分组、合计、图表、条形码和子报表输出为 PDF,无需外部报表工具、打印机驱动程序或 DLL。适用于 Delphi、C++ Builder 和 .NET。
用带区和 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 的选择框和复选框。必填参数显示星号,在“应用”之前先在浏览器中检查,并在服务器上再次检查。“重置”会恢复每个字段的默认值。
预览使用 TsgcHTMLComponent_PDFViewer 内嵌的 pdf.js,带有它的工具栏、页面导航、缩放和搜索。在绘制出第一页之前,一个带有“正在生成报表...”文字的旋转图标会覆盖预览。启用 AutoGenerate 后,预览会立即用默认值加载。
“下载 PDF”和“打印”与预览是同一份 PDF,下载的文件以 FileName 命名。“导出到 Excel”用 ExportToXLSX 写出报表的数据。ShowDownload、ShowPrint 和 ShowExportXLSX 分别显示或隐藏它们。
缺少必填值时,会标出该字段并把焦点移到它上面。没有可打印的行时,预览会显示“所选参数没有数据”,而不是一份空白的 PDF。被拒绝或失败的生成会显示原因并禁用链接。文本来自库的区域设置。
查看器是一个带标签的区域。每个字段都有标签,日期范围是带 legend 的 fieldset,必填字段带有 aria-required,缺少值时会设置 aria-invalid。在字段中按 Enter 会应用参数,polite 实时区域会播报必填字段、无数据、拒绝和错误。
查看器背后的引擎本身就是一个非可视组件。它用 sgcHTML 的 PDF 引擎 TsgcHTMLExportPDF 写出 PDF,同一份报表也可以写成 Excel 工作表。
报表页眉、页眉、带页眉和页脚的嵌套分组、明细行、页脚和报表页脚。分组页眉可以在每个新页上重复,KeepTogether 让分组保持在同一页,NewPageBefore 和 NewPageAfter 用于分页,带有 NewPageAfter 的报表页眉就是封面。
带区可包含文本、图像、线条、矩形、图表、富文本、条形码、二维码和子报表。文本会按其框裁剪,带有 AutoHeight 的项目会让带区随换行后的文本增高。
文本可以包含放在 [ ] 之间的表达式:带掩码的字段,例如 [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 字节。
SaveToJSON 写出页面设置、字体、带区、项目和参数,LoadFromJSON 在验证整个定义之后将其读回,并给出任何错误的 JSON 路径。用户可以在浏览器中用 Report Designer 设计报表,双击报表则会在 Delphi IDE 中打开同一个设计器。
Generate、SaveToFile、SaveToStream、GetPDFBytes、ExportToXLSX 和 HasData 各自构建行和布局的独立副本。一份报表可以同时服务 Web 服务器的多个请求,每个请求用自己的参数筛选,无需您自己加锁。
您最常用到的查看器成员。
Report 是要显示的 TsgcHTMLReport。一个查看器为所有用户服务:要为每位用户显示不同的报表,例如按租户或按角色,请在 OnGetReport(Sender, aParams, aReport) 中返回,它在请求的线程上触发,sgcHTMLRequestSession 在该线程上提供会话。
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 链接。
在 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 授权,均含完整源代码。 | 打开 |