문서
리포트 뷰어
02. 리포트 미리보기

02. 리포트 미리보기

컨테이너

RealReport를 웹 페이지에 프리뷰하려면 RealReport를 렌더링할 컨테이너가 필요합니다. 컨테이너를 이용해 RealReport를 생성하는 가장 손쉬운 방법은 <div> tag 로 작성하고 id 속성을 부여한 다음 해당 id를 ReportViewer를 생성할 때 넘겨주어야 합니다.

새로운 div tag를 추가하고 reportContainer로 id속성을 지정합니다.

<div id="reportContainer"></div>

ReportViewer

RealReport를 페이지에 출력하기 위해 <script> tag에 Javascript 코드를 작성합니다. RealReport의 ReportViewer를 생성하면서 컨테이너 div tag에 지정한 id를 인자로 넘겨줍니다. ReportViewer를 생성한 다음 preview() 함수를 실행하면 페이지에 Report가 출력 됩니다.

document.addEventListener('DOMContentLoaded', function () {
    const 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',
                        },
                    },
                ],
            },
        },
    });
 
    viewer.preview();
});

이 코드를 웹 애플리케이션으로 실행해 보면 아래 브라우저 화면과 같습니다.

alt

이 웹 페이지의 전체 코드는 아래와 같습니다.

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>
    </head>
    <body>
        <div id="reportContainer"></div>
 
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const 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',
                                    },
                                },
                            ],
                        },
                    },
                });
 
                viewer.preview();
            });
        </script>
    </body>
</html>
💡

가이드에 사용된 전체 코드는 RealReport Example 코드 저장소에 있습니다. 아래 링크를 클릭하면 코드를 확인할 수 있습니다. https://github.com/realgrid/realreport-examples/tree/main/report-guide (opens in a new tab)

비동기 출력

RealReport는 v1.4.0부터 비동기 출력을 지원합니다. 비동기 출력과 더불어 각 페이지를 출력할때, 또는 모든 페이지의 출력을 마쳤을때 각각 콜백함수를 제공합니다. 다량의 페이지를 출력시 페이지의 동작이 멈추거나 다른 작업을 수행하지 못하는 문제를 해결할 수 있습니다.

PreviewOptions

비동기 출력을 위해 preview()함수에 PreviewOptions를 인자로 넘겨 미리보기 할 수 있습니다.

async

  • 비동기 출력 여부를 결정하는 인자입니다.
  • 기본값은 false이고 true로 설정하면 비동기 방식으로 미리보기 합니다.

pageMark

  • 비동기 출력시 출력되는 페이지 정보 마커를 미리보기 화면에 표시할지 여부를 결정 합니다.
  • 기본값은 false이고 true로 설정하면 마커가 표시됩니다. 마커는 모든 출력이 끝난후 약 2초 후 자동으로 사라지게 됩니다.

noScroll

  • 비동기 출력시 출력되는 페이지에 맞게 자동으로 스크롤 할 지 여부를 결정합니다.
  • 기본값은 true이고 flase로 설정하면 자동으로 스크롤 됩니다.
비동기 출력 함수 호출 예
if (viewer) viewer.preview({ async: true, pageMark: false, noScroll: true });

paging

  • 페이지 구분 없이 출력하는 옵션입니다.
  • false로 설정하면 페이지 없이 출력합니다.

language

다국어 설정에서 어떤 언어로 미리보기를 진행할지 설정합니다.

한국어, 영어가 설정되어 있는 다국어 보고서 미리보기 예
// 다국어에서 추가된 언어 목록 가져오기 ['ko', 'en'];
console.log(viewer.languages);
 
// 한국어로 미리보기 진행
viewer.preview({ language: 'ko' });
 
// 영어로 미리보기 진행
viewer.preview({ language: 'en' });

singlePage

🔥

@deprecated - paging 옵션을 사용하세요.

  • 여러 페이지 문서에서 페이지 나눔 및 여백을 제거하여 단일 페이지로 출력하는 기능입니다.
  • 이 기능은 랜더링된 HTML 문서를 화면에서 확인하기 위한 용도로 활용할 수 있습니다.
  • 기본값은 false

singlePageOptions

🔥

@deprecated - paging 옵션을 사용하세요.

  • singlePage 기능이 활성화 되어 있을 경우, 지정할 수 있는 설정 값
  • SinglePageOptions 참고

callback

  • 비동기 출력시 페이지가 렌더링될때 호출되는 콜백함수 입니다.
  • 함수의 유형은 PrintPageCallback입니다.

endCallback

  • 비동기 출력시 모든 페이지가 랜더링된 후에 출력되는 콜백함수 입니다.
  • 함수의 유형은 PrintEndCallback입니다.
비동기 출력시 콜백 함수 사용예
const pageCallback = (ctx, page, pageNo) => {
    console.log(`(${pageNo}) 페이지 미리보기 완료`);
};
 
const endCallback = (ctx, pages) => {
    console.log(`모든 페이지(${pages.length} Pages) 미리보기 완료`);
};
 
if (viewer)
    viewer.preview({
        async: true,
        pageMark: false,
        noScroll: true,
        callback: pageCallback,
        endCallback,
    });