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();
});이 코드를 웹 애플리케이션으로 실행해 보면 아래 브라우저 화면과 같습니다.
이 웹 페이지의 전체 코드는 아래와 같습니다.
<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,
});