ActiveReportsJS는 다양한 프론트엔드 프레임워크 및 라이브러리에서 사용할 수 있는 클라이언트 측 보고 솔루션입니다. Vanilla JavaScript부터 NuxtJS까지 ARJS는 응용 프로그램을 설계하고 그 컴포넌트를 사용할 때 매우 유연합니다. 이 문서에서는 다음의 단계들을 수행하여 Visual Studio Code를 통해 React 응용 프로그램에서 뷰어 컴포넌트를 간단하게 추가 및 사용자 정의하는 방법에 대해 설명합니다.

1. 종속성 설치
2. 스타일 가져오기
3. 보고서 파일 만들기
4. 앱에 뷰어 컴포넌트 통합
5. 응용 프로그램 실행

종속성 설치

React 앱을 이미 만든 경우 다음 명령을 사용하여 Visual Studio Code에서 터미널을 통해 앱에서 @grapecity/activereports-react 패키지 설치부터 시작해 보겠습니다.

npm install @grapecity/activereports-react

React 앱을 아직 만들지 않은 경우 다음 명령을 사용하여 먼저 만들어 보세요.

npm init react-app arjs-viewer-app

스타일 가져오기

프로젝트에 종속성이 설치되면 뷰어 컴포넌트가 보기 좋게 표시되도록 App.css 파일에 스타일을 추가할 수 있습니다. 또한 뷰어를 호스팅할 #viewer-div 요소에 스타일을 지정합니다.

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css"; 

#viewer-host {
  width: 100%;
  height: 100vh;
}

보고서 파일 만들기

다음 단계를 위해 응용 프로그램에 ARJS 보고서 파일을 추가하려고 합니다. 지금, 코드를 통해 하나 만들거나 디자이너에서 만든 보고서를 프로젝트 폴더로 끌어 추가해 보겠습니다. 둘 중 한 가지 방법을 사용하여 앱 내에서 /public 디렉터리에 보고서 파일을 저장해 보겠습니다.

보고서에서는 .rdlx-json 확장명을 사용하기 때문에 JSON 구문을 사용하여 보고서 내에 표시할 속성 및 컨트롤을 포맷할 수 있습니다. 예를 들어, 솔루션 탐색기에서 공용 폴더를 마우스 오른쪽 버튼으로 클릭한 다음 '새 파일'을 선택하여 새 파일을 만들 수 있습니다. 이 파일의 이름을 'report-test.rdlx-json'이라고 지정해 보겠습니다. 이 파일 내에서 다음 코드를 추가합니다.

{
  "Name": "report-test",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Testing the textbox!",
        "Style": {
          "FontSize": "20pt"
        },
        "Width": "8.5in",
        "Height": "1.5in"
      }
    ]
  }
}

GrapeCity의 API를 통해 보고서를 만드는 자세한 방법과 런타임 시 보고서에 추가할 수 있는 항목을 알아보려면 여기에서 설명서를 꼼꼼하게 살펴보세요.

앱에 뷰어 컴포넌트 통합

이제 App.js 파일에서 다음 코드를 추가하여 페이지에 표시할 뷰어 컴포넌트를 가져와 보겠습니다. 또한 방금 만든 보고서를 뷰어 컴포넌트에 연결합니다.

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;

응용 프로그램 실행

경우에 따라 프로젝트 디버깅 중 'npm start' 사용을 차단하는 오류가 발생할 수 있습니다. 이 문제를 해결하기 위해 package.json 파일의 시작 스크립트를 다음과 같이 변경합니다.

"start": "react-scripts --max_old_space_size=8192 start"

터미널에서 'npm start' 명령을 사용하여 이 프로젝트를 실행합니다. 아무 문제 없이 실행되면 페이지에 뷰어 컴포넌트가 보이고 이 페이지 내에 보고서가 포함되어 있을 것입니다. 다른 문제 또는 오류가 발생한다면, Q&A 게시판을 통해 문의 주시기 바랍니다.

테마 편집기

보고서 뷰어의 색상, 글꼴 및 테마를 사용자 정의하려는 경우 GrapeCity 웹 사이트에서 찾을 수 있는 테마 편집기를 사용하여 사용자 정의할 수 있습니다. 사용하려는 설정을 선택하고 페이지에서 뷰어 컴포넌트를 미리 봅니다. 원하는 테마를 찾은 다음 페이지 맨 아래에 있는 버튼에서 CSS 스타일을 다운로드합니다. 그런 다음 다운로드한 파일을 응용 프로그램 내 스타일 폴더(node_modules/@grapecity/activereports/styles)로 이동하여 기본 뷰어 테마를 덮어 씁니다. 대신 미리 만들어 둔 테마를 사용하려는 경우에는 여기에서 다양한 테마 모음을 살펴볼 수 있습니다.

요점

이 연습의 단계를 수행한 후에는 ARJS react 응용 프로그램에 뷰어 컴포넌트를 추가하는 방법을 알아야 합니다. ARJS에서 제공하는 다양한 API, 사용자 정의 기법 및 언어 번역 옵션을 감안하면 뷰어는 보고 필요에 매우 유용합니다. 보다 복잡한 사용 사례에 대해 궁금한 점이 있다면 개발자 문서를 읽어보세요.

지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요! 

• ActiveReportsJS 공식 홈페이지
• ActiveReportsJS 튜토리얼 및 샘플
• ActiveReportsJS Q&A
• ActiveReportsJS FAQ