리얼리포트 웹 디자이너

리얼리포트 웹 디자이너는 브라우저와 웹 프론트엔드 환경에 통합해서 사용할 수 있는 Javascript 컴포넌트 라이브러리 입니다.

웹 디자이너에서는 보고서 양식을 편집하기 위한 다양한 기능과 출력, 내보내기 등의 기능을 제공합니다.

웹 디자이너는 데스크탑 디자이너와 동일한 기능을 가지고 있습니다.

웹 디자이너 설치

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

JavaScript로 설치하기

다운로드

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

realreport-pro-latest.zip

    designer
        ⎸⎯ README.md
        ⎸⎯ realreport-designer.d.ts
        ⎸⎯ realreport-designer.es.js
        ⎸⎯ realreport-designer.js
    styles
        ⎸⎯ realreport-designer.css
    export
        ⎸⎯ pdf
            ⎸⎯ pdfkit.js
    LICENSE.md
    README.md
    viewer
        ⎸⎯ README.md
        ⎸⎯ realreport.css
        ⎸⎯ realreport.d.ts
        ⎸⎯ realreport.es.js
        ⎸⎯ realreport.js

디렉토리 설명

📁 designer: 리얼리포트 웹 디자이너 라이브러리를 포함하고 있습니다.
📁 styles: 리얼리포트 웹 디자이너 스타일을 포함하고 있습니다.
📁 export: PDF 내보내기를 위한 라이브러리를 포함하고 있습니다.
📁 viewer: 리얼리포트 뷰어 라이브러리를 포함하고 있습니다.

RealReport Pro 제품은 리얼리포트 뷰어의 상위 제품입니다.

따라서, RealReport Pro의 라이센스로 리얼리포트 뷰어 제품을 같이 사용할 수 있습니다.

💡

사용자 프로젝트 디렉토리에 realreport-pro-latest.zip 압축파일을 압축해제 후 파일들을 복사했다고 가정하고 설치에 대한 설명을 진행하겠습니다.

<script> 태그 설정

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

  <script src="designer/realreport-designer.js"></script>

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

index.html

<html>
    <head>
        <link rel="stylesheet" href="js/designer/styles/realreport-designer.css">
        <script src="js/designer/realreport-designer.js"></script>
    </head>
</html>

라이선스 파일

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

index.html

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

PDF 내보내기 기능의 사용

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

index.html

<html>
    <head>
        <!-- PDF 라이브러리 포함하기 -->
        <script src="export/pdf/pdfkit.js"></script>
 
        <link href='js/realreport/realreport.css' rel='stylesheet' />
        <script src='js/realreport/realreport-lic.js'></script>
        <script src='js/realreport/realreport-designer.js'></script>
    </head>
</html>

NPM으로 설치하기

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

npm install realreport-designer --save

단축키 02. 사용하기