그리드 스타일 리포트 출력
그리드의 데이터와 레이아웃을 이용해 손쉽게 GridReportViewer (opens in a new tab)를 사용하여 출력용 리포트로 변환할 수 있습니다.
리얼리포트 (opens in a new tab)에 홈페이지에 추가 데모와 문서가 마련되어 있습니다.
그리드 리포트 출력은 화면에 보여지고 있는 값을 그대로 리포트로 출력합니다.
리포트 출력 시 그리드와 같이 리포트의 데이터 셀과 헤더영역에 스타일을 지정해서 출력할 수 있습니다.
리포트 뷰어 생성 시 그리드 객체를 사용해서 현재 보여지고 있는 컬럼과 데이터에 맞게 리포트로 출력할 수 있습니다.
var reportOptions ={
title: {
text: '투자 제품 목록',
top: '20px',
styles: {
fontFamily: 'Arial',
fontSize: '3em',
fontWeight: '700',
borderBottom: '2px solid blue',
},
},
subTitle: {
text: '2025년 제품 목록',
top: '70px',
styles: {
fontSize: '14px',
fontStyle: 'italic',
textDecoration: 'underline',
paddingTop: '30px',
paddingBottom: '30px',
},
},
pageHeader: {
items: [
{
value: '${page}',
top: '0',
right: '20px',
},
{
top: '0',
text: '/',
right: '10px',
},
{
value: '${pages}',
right: '0',
top: '0',
},
],
},
gridHeader: {
items: [
{
text: '상반기',
left: '0',
styles: {
fontSize: '14px',
},
},
{
text: new Date().toLocaleDateString('en-CA'),
right: '0px',
styles: {
color: 'blue',
},
},
],
},
pageFooter: {
items: [
{
value: '${page}',
align: 'center',
},
],
},
layout: {
autoWidth: false,
columns: [
// 리얼그리드 투자국가 컬럼을 리포트로 출력할 때 설정
{
name: 'KorCountry',
styles: {
backgroundColor: "#92c4f6"
},
header: {
styles:{
backgroundColor: "#fb8e27"
}
}
}
],
}
}
document.addEventListener('DOMContentLoaded', function () {
const viewer = new RealReport.GridReportViewer (
"realreport",
gridView,
reportOptions
);
viewer.preview()
})