문서
리포트 아이템
HTML

HTML

데이터의 여러 필드를 연결해서 표현할 수 있는 아이템입니다. (지정된 HTML Tag 사용 가능)

ℹ️

정보 HTML 데이터를 리포트에 표현하고 싶은 경우에는 Html View 아이템을 사용합니다.

Basic

이름타입설명필수여부
Namestring아이템에 고유한 이름을 설정합니다.no
Tagstring아이템에 태그값을 설정합니다.no
Visibleboolean아이템의 표시 여부를 설정합니다.yes
Page BreakPageBreakMode아이템을 출력하기 전에 페이지를 어떻게 나눌 것인지 대해 설정합니다.no

Design

이름타입설명필수여부
Design Borderboolean아이템의 디자인 가능한 경계 영역의 표시를 설정합니다.yes

Event

이름타입설명필수여부
OnGetStylesReportItemStyleCallback아이템에 적용되는 스타일을 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.no
OnGetVisibleReportItemVisibleCallback아이템의 표시 여부를 변경할 수 있는 이벤트 함수 관련 로직을 설정합니다.no

Bound

이름타입설명필수여부
Widthnumber아이템의 넓이를 설정합니다.no
Heightnumber아이템의 높이를 설정합니다.no
Rotationnumber아이템의 회전 각도를 설정합니다.no
Leftnumber아이템의 위치를 부모 요소 기준으로 "왼쪽"에서 설정합니다.no
Rightnumber아이템의 위치를 부모 요소 기준으로 "오른쪽"에서 설정합니다.no
Topnumber아이템의 위치를 부모 요소 기준으로 "위"에서 설정합니다.no
Bottomnumber아이템의 위치를 부모 요소 기준으로 "아래"에서 설정합니다.no

Data

이름타입설명필수여부
Datastring아이템에 리포트에 존재하는 데이터를 연결합니다.no
Valuestring아이템에 연결된 데이터에서 표시할 필드를 설정합니다.no

Text

Html 아이템에서 사용되는 속성

이름타입설명필수여부
HtmlstringHtml Tag 문자열no

Html

Html Tag를 포함한 문자열로 여러 데이터 필드의 값을 입력할 수 있습니다. 데이터 표현을 위한 형식은 ${}로 괄호 사이에 데이터 필드 이름을 입력하면 입력된 데이터가 표시됩니다. 데이터를 표현하기 위해 Data 속성에 데이터 테이블이 연결되어야 합니다.

🔥
  • 필드 이름은 대/소문자를 구별하여 입력해야 합니다.
  • em, b, br, img, i, span, strong 태그 사용이 가능합니다. 해당 태그 이외의 태그 사용시 PDF, 이미지 등 내보내기시 출력이 되지 않으니 주의하세요.
  • 다중 중접된 tag를 사용하면 출력에 오류가 있습니다.
  • 여러 필드의 데이터 값을 하나의 아이템에 표현하기 위한 용도로 사용하시면 유용합니다.
  • 타입: string
  • 기본값: undefined
사용예
<span>회사명: ${CompanyName}<br>팩스: ${CompanyFax}</span>

Styles

이름타입설명필수여부
Font Familystring아이템의 글꼴을 설정합니다.no
Font Sizenumber아이템의 텍스트 크기를 설정합니다.no
Font Stylestring아이템의 글꼴체를 설정합니다.no
Text Decorationstring아이템의 텍스트에 선 스타일을 설정합니다.no
Font Weightstring아이템의 텍스트 굵기를 설정합니다.no
Colorstring아이템의 텍스트 색상을 설정합니다.no
Background Colorstring아이템의 배경 색상을 설정합니다.no
Text Alignstring아이템의 텍스트 가로 정렬을 설정합니다.no
Vertical Alignstring아이템의 세로 정렬을 설정합니다.no
Writing Modestring아이템의 텍스트가 배치되는 방향을 설정합니다.no
Padding Leftstring아이템의 왼쪽 내부 여백을 설정합니다.no
Padding Topstring아이템의 위쪽 내부 여백을 설정합니다.no
Padding Rightstring아이템의 오른쪽 내부 여백을 설정합니다.no
Padding Bottomstring아이템의 아래쪽 내부 여백을 설정합니다.no
Borderstring아이템의 테두리를 설정합니다.no
Border Leftstring아이템의 왼쪽 테두리를 설정합니다.no
Border Rightstring아이템의 오른쪽 테두리를 설정합니다.no
Border Topstring아이템의 위쪽 테두리를 설정합니다.no
Border Bottomstring아이템의 아래쪽 테두리를 설정합니다.no