04. 미리보기 확대/축소
미리보기 화면의 크기
미리보기 화면의 크기를 지정하기 위해 zoom 속성을 설정할 수 있습니다.
viewer.zoom = 1.5;위 코드는 현재 미리보기 컨테이너의 페이지를 1.5배로 확대하는 예제 코드 입니다.
아래 코드와 같이 preview() 함수를 실행한 다음 바로 zoom 속성을 지정하거나 zoomIn(), zoomOut() 과 같은 미리보기 페이지 변경 함수를 실행할 경우 즉시 반영이 안될수 있습니다. 이는 브라우저에서 preview() 함수를 통해 미리보기 컨테이너에 리포트가 완전히 드로잉되는 시점과 그 페이지를 다시 드로잉하는 함수를 실행하는 시점의 차이가 발생하기 때문입니다.
이 처럼 미리보기와 동시에 페이지의 크기를 조절할 필요가 있는 경우
ReportViewer 생성자의 4번째 인자인 options 에 { zoom: 1.5 } 와 같이 zoom 의 배율값을 지정해 주면 됩니다.
viewer.preview();
viewer.zoom = 1.5;ReportViewer에는 확대/축소를 위한 보조함수도 준비되어 있습니다.
등 페이지 확대/축소 함수를 사용하는 방법을 알아보겠습니다.
확대
미리보기 페이지를 확대하기위해 zoomIn() 함수를 사용할 수 있습니다.
viewer.zoomIn(0.5);위 코드는 미리보기 화면을 현재보다 50% 확대하는 예제코드 입니다.
축소
미리보기 페이지를 축소하기위해 zoomOut() 함수를 사용할 수 있습니다.
viewer.zoomOut(0.5);위 코드는 미리보기 화면을 현재보다 50% 축소하는 예제코드 입니다.
컨테이너에 맞춤
ReportViewer에는 미리보기 페이지 크기를 컨테이너의 크기에 맞추기 위해 아래와 같은 함수들이 준비되어 있습니다.
컨테이너 높이에 맞춤
미리보기 페이지 크기를 컨테이너의 높이에 맞게 조정하려면 fitToHeight() 함수를 사용합니다.
viewer.fitToHeight();컨테이너 페이지에 맞춤
미리보기 페이지 크기를 컨테이너의 크기에 맞게 조정하려면 fitToPage() 함수를 사용합니다.
viewer.fitToPage();컨테이너 너비에 맞춤
미리보기 페이지 크기를 컨테이너의 너비에 맞게 조정하려면 fitToWidth() 함수를 사용합니다.
viewer.fitToWidth();예제코드
변수 변경
이벤트 외부에서 viewer 를 호출하기 위해 변수의 범위를 조정했습니다.
...
<script>
var viewer;
document.addEventListener('DOMContentLoaded', function () {
viewer = new RealReport.ReportViewer('reportContainer', {
page: {
pageHeader: {
...
}
...
}
}
...
});
</script>
...툴바
확대/축소의 동작을 수행하기 위해 각각의 동작을 수행하는 버튼을 포함한 툴바를 간단하게 만들었습니다. 이 코드는 ReportViewer의 동작을 수행하기 위한 권장코드는 아니며 동작의 실행을 확인하기 위한 용도로만 참고하세요.
...
<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>
...
<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>
</div>
</div>
<div id="reportContainer"></div>
...전체코드
툴바에 의해 확대/축소가 동작하는 전체 예제 코드는 아래와 같습니다.
<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>
</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'
}
}],
},
},
});
viewer.dataSet = {
myData: {
values: {
company: '우리테크',
age: 10,
}
}
};
viewer.preview();
});
</script>
</body>
</html>실행 화면
가이드에 사용된 전체 코드는 RealReport Example 코드 저장소에 있습니다. 아래 링크를 클릭하면 코드를 확인할 수 있습니다. https://github.com/realgrid/realreport-examples/tree/main/report-guide (opens in a new tab)