ActiveReportsJS 보고서 뷰어 JavaScript 컴포넌트 시작하기

JavaScript 응용 프로그램 만들기

이러한 응용 프로그램은 HTML 마크업, CSS 스타일, JavaScript 코드로 구성됩니다. 자주 사용하는 텍스트 편집기에서 index.html 파일을 만들고 다음 코드를 해당 파일에 삽입할 수 있습니다.

<!DOCTYPE html>

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

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

  <body></body>
</html>

ActivereportsJS 설치

CDN 및 NPM을 통해 ActiveReportJS 스크립트와 스타일을 배포합니다. JavaScript 응용 프로그램용 ActiveReportsJS 보고서 뷰어를 가장 쉽게 설치하는 방법은 CDN 기반 참조를 HTML 페이지의 head 태그에 추가하는 것입니다. 필요한 스크립트 및 스타일에 대한 자세한 내용은 설치를 참조하십시오.

<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-viewer.css"
  type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-xlsx.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-html.js"></script>

보고서 뷰어 호스트 요소 추가

보고서 뷰어를 호스트할 div 요소를 body 태그에 추가합니다.

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

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

<style>
  #viewer-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"
      }
    ]
  }
}

보고서 뷰어 컴포넌트 초기화

viewer-host 요소 바로 뒤의 body 태그에 다음 스크립트를 추가하여 요소가 렌더링된 후 이 스크립트가 실행되도록 합니다. 이 코드는 보고서 뷰어 컴포넌트의 인스턴스를 초기화하고 이전 단계에서 추가한 보고서 템플릿을 엽니다.

<script>
  var viewer = new ActiveReports.Viewer("#viewer-host");
  viewer.open("report.rdlx-json");
</script>

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

어떤 정적 웹 서버를 사용해도 응용 프로그램을 실행할 수 있습니다. 예를 들어, http-server 패키지가 전역으로 설치된 경우 응용 프로그램의 루트 폴더에서 http-server 명령을 실행할 수 있습니다. localhost(또는 127.0.0.1)에서 실행되는 앱을 열어야 합니다. 응용 프로그램이 시작되면 ActiveReportsJS 뷰어 컴포넌트가 페이지에 나타납니다. 뷰어에는 "안녕하세요, ActiveReportsJS 뷰어입니다"라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.