🎉 리얼리포트 1.8.8 버전이 출시되었습니다. 자세히 보기 →
문서
리포트 뷰어
01. 리얼리포트 설치

01. 리얼리포트 설치

리얼리포트 사용하려면 반드시 제품 라이선스가 필요합니다. 라이선스를 발급 받고 제품을 다운로드하는 더 자세한 방법은 라이선스 발급 페이지를 참조하세요.

JavaScript로 설치하기

다운로드

라이선스 발급 사이트를 통해 다운로드 받은 제품 패키지 파일의 압축을 풀면, 아래와 같이 리얼리포트 라이브러리 파일과 PDF 내보내기를 위한 라이브러리를 포함하고 있습니다.

realreport.latest.zip
  LICENSE.md
  pdffonts
  pdfkit.js
  README.md
  realreport
    ⎸⎯ realreport.css
    ⎸⎯ realreport.d.ts
    ⎸⎯ realreport.es.js
    ⎸⎯ realreport.js
  highcharts # 구 버전(1.8.0 버전 이하) 사용자를 위한 하이차트 라이브러리

디렉토리 설명

  • pdffonts 디렉토리: PDF 형식 파일 내보내기에 사용되는 PDF 폰트 샘플을 포함하고 있습니다.
  • pdfkit.js: PDF 내보내기를 위한 라이브러리 파일입니다.
  • realreport 디렉토리: 리얼리포트 라이브러리 및 이미지 파일을 포함하고 있습니다.
💡

사용자 프로젝트 디렉토리의 js 라는 이름의 디렉토리에 압축을 푼 파일들을 복사했다고 가정하고 설치에 대한 설명을 진행 하겠습니다.

<script> 태그 설정

HTML에서 리얼리포트를 사용하려면 <script> 태그를 이용해 리얼리포트의 JavaScript 버전을 포함해 주어야 합니다. realreport.js 파일은 다운받은 패키지에 포함되어 있습니다.

<script src='js/realreport/realreport.js'></script>

realreport.js 파일과 함께 들어 있는 style 파일인 realreport.css 도 head 부분에 포함해 줍니다.

index.html
<html>
    <head>
        <link href='js/realreport/realreport.css' rel='stylesheet' />
        <script src='js/realreport/realreport.js'></script>
    </head>
</html>

라이선스 파일

리얼리포트의 라이선스를 javascript 파일로 다운받은 경우 라이선스 파일을 realreport.js 파일보다 먼저 페이지에 포함해야 합니다. 보통 라이선스 발급 사이트에서 다운받은 라이선스 파일의 이름은 realreport-lic.js 입니다.

index.html
<html>
    <head>
        <!-- 리얼리포트 라이브러리 및 라이선스 파일 포함하기 -->
        <link href='js/realreport/realreport.css' rel='stylesheet' />
        <script src='js/realreport/realreport-lic.js'></script>
        <script src='js/realreport/realreport.js'></script>
    </head>
</html>

PDF 내보내기 기능의 사용

리얼리포트의 강력한 내보내기 기능 중 하나인 PDF 내보내기 기능을 사용하기 위해서는 아래와 같이 pdfkit 라이브러리 설치가 필요합니다. 기능의 사용유무를 특정할 수 없기 때문에 메인 파일에 라이브러리 파일을 포함하지 않고 있습니다.

index.html
<html>
    <head>
        <!-- PDF 라이브러리 포함하기 -->
        <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>
</html>

NPM으로 설치하기

리얼리포트는 모든 모듈을 포함하고 있는 npm 패키지로 설치할 수 있습니다.

npm install realreport --save

v1.8.0 이전 사용자를 위한 레거시 차트(Highcharts) 설치 방법

index.html
<html>
    <head>
        <!-- Highcharts 라이브러리 포함하기 -->
        <link href='js/highcharts/highcharts.css' rel='stylesheet' />
        <script src="js/highcharts/highcharts.js"></script>
        <script src="js/highcharts/highcharts-more.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>
</html>
💡

v1.8.0 이후부터는 기본 차트로 제공되는 리얼차트를 사용하시는 것을 권장합니다.

단축키02. 리포트 미리보기