ActiveReportsJS, Vue Reporting Component

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

전 세계 Vue 개발자들의 선택

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

Why ActiveReportsJS

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

강력한 데이터 바인딩

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

Vue, Nuxt, Vite 지원

ActiveReportsJS는 Vue 3와 Nuxt v3, Vite v2 이상을 지원합니다. 인기 있는 JavaScript 프레임워크에서 더욱 효율적으로 웹 리포트를 개발해보세요.

서버 종속성 없음

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

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

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

다양한 리포트 타입 지원

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

대화형 JS 리포트 디자인

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

Quick Start

Vue에서 ActiveReportsJS 시작하기 🚀

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

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

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

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

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


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

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

1. Vue 앱 폴더로 이동한 후, ActiveReportsJS 라이브러리를 설치합니다.

npm install @mescius/activereportsjs-vue

2. ActiveReportsJS 스타일 적용을 위한 css 파일을 추가합니다.

작업을 진행할 Vue 앱 src/App.vue 파일을 열고, 하단에 ActiveReportsJS CSS 파일을 추가합니다.

정확한 코드의 위치는 아래 샘플에서 확인해 주세요.

<style src="../node_modules/@mescius/activereportsjs/styles/ar-js-ui.css"></style>

<style src="../node_modules/@mescius/activereportsjs/styles/ar-js-viewer.css"></style>

3. 보고서 뷰어 컴포넌트를 초기화하고, ActiveReportsJS 디자이너로 만든 보고서를 불러옵니다.

1) src/App.vue 파일의 script 영역에서 Viewer 컴포넌트를 가져오고, Viewer 컴포넌트를 등록합니다.

2) template 영역에는 호스트 요소를 추가하고, 위에서 만든 report.rdlx-json 파일을 불러옵니다.
3) 기본 응용 프로그램 스타일이 보고서 뷰어 레이아웃을 방해하지 않도록, src/main.ts 파일의 코드도 변경합니다.


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

4. Vue 앱을 실행하여 결과를 확인합니다.

npm run dev

For Vue 개발자

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

더 많은 글 보기

ActiveReportsJS Starter Template

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

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

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

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

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