순수 JavaScript 응용 프로그램에서 ActiveReportsJS 보고서 디자이너 컴포넌트 사용

순수 JavaScript 응용 프로그램 만들기

이러한 응용 프로그램은 HTML 페이지 및 JS 스크립트로 구성됩니다. 다음은 코드 예시입니다.

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>ARJS Report designer</title>
    <meta name="description" content="ARJS Report designer" />
    <meta name="author" content="GrapeCity" />
  </head>

  <body></body>
</html>

ActivereportsJS 설치

CDN 및 NPM을 통해 ActiveReportJS 스크립트와 스타일을 배포합니다. 순수 JavaScript 응용 프로그램에 ActiveReportsJS 보고서 뷰어를 가장 쉽게 설치하는 방법은 CDN 기반 참조를 head 태그에 추가하는 것입니다.

<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.1.0/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.1.0/styles/ar-js-designer.css"
  type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/3.1.0/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.1.0/dist/ar-js-designer.js"></script>

보고서 디자이너 호스트 요소 추가

보고서 디자이너를 호스트할 div 요소를 body 태그에 추가합니다.

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

designer-host 요소의 스타일을 head 태그에 추가합니다.

<style>
  #designer-host {
    width: 100%;
    height: 100vh;
  }
</style>

ActiveReportsJS 보고서를 응용 프로그램에 추가

ActiveReportsJS는 보고서 템플릿 파일에 JSON 형식 및 rdlx-json 확장자를 사용합니다. 응용 프로그램의 루트 폴더에서 report.rdlx-json이라는 새 파일을 만들고 다음 JSON 콘텐츠를 해당 파일에 삽입합니다.

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

보고서 디자이너 컴포넌트 초기화

designer-host 요소 바로 뒤의 body 태그에 다음 스크립트를 추가하여 요소가 렌더링된 후 이 스크립트가 실행되도록 합니다.

<script>
  var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
  designer.setReport({id: "report.rdlx", displayName: "my report"});
</script>

응용 프로그램 실행 및 테스트

브라우저에서 HTML 페이지 열기를 사용하여 응용 프로그램을 실행합니다. ActiveReportsJS 디자이너 컴포넌트가 페이지에 나타나고 보고서 디자인을 표시합니다. 보고서 항목을 추가하고 해당 속성을 설정하며 데이터 소스를 생성하는 등의 방법으로 기본 기능을 테스트합니다. 보고서 디자이너 컴포넌트를 사용하는 방법에 대한 자세한 내용은 개발자 가이드 및 온라인 데모를 참조하십시오.