웹 디자이너 사용하기

컨테이너

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

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

<div id="designer"></div>

script 및 스타일 설정

설치 페이지의 설명과 같이 아래처럼 설정해 줍니다.

    <link rel="stylesheet" href="js/designer/styles/realreport-designer.css">
 
    <script src="export/pdf/pdfkit.js"></script>
    <script src='js/realreport/realreport-lic.js'></script>
    <script src="js/designer/realreport-designer.js"></script>

ReportDesigner

ReportDesigner를 페이지에 출력하기 위해 <script> tag에 Javascript 코드를 작성합니다. RealReport의 ReportDesigner를 생성하면서 컨테이너 div tag에 지정한 id를 인자로 넘겨줍니다.

  const designerOptions = {
    showAssetPanel: true,
    showDataPanel: true,
    showScriptPanel: true,
  };
 
  // 디자이너 객체 생성
  const designer = new RealReport.ReportDesigner(
    "designer",
    designerOptions
  );

양식 로드

reportForm형식의 리포트 양식을 loadReport를 이용해 로드 합니다.

  designer.loadReport(reportForm);

실행 화면

위의 코드를 실행해보면 아래의 화면과 같습니다.

좌측 상단의 Preview 버튼을 눌러서 미리보기 화면을 볼 수 있습니다.

전체 코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RealReport Web Designer</title>
 
    <link rel="stylesheet" href="js/designer/styles/realreport-designer.css">
 
    <!-- PDF 라이브러리 포함하기 -->
    <script src="export/pdf/pdfkit.js"></script>
    <script src='js/realreport/realreport-lic.js'></script>
    <script src="js/designer/realreport-designer.js"></script>
 
    <!-- 리포트 양식 -->
    <script src="js/report/reportForm.js"></script>
 
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #designer {
        flex: 1;
        height: 100%;
        box-sizing: border-box;
        border: 1px dotted black;
      }
    </style>
  </head>
  <body>
    
    <div id="designer"></div>
 
    <script>
      const designerOptions = {
        showAssetPanel: true,
        showDataPanel: true,
        showScriptPanel: true,
      };
 
      // 디자이너 객체 생성
      const designer = new RealReport.ReportDesigner(
          "designer",
          designerOptions
      );
 
      // 웹 디자이너에서 사용할 커스텀 폰트와 PDF 내보내기용 폰트 지정
      designer.registerFonts([
          {
              name: 'NotoSans', // 폰트 이름
              source: 'assets/fonts/NotoSansKR-Regular.ttf', // 폰트 파일 경로
              fontWeight: 'normal', // 폰트 두께 설정 'normal' | 'bold'
          },
          {
              name: 'NotoSans',
              source: 'assets/fonts/NotoSansKR-Bold.ttf',
              fontWeight: 'bold',
          }
      ]);
 
      // 리포트 불러오기
      designer.loadReport(reportForm);
    </script>
  </body>
</html>

realreport-lic

var realReportLic = "발급받은 라이선스 키"

01. 설치하기 03. 설정