ActiveReportsJS, React Reporting Component

프론트엔드 리포팅 솔루션 개발을 위한

전 세계 React 개발자들의 선택

React 기반 비즈니스 리포팅 컴포넌트 ActiveReportsJS를 사용해
여러분의 React 애플리케이션에서 리포트를 쉽고 빠르게 생성하고 배포해 보세요.

Why ActiveReportsJS

왜 React App에서 ActiveReportsJS를 선택해야 할까요?

강력한 데이터 바인딩

ActiveReportsJS는 REST API, OData, GraphQL 바인딩을 지원하여 쉽고 빠르게 JSON 형식 데이터에 연결이 가능합니다.

React 및 Next.js, Vite 지원

ActiveReportsJS는 React v16 이상과 Next.js v13 이상, Vite v2 이상을 지원합니다. 인기 있는 JavaScript 프레임워크에서 더욱 효율적으로 웹 리포트를 개발해보세요.

서버 종속성 없음

서버 측 종속성이 없는 NPM 패키지, CDN 호스팅 또는 앱 호스팅 JavaScript 코드를 사용하여 ActiveReportsJS 리포트 엔진을 프론트엔드 애플리케이션에 통합할 수 있습니다.

클라이언트 측 내보내기 및 인쇄

클라이언트 측에서 빠르게 WYSIWYG 리포트를 생성하여 PDF, HTML, Excel 형식으로 내보낼 수 있습니다. 이를 통해, 최종 사용자가 완벽한 JavaScript 리포트를 인쇄할 수 있습니다.

다양한 리포트 타입 지원

연속 페이지 레이아웃, 고정 페이지 레이아웃 등 사용자의 요구에 맞는 적합한 형식의 리포트를 작성할 수 있습니다.

대화형 JS 리포트 디자인

드릴다운, 드릴스루, 대화형 정렬, 북마크 기능을 사용하여 상호 작용과 최종 사용자를 위한 더욱 구체적인 정보를 제공할 수 있습니다.

Quick Start

React에서 ActiveReportsJS 시작하기 🚀

React 생태계가 발전함에 따라, React는 이제 새로운 애플리케이션이나 웹사이트를 구축할 때 Next.js, Vite 와 같은 최신 React 기반 프레임워크를 사용할 것을 권장합니다.

Next.js 에서

ActiveReportsJS 시작하기

Vite(React)에서

ActiveReportsJS 시작하기

ActiveReportsJS 디자이너를 통해 보고서 생성하기

1. ActiveReportsJS 파일을 다운로드한 후, 디자이너 프로그램을 설치 및 실행합니다.

* 디자이너 프로그램 설치 파일은 다운로드 받은 파일의 designer 폴더에 위치합니다.

2. 디자이너를 사용해 원하는 보고서를 생성합니다.

데이터 소스를 추가하고 보고서를 디자인한 후, 생성한 보고서를 "report.rdlx-json"로 저장합니다.
(파일명은 원하는대로 변경 가능합니다.)


저장한 보고서를 React 앱의 public 폴더에 위치시킵니다.

ActiveReportsJS 뷰어를 React 응용 프로그램에 추가하기

* 아래 가이드에서는 Create React App 도구를 사용하여 새로운 React 응용 프로그램을 생성하는 방법입니다.

1. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 포함된 React 응용 프로그램을 만듭니다.

// npm을 사용하는 경우 :

npm init react-app arjs-react-viewer-app


// yarn을 사용하는 경우 :

yarn create react-app arjs-react-viewer-app

2. ActiveReportsJS React 모듈과 보고서 뷰어를 응용 프로그램에 추가합니다.

1) React 응용 프로그램 초기화가 완료되면, 명령 프롬프트 또는 터미널에서 cd 명령어를 사용하여 arjs-react-viewer-app 폴더로 이동합니다.

cd arjs-react-viewer-app

2) arjs-react-viewer-app  폴더로 이동하였다면, 다음 명령을 실행하여 최신버전의 패키지를 설치합니다.

*React 보고서 뷰어 컴포넌트는 @mescius/activereportsjs-react 패키지를 통해 배포됩니다.

// npm을 사용하는 경우 :

npm install @mescius/activereportsjs-react


// yarn을 사용하는 경우 :

yarn add @mescius/activereportsjs-react

3) src/App.js 파일을 열고 내용을 다음 코드로 바꿉니다.

* 보고서 이름은 이전에 생성한 파일에 따라 유동적으로 설정해 주세요.

import React from "react";

import "./App.css";

import { Viewer } from "@mescius/activereportsjs-react";


function App() {

  return (

    <div id="viewer-host">

      <Viewer report={{ Uri: 'report.rdlx-json' }} />

    </div>

  );

}


export default App;

3. viewer-host 요소의 스타일을 추가합니다.

src/App.css 파일을 열고 아래 CSS 스타일로 코드를 바꿉니다.

@import "@mescius/activereportsjs/styles/ar-js-ui.css";

@import "@mescius/activereportsjs/styles/ar-js-viewer.css";


#viewer-host {

 width: 100%;

 height: 100vh;

}

4.Craco로 React 환경을 쉽게 변경 할 수 있도록 패키지와 파일을 추가합니다.

1) 응용프로그램에 Craco 패키지를 설치합니다.

npm i -D @craco/craco

2) craco.config.js 파일을 생성하고 아래 코드를 삽입합니다.

5.package.json 파일을 열어 react-script 내용을 아래코드와 같이 craco로 변경합니다.

"scripts": {

 "start": "craco start",

 "build": "craco build",

 "test": "craco test",

 "eject": "craco eject"

}

전체 코드는 아래 샘플을 확인해 주세요.

6. React 앱을 실행하여 결과를 확인합니다.

npm start 또는 yarn start 명령을 사용하여 실행합니다.

npm start

Stackblitz 자세히 보기

For React 개발자

ActiveReportsJS 첫 사용자를 위한 추천 튜토리얼

더 많은 글 보기

ActiveReportsJS Starter Template

커스터마이징이 가능한 샘플 & 템플릿을 통해서
빠르게 개발을 시작해보세요. 

ActiveReportsJS를 활용한 다양한 템플릿과 샘플입니다. 실제 데모를 확인하실 수 있으며, 다운로드하여 직접 커스터마이징하여 사용하실 수 있습니다.

더 많은 템플릿 & 샘플이 궁금하신가요?

ActiveReportsJS 온라인 튜토리얼 쇼케이스를 방문해 보세요!

React 리포팅 컨트롤 ActiveReportsJS 주요 기능