JavaScript 리포트 뷰어 가져오기 > 온라인 스터디

본문 바로가기

ActiveReportsJS

온라인 스터디

PureJS JavaScript 리포트 뷰어 가져오기

페이지 정보

작성자 GrapeCity 작성일 21-03-25 10:22 조회 53회 댓글 0건

본문

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 {
       margin: 0 auto;
       width: 100%;
       height: 100vh;
    }
    </style>



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


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

{
     "Type": "report",
     "Body": {
       "Name": "Body",
       "Type": "section",
       "ReportItems": [
        {
           "Type": "textbox",
           "Name": "textbox1",
           "Style": { "FontSize": "18pt" },
           "Value": "Hello, ActiveReportsJS Viewer",
           "Height": "10in"
        }
      ]
    },
     "Name": "Report"
    }


JavaScript 보고서 뷰어 구성 요소 초기화


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 뷰어입니다”라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.


관련 링크

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.