05. 인쇄 하기
인쇄
RealReport로 디자인된 양식에 데이터를 연결하고 웹 페이지에 출력된 미리보기까지가 RealReport의 주된 역할입니다.
실제 프린터로 출력을 하기 위해서 viewer.print() 함수를 이용합니다.
viewer.print();미리보기가 되어있는 리포트를 그대로 인쇄합니다.
미리보기가 되어있지 않은 경우 ReportViewer 객체에 설정되어있는 reportForm, dataSet 정보로 인쇄합니다.
인쇄 예제코드
인쇄를 위한 전체 코드는 아래와 같습니다.
index.html
<html>
<head>
<meta charset='utf-8' />
<link rel="shortcut icon" href="#">
<link href='js/highcharts/highcharts.css' rel='stylesheet' />
<script src="js/highcharts/highcharts.js"></script>
<script src="js/highcharts/highcharts-more.js"></script>
<script src="js/pdfkit.js"></script>
<link href='js/realreport/realreport.css' rel='stylesheet' />
<script src='js/realreport/realreport-lic.js'></script>
<script src='js/realreport/realreport.js'></script>
<style>
#reportContainer {
height: 90vh;
}
.toolbar-container {
background-color: white;
position: sticky;
top: 0;
height: 24px;
width: 100%;
margin-bottom: 40px;
padding: 5px 0;
z-index: 2;
}
.toolbar {
background-color: silver;
border-radius: 5px;
padding: 10px;
}
.toolbar a {
margin: 0 5px;
}
</style>
</head>
<body>
<div class="toolbar-container">
<div class="toolbar">
<a href="javascript:viewer.zoomIn();">zoomIn</a>
<a href="javascript:viewer.zoomOut();">zoomOut</a>
<a href="javascript:viewer.fitToHeight();">fitToHeight</a>
<a href="javascript:viewer.fitToPage();">fitToPage</a>
<a href="javascript:viewer.fitToWidth();">fitToWidth</a>
<a href="javascript:viewer.print();">print</a>
</div>
</div>
<div id="reportContainer"></div>
<script>
var viewer;
document.addEventListener('DOMContentLoaded', function () {
viewer = new RealReport.ReportViewer('reportContainer', {
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'
}
}],
},
},
}, {
myData: {
values: {
company: '우리테크',
age: 10,
}
}
});
viewer.preview();
});
</script>
</body>
</html>💡
리얼리포트 예제 코드는 RealReport Example (opens in a new tab) 코드 저장소에서 확인하실 수 있습니다.