06. 여러 양식 리포트
여러개의 양식과 데이터가 복합된 하나의 리포트를 만들기 위해 ReportCompositeViewer를 사용합니다.
생성
여러개의 양식을 출력하기 위해 RealReport의 ReportCompositeViewer를 생성합니다. ReaportViewer와 마찬가지로 생성 인자에 컨테이너 div tag에 지정한 id를 넘겨주고 두 번째 인자로 양식과 데이터를 각각 form과 dataSet이란 이름의 키로 정의한 ReportFormSet객체를 배열로 넘겨 줍니다.
...
var formSets = [
{
form: {
...
},
dataSet: {
...
}
},
{
form: {
...
},
dataSet: {
...
}
}
]
viewer = new RealReport.ReportCompositeViewer('reportContainer', formSets);
viewer.zoom = 0.5;
viewer.preview();
...두 개의 리포트 양식이 적용된 formSet 의 예는 아래와 같습니다.
var formSets = [{
form: {
page: {
pageHeader: {
items: [{
type: 'text',
text: '리포트 제목',
height: '100px',
width: '100%',
styles: {
fontSize: '25px',
fontWeight: 'bold',
backgroundColor: '#ccc'
}
}],
},
body: {
items: [{
type: 'text',
text: 'RealReport는 Javascript를 이용해 간단하게 리포트를 출력 할 수 있습니다.',
height: '100px',
styles: {
fontSize: '13px',
}
}, {
type: 'text',
data: 'myData',
value: 'company',
styles: {
color: 'blue'
}
}, {
type: 'text',
data: 'myData',
value: 'age',
styles: {
fontWeight: 'bold'
}
}],
},
},
},
dataSet: {
myData: {
values: {
company: '우리테크',
age: 10,
}
}
}
},
{
form: {
report: {
name: 'reportRoot',
paperOrientation: 'landscape',
},
page: {
name: 'reportPage',
reportHeader: {
name: 'reportHeader',
items: [
{
type: 'text',
text: 'Report Header',
styles: {
fontSize: '30px',
fontWeight: 'bold',
}
}
]
},
body: {
itemGap: 4,
items: [
{
type: 'text',
text: '가로방향 리포트'
}
]
}
},
},
}]복합 양식 프린트 하기
가로방향 양식과 세로방향의 양식이 섞여있는 복합 양식을 프린트하기 위해서는 landscape 양식을 회전시켜줄 필요가 있습니다. 브라우저에서의 프린트는 프린트 대화상자에서 지정된 레이아웃 방향으로 인쇄가 되기 때문에 특정 페이지만 다른 방향으로 프린트할 수 없기 때문에 동일한 방향으로 페이지 방향을 변경해 주어야 합니다. 아래 예제 코드는 리포트 양식의 가로와 세로 길이를 비교해서 가로방향 양식일 경우 90도 회전을 시켜 세로방향으로 만들어주는 css를 프린트 전에 적용시켜주는 코드입니다.
function print() {
var printWindow = window.open('./popup.html', 'printWindow', 'width=800px,height=1024px');
if (printWindow) {
printWindow.addEventListener('DOMContentLoaded', function () {
var container = printWindow.document.getElementById('realreport');
container.innerHTML = viewer.getHtml();
var pages = printWindow.document.getElementsByClassName('rr-print-page');
var landscapePages = [];
for (let i = 0; i < pages.length; i++) {
var w = Number(printWindow.getComputedStyle(pages[i]).getPropertyValue('width').replace('px', ''));
var h = Number(printWindow.getComputedStyle(pages[i]).getPropertyValue('height').replace('px', ''));
if (w > h) {
landscapePages.push(pages[i]);
pages[i].style.transformOrigin = '0 100% 0';
pages[i].style.transform = `rotate(90deg) translate(-${h}px)`;
}
}
printWindow.print();
});
printWindow.document.body.addEventListener('onafterprint', function () {
printWindow.close();
});
}
}기타
여러 양식 리포트의 경우 페이지를 표시하기 위해 ${all-page}, ${all-pages} 또는 %{all-page}, %{all-pages}를 사용할 수 있습니다. 자세한 내용은 context data를 참조하세요.
portrait(세로방향) 양식과 landscape(가로방향) 양식을 ReportCompositeViewer를 통해 동시에 print를 할 경우 landscape 양식을 회전시켜 portrait 양식과 동일한 방향으로 맞춰 주신 후 세로방향으로 프린트를 진행해야 지만 의도한 대로 print가 진행됩니다. landscape 양식을 회전 시키지 않고 양식 전체를 세로 방향으로 출력 시 landscape 양식이 일부 잘릴 수 있습니다.
ReportCompositeViewer는 ReportViewer와 거의 동일한 기능을 갖습니다. 하지만, 내보내기 기능은 아직 구현 되지 않았지만, 빠른시일 내에 구현될 예정입니다.
ReportCompositeViewer에 대한 전체 예제 코드는 example 사이트 index06.html (opens in a new tab) 파일로 확인하세요.