문서
리포트 뷰어
05. 인쇄하기

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) 코드 저장소에서 확인하실 수 있습니다.