TsgcHTMLComponent_ReportDesigner: 브라우저에서 실행되는 보고서 디자이너입니다. TsgcHTMLReport의 정의, 즉 밴드, 항목, 매개변수, 글꼴, 페이지 설정을 편집하며, 보고서 엔진이 직접 그리는 PDF 미리 보기를 제공합니다. 개발자는 이것으로 애플리케이션의 보고서를 만들고, 최종 사용자는 데스크톱 도구 없이 보고서를 필요에 맞게 바꿉니다. Delphi, C++ Builder, .NET에서 사용할 수 있습니다.
TsgcHTMLReport에 연결하고 렌더링합니다. 모든 편집은 브라우저에서 이루어지며 사용자가 디자인하는 동안 요청은 없습니다. 저장은 정의를 서버로 전송하고, 서버는 이를 검증한 뒤 JSON으로 OnSave에 전달합니다. AutoApply를 사용하면 보고서가 즉시 바뀌므로, 같은 보고서의 Report Viewer가 새 디자인을 출력합니다.
TsgcHTMLComponent_ReportDesigner, 연결된 TsgcHTMLReport의 정의를 편집합니다
도구 모음, 도구 상자, 데이터 필드, 밴드가 있는 페이지, 인스펙터, 매개변수, PDF 미리 보기를 Bootstrap 5.3 CSS와 Bootstrap Icons CSS 위에 제공합니다
Delphi, C++ Builder, .NET
보고서는 마지막으로 저장한 디자인을 LoadFromJSON으로 로드합니다. 디자이너가 이를 편집하고, OnSave가 다음 서버 시작을 위해 정의를 보관하며, AutoApply를 사용하면 저장할 때마다 보고서가 즉시 바뀝니다.
uses
sgcHTML_Report, sgcHTML_Component_ReportDesigner;
// 보고서
oReport := TsgcHTMLReport.Create(Self);
oReport.Name := 'OrdersReport';
oReport.Title := 'Orders';
oReport.DataSet := qryOrders;
oReport.LoadFromJSON(LoadDefinition('orders')); // 마지막으로 저장한 디자인
// 디자이너
oDesigner := TsgcHTMLComponent_ReportDesigner.Create(Self);
oDesigner.Name := 'OrdersDesigner';
oDesigner.HTMXEngine := sgcHTMXEngine1;
oDesigner.Report := oReport;
oDesigner.OnSave := DesignerSave;
oTemplate.BodyContent := oDesigner.HTML;
procedure TForm1.DesignerSave(Sender: TObject; const aJSON: string;
var aAccept: Boolean; var aErrorMessage: string);
begin
// aJSON은 서버가 이미 임시 보고서에 로드한 정의입니다
StoreDefinition('orders', aJSON); // 데이터베이스 또는 파일
end;@* Views/Reports/Design.cshtml: OrdersReport는 오래 유지되는 TsgcHTMLReport입니다 *@
@model ReportsModel
<sgc-report-designer name="orders" report="@Model.OrdersReport"
auto-apply="false" css-height="760px" sub-reports="LinesReport"
on-get-report="Model.GetReport" on-save="Model.SaveReport" />using esegece.sgcWebSockets;
// 보고서
var report = new TsgcHTMLReport();
report.Name = "OrdersReport";
report.Title = "Orders";
report.LoadFromJSON(LoadDefinition("orders"));
// 사용자별 디자인이 있는 디자이너
var designer = new TsgcHTMLComponent_ReportDesigner();
designer.Name = "OrdersDesigner";
designer.HTMXEngine = engine;
designer.Report = report;
designer.AutoApply = false;
designer.OnSave += (object sender, string json, ref bool accept, ref string error) =>
accept = SaveUserReport(CurrentUserID(), json, ref error);
designer.OnGetReport += (object sender, ref TsgcHTMLReport? report) =>
report = GetUserReport(CurrentUserID()) ?? report;
template.BodyContent = designer.HTML;브라우저의 보고서 디자이너와, 보고서를 출력하는 것과 같은 엔진이 출력하는 미리 보기입니다.
새로 만들기, 사용자 컴퓨터의 .json 정의 열기, 저장, 실행 취소와 다시 실행, 확대/축소, 눈금에 맞추기, 용지 크기와 방향과 여백을 정하는 페이지 설정이 있습니다. 맞춤(왼쪽, 가운데, 오른쪽, 위쪽, 중간, 아래쪽, 같은 너비, 같은 높이, 같은 크기), 맨 앞으로 가져오기, 맨 뒤로 보내기, 복사, 붙여넣기, 복제, 삭제가 있고, 디자인과 미리 보기를 전환합니다.
도구 상자는 텍스트, 이미지, 선, 사각형, 차트, 서식 있는 텍스트, 바코드, QR 코드, 하위 보고서를 제공합니다. 클릭하면 선택한 밴드에 항목이 추가되고, 끌어서 놓으면 임의의 밴드의 해당 위치에 놓입니다. 데이터 필드는 데이터 소스의 필드를 나열하며, 클릭하거나 놓으면 그 필드에 바인딩된 텍스트 항목이 추가됩니다.
캔버스는 선택한 확대/축소 배율로 페이지와 밴드를 보여 주며, 각 밴드에는 캡션과 높이를 바꾸는 핸들이 있습니다. 밴드 목록은 보고서 머리글, 페이지 머리글, 그룹 머리글, 세부, 그룹 바닥글, 페이지 바닥글, 보고서 바닥글을 추가하고, 이동하고 삭제하며, 그룹 밴드의 그룹 필드를 설정합니다.
클릭하여 선택하고, Ctrl+클릭 또는 Shift+클릭으로 선택에 추가하거나, 캔버스의 빈 영역에서 끌어 영역을 그립니다. 끌면 선택이 이동하며 다른 밴드로도 옮길 수 있고, 여덟 개의 핸들로 크기를 조정하며, 끄는 중인 위치 아래의 밴드가 강조됩니다. 모든 변경은 실행 취소 한 단계입니다.
인스펙터는 선택 항목, 밴드 또는 보고서에 대해 보고서 엔진의 모든 게시된 속성을 편집하며, 필드 삽입, 집계, 보고서 값으로 식을 작성할 수 있습니다. 매개변수 탭에는 Report Viewer가 요청하는 항목이 있고, 보고서의 글꼴은 .ttf, .ttc 또는 .otf 파일을 정의에 포함할 수 있습니다.
미리 보기는 저장된 정의가 아니라 편집 중인 정의를, 보고서의 데이터와 이벤트를 공유하는 임시 보고서로 출력하므로, PDF는 보고서가 실제로 출력할 것과 같습니다. PreviewMode에 따라 내장 PDF 뷰어 또는 브라우저의 PDF 뷰어가 있는 iframe에 표시됩니다.
Tab 키는 캔버스의 항목 사이를 이동하고, 화살표 키는 선택을 눈금 한 칸씩 이동하며, Shift+화살표는 크기를 조정하고, Alt+위쪽 화살표와 Alt+아래쪽 화살표는 이전 또는 다음 밴드로 옮깁니다. Ctrl+C, Ctrl+V, Ctrl+D는 복사, 붙여넣기, 복제이고, Ctrl+Z와 Ctrl+Y는 실행 취소와 다시 실행이며, Ctrl+S는 디자이너 어디에서나 저장합니다.
디자인에 저장되지 않은 변경 내용이 있으면 디자이너는 저장되지 않은 변경 내용을 표시하고, 브라우저는 페이지를 떠나기 전에 확인합니다. 이름이 없는 매개변수나 글꼴은 전송하기 전에 선택되고 포커스를 받습니다. 디자이너는 페이지의 data-bs-theme="dark"와 dir="rtl"을 따르며, polite 라이브 리전이 메시지를 알립니다.
가장 자주 사용하는 멤버입니다.
Report는 디자인 중인 TsgcHTMLReport입니다. AutoApply(기본적으로 켜짐)를 사용하면 저장할 때 Lock 안에서 정의가 보고서에 로드되며 미리 보기는 보고서를 바꾸지 않습니다. ReadOnly는 디자인과 미리 보기를 보여 주고 사용자가 속성을 읽을 수 있게 하며, 서버에서도 저장을 거부합니다.
OnSave(Sender, aJSON, aAccept, aErrorMessage)는 서버가 LoadFromJSON으로 정의를 임시 보고서에 로드한 뒤 그 정의를 받으므로, 로드되지 않는 정의는 코드에 도달하지 않습니다. 데이터를 보관하는 곳에 저장하거나, aAccept를 False로 설정하고 aErrorMessage에 원하는 텍스트를 지정하십시오.
디자이너 하나가 모든 사용자를 처리합니다. AutoApply를 False로 설정하고, OnSave에서 사용자의 정의를 보관하며, 디자이너와 Report Viewer의 OnGetReport에서 사용자의 보고서를 반환하십시오. 이 이벤트는 요청의 스레드에서 발생하며 여기서 sgcHTMLRequestSession이 세션을 제공합니다.
OnGetFieldNames(Sender, aFields)는 데이터 소스의 필드를 받아 디자이너가 표시하는 목록을 바꿀 수 있습니다. SubReports와 Charts는 하위 보고서 항목과 차트 소스로 제공할 컴포넌트를 지정하며, 비어 있으면 보고서 Owner의 모든 컴포넌트가 대상입니다. FontNames는 글꼴 편집기의 글꼴 패밀리입니다.
MaxSize는 전송되는 정의의 크기(기본값 1 MB)를 제한하며 브라우저와 서버가 다시 한 번 검사하고, PreviewMaxSize는 미리 보기 PDF(8 MB)를 제한합니다. 서버는 요청 사이에 아무것도 보관하지 않습니다. 보고서를 디자인하는 사용자는 데이터 소스의 모든 필드를 출력할 수 있으므로, 사용자에게 보이면 안 되는 필드는 데이터 소스에서 직접 제거하십시오.
폼의 TsgcHTMLReport를 더블 클릭하거나 컨텍스트 메뉴에서 보고서 디자인...을 선택하면 폼의 데이터 필드, 하위 보고서, 차트와 함께 같은 디자이너가 IDE 창에서 열립니다. 저장할 때마다 폼의 보고서에 기록됩니다. Windows의 Delphi 10.4 이상과 WebView2 런타임이 필요하며, 브라우저에서 열기를 선택하면 같은 디자이너가 기본 브라우저에서 열립니다.
ActionURL이 있고 HTMXEngine이 없으면, 스크립트가 저장, 미리 보기, 필드 요청을 사용자의 URL로 전송하고 호스트가 이를 DispatchComponentEvent에 전달합니다. 페이지의 window.sgcReportDesigner는 getJSON, setJSON, isDirty, save, preview, undo, redo를 제공합니다.
Razor 뷰에서는 <sgc-report-designer> Tag Helper가 디자이너를 렌더링하며, 저장과 미리 보기는 UseSgcHtml의 컴포넌트 이벤트 엔드포인트로 전송됩니다. report는 오래 유지되는 TsgcHTMLReport를 받으며, Kestrel의 MaxRequestBodySize(기본값 30 MB)는 여전히 요청 크기를 제한합니다.
Demos\60.HTML\01.RunTime\32.ReportDesigner는 포트 8134에서 동작하는 서버 sgc Report Studio로, 브라우저에서 보고서 네 개를 디자인합니다. 중첩된 하위 보고서가 있는 주문, 두 페이지에 걸쳐 흐르는 서식 있는 텍스트의 고객 편지, 영어, 일본어, 중국어, 한국어, 아랍어 또는 러시아어로 된 청구서, 차트가 있는 판매 보고서입니다. 브라우저마다 자신의 디자인을 보관하며, 미리 보기 탭은 Report Viewer로 출력합니다. 디자인 타임, Lazarus, .NET 버전도 같은 구성입니다.
| 온라인으로 체험eSeGeCe 데모 서버에서 실시간으로 실행되는 리포트 디자이너 데모로 확인해 보세요. | 열기 | |
| 온라인 도움말이 컴포넌트의 전체 API 레퍼런스와 사용 가이드입니다. | 열기 | |
| Report Viewer 및 TsgcHTMLReport디자이너가 편집하는 보고서 엔진과, 이를 출력하는 뷰어입니다. | 열기 | |
| 모든 sgcHTML 컴포넌트80개 이상 컴포넌트의 전체 기능 매트릭스를 살펴보십시오. | 열기 | |
| 무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함되어 있습니다. | 열기 | |
| 가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스. | 열기 |