TsgcHTMLComponent_ReportViewer は、Web ページにレポートを表示します。パラメーターパネル、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;
// 明細バンド: 1 行につき 1 行
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;
// ビューアなしの同じレポート: 第 3 四半期の PDF
var values = new List<string> { "Period=2026-07-01;2026-09-30" };
report.SaveToFile("q3.pdf", values);値を選び、レポートを確認してから、ダウンロード、印刷、またはそのデータを Excel で開きます。
レポートのすべてのパラメーターが、ラベル付きのフィールドになります。テキスト、数値、日付、開始と終了を持つ日付範囲、Options のセレクト、チェックボックスです。Required のパラメーターにはアスタリスクが付き、適用の前にブラウザーで、そしてサーバーでも再度チェックされます。リセットは、すべてのフィールドを既定値に戻します。
プレビューは、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 はグループを 1 ページに収め、NewPageBefore と NewPageAfter は改ページし、NewPageAfter を持つレポートヘッダーは表紙になります。
バンドには、テキスト、画像、線、四角形、グラフ、リッチテキスト、バーコード、QR コード、サブレポートを置けます。テキストはボックスに合わせて切り取られ、AutoHeight を持つアイテムは、折り返したテキストに合わせてバンドを広げます。
テキストには [ ] で囲んだ式を入れられます。[Amount:#,##0.00] のようなマスク付きのフィールド、[Sum(Field)]、[Count]、[Avg(Field)]、[Min(Field)]、[Max(Field)]、[RunningSum(Field)]、[Page] と [Pages]、[Param.Name]、[GroupValue] です。バンドとアイテムは、Amount > 1000 のような PrintIf 条件が true の場合にのみ印刷されます。
行は DataSet、Grid、RowsJSON の JSON 配列、または OnGetRow イベントから取得されます。LoadFromGrid は TsgcHTMLComponent_Grid の列から表形式のレポートを作成し、すべてのページにキャプション、ゼブラ行、数値列の合計、ページ番号が付きます。
グラフアイテムは、バンドの行をベクターグラフィックスとして描画します。棒、横棒、積み上げ棒、折れ線、面、円、ドーナツで、グループバンドではグループごとに 1 つのグラフです。ChartSource は、Web ページに表示されるとおりに TsgcHTMLComponent_Chart を印刷します。バーコードアイテムは Code 128 を描画し、QR コードアイテムは誤り訂正レベル 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 は、それぞれ行とレイアウトの独自のコピーを作成します。1 つのレポートが、独自のロックなしで、Web サーバーの複数のリクエストに同時に対応でき、それぞれが独自のパラメーターでフィルターされます。
ビューアの最もよく使うメンバーです。
Report は表示する TsgcHTMLReport です。1 つのビューアがすべてのユーザーに対応します。たとえばテナントごとやロールごとに、ユーザーごとに異なるレポートを表示するには、OnGetReport(Sender, aParams, aReport) でレポートを返します。これはリクエストのスレッドで発生し、そこでは sgcHTMLRequestSession がセッションを返します。
OnBeforeGenerate(Sender, aParams, aAccept, aErrorMessage) は、ビューアのレンダリング時、適用のたび、リンクの GET のたびに生成を許可または拒否するため、コピーしたリンクも拒否されます。権限や、最大 1 年の期間のようなパラメーター間のルールに使用してください。
すべてのファイルリンクには、コンポーネント、形式、パラメーター値、セッション、有効期限にわたる 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 のサーバーに 3 つのレポートがあります。地域ごとの棒グラフと各地域のシェアのドーナツグラフを備えた地域別売上、ロゴ、支払い用の QR コード、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 ライセンス。 | 開く |