프론트엔드 리포팅 솔루션 개발을 위한 전 세계 JavaScript 개발자들의 선택

Angular, React, Vue 지원

Next.js, Nuxt, Svelte, Vite.js 지원

크로스플랫폼을 지원하는 ActiveReportsJS 디자이너 프로그램 제공

반응형, 모바일 친화적인 리포팅 앱 개발 가능

ActiveReportsJS는 프론트엔드 어플리케이션에서 데이터를 시각화하기 위한 리포팅 솔루션입니다.

ActiveReportsJS의 리포트 디자이너 프로그램을 통해, JSON 데이터만으로 원하는 템플릿의 리포트를 쉽고 빠르게 생성할 수 있습니다.

 또한, JavaScript 리포트 뷰어 컴포넌트와 라이브러리를 통해, Windows, Web, Mobile에 이르기까지 다양한 환경에서 리포트를 생성하고 배포할 수 있습니다.

전자항공권 발행 확인서
견적서
세금계산서
성적증명서
화장품 시험 성적서
고객리스트 (런타임)

ActiveReportsJS 빠른 시작

JavaScript 리포팅 컨트롤 시작하기

1 ActiveReportsJS 파일 다운로드
2 리포트 디자이너를 통해 보고서 생성
3 리포트 뷰어를 응용 프로그램에 추가
4 호스트 요소 추가
5 보고서 뷰어 컴포넌트 초기화
6 응용프로그램 실행

  • ActiveReportsJS 파일을 다운로드 하여 압축을 해제한 후, Windows, MacOS, Linux 중 사용 중인 운영체제에 맞는 ActiveReportsJS 디자이너를 설치 및 실행합니다.

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

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

    보고서 생성 방법 자세히 보기

    * 아래는 ActiveReportsJS 디자이너의 화면입니다.

  • 뷰어를 표시할 응용 프로그램의 html 파일 상단 <head> 영역에 아래와 같이 리소스 파일을 불러옵니다.

    * 아래 파일들은 다운로드 받은 파일의 dist, styles 폴더에 위치합니다.

     <!-- ===== 필수 리소스 ===== -->

<!-- [필수] 공통 UI 스타일 -->
<link rel="stylesheet" type="text/css"
href="https://cdn.mescius.com/activereportsjs/6.latest/styles/ar-js-ui.css" />

<!-- [필수] 리포트 뷰어 전용 스타일 -->
<link rel="stylesheet" type="text/css"
href="https://cdn.mescius.com/activereportsjs/6.latest/styles/ar-js-viewer.css" />

<!-- [필수] 코어 엔진 -->
<script src="https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-core.js"></script>

<!-- [필수] 뷰어 컴포넌트 -->
<script src="https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-viewer.js"></script>

<!-- ===== 선택 리소스 (필요한 내보내기 기능만 포함) ===== -->

<!-- [선택] PDF 내보내기 -->
<script src="https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-pdf.js"></script>

<!-- [선택] 표 형식(CSV) 내보내기 -->
<script src="https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-tabular-data.js"></script>

<!-- [선택] 엑셀(XLSX) 내보내기 -->
<script src="https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-xlsxAdv.js"></script>

<!-- [선택] HTML 내보내기 -->
<script src="https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-html.js"></script>

  • html 파일 하단 <body> 영역에 아래와 같이 호스트 요소를 추가하고, id를 설정합니다.

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

  • HTML 파일 하단 <body> 영역의 <script> 태그 안에 아래의 코드를 추가하여 ActiveReportsJS 뷰어를 띄운 후, 위에서 만든 .rdlx-json 파일을 불러옵니다.

     var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host");
viewer.open("report.rdlx-json");
  • Visual Studio Code의 Live Server 확장 프로그램을 설치한 후, 우측 하단의 Go Live 버튼을 클릭해 응용 프로그램을 실행합니다.
    아래와 같이 브라우저에 보고서가 뷰어에 표시되는 것을 확인할 수 있습니다.

ActiveReportsJS는 특정 프레임워크에 구애받지 않도록 구축되어 React, Vue, Angular, Next.js, Nuxt 등 인기 있는 JavaScript 프레임워크를 완벽히 지원합니다.

왜 ActiveReportsJS를 사용해야 할까요?

ActiveReportsJS는 오랜 시간 동안 개발자 그리고 최종 사용자가 필요로 하는 모든 리포팅 기능들을 포함하고 있습니다. JavaScript 기술을 통하여, 이제 플랫폼에 구애 받지 않고 리포트 솔루션을 확장해 보세요.

JavaScript 리포팅 엔진

강력한 리포팅 엔진을 통해 기기에 상관 없이 JavaScript로 보고서를 가져오고 생성할 수 있습니다.

다양한 리포트 타입 지원

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

서버 종속성 없음

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

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

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

JS 프레임워크 완벽 지원

Angular, React, Vue 등 인기 있는 JavaScript 프레임워크와 함께 사용하여 생산성을 높여 보세요.

대화형 JS 리포트 디자인

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

JS 리포트 개발에 필요한 자료를 한곳에

ActiveReportsJS 튜토리얼 & 템플릿

주요 기능은 데모로 직접 확인하고, 튜토리얼을 따라 빠르게 시작해 보세요. React, Vue, Angular 등 프레임워크별 가이드도 제공하며, 다양한 템플릿은 미리 살펴본 뒤 원하는 대로 커스터마이징해 바로 사용할 수 있습니다.

복잡하고 무거운 Web 리포트 개발은 NO!

이제 JavaScript와 JSON을 통해 프론트엔드 기반 리포팅 솔루션을 만들어 보세요.

ActiveReportsJS 디자이너는 REST API, OData, GraphQL과 같은 JSON 형식의 데이터 연결을 지원하며, 코딩 없이도 드래그 앤 드롭으로 원하는 스타일의 보고서를 쉽고 빠르게 만들 수 있습니다.

  • Windows, Mac, Linux OS 지원
  • 직관적인 드래그앤드롭 GUI
  • JS 리포트로 전환
  • 유연한 통합
  • 다양한 사용자 정의
  • 다국어 지원
Quick Start 도움말 데모

모든 보고서는 JSON 형식으로 작성되어, 기기에 상관 없이 JavaScript 리포트 뷰어만으로 보고서를 웹 상에 제약 없이 렌더링 할 수 있습니다.

  • 브라우저에서 리포트 렌더링
  • 커스터마이징
  • 경량 리포트 처리 및 보기
JavaScript Angular React Vue Next.js Nuxt Vite

ActiveReportsJS 주요 기능

JS 리포트 개발에 필요한 자료를 한곳에

ActiveReportsJS 튜토리얼 & 템플릿

주요 기능은 데모로 직접 확인하고, 튜토리얼을 따라 빠르게 시작해 보세요. React, Vue, Angular 등 프레임워크별 가이드도 제공하며, 다양한 템플릿은 미리 살펴본 뒤 원하는 대로 커스터마이징해 바로 사용할 수 있습니다.

ActiveReportsJS v6.2 새로운 기능

[Angular 22 지원]

  • Report Designer·Report Viewer의 Angular 래퍼가 Angular 22 프로젝트 빌드 지원


[AI Assistant 기반 리포트 시각화]

  • ActiveReportsJS AI Assistant 도입 : Standalone Report Designer 및 웹 애플리케이션 내장 Report Designer 컴포넌트에서 사용 가능
  • Explore 기능 : 데이터 세트에서 AI 기반 테이블·태블릭스·차트 시각화 구현 가능
  • 필드 정보만 전송 : 데이터 세트의 필드명과 타입만 AI 제공업체로 전송, 실제 데이터는 미전송하여 시각화 지원
  • 인스턴트 비주얼 대체 : AI Assistant 미구성 또는 요청 실패 시 내장 인스턴트 비주얼로 시각화 제안 지원
  • 시각화 카드 표시 : 생성된 시각화를 짧은 설명이 포함된 카드 형태로 확인 가능


[다중값 매개변수 기능 강화]

  • Enable Empty Array 옵션 : 값을 선택하지 않은 상태로도 다중값 매개변수 제출 가능
  • Select All Value 옵션 : (all) 선택 시 개별 값 대신 *와 같은 단일 센티널 값 전달 가능


[Report Designer API 개선]

  • 기본 용지 크기 설정 : 신규 리포트의 기본 용지 크기를 표준 또는 사용자 지정 크기로 설정 가능
새로운 기능 자세히 보기

Our Customers

엔터크론아이앤씨

스마트 토탈 물류 포워딩 플랫폼 COVAS

#물류 #리포트 #서류자동화

여기스터디

스마트 온라인 교육 학사 관리 솔루션

#교육 #리포트 #대시보드

마이링크

스마트 제조 IT 솔루션, LinkBiz

#유통 #Excel #대시보드

도입사례

더 많은 MESCIUS 제품 도입 사례를 살펴보세요.

Web 개발자를 위한 컨트롤

  • SpreadJS

    순수 JavaScript 기반 Web-Excel 컴포넌트
    • Excel 가져오기/내보내기 지원
    • 450+ Excel 함수 지원
    • Angular, React, VueJS 지원
    더 알아보기

  • Wijmo

    JavaScript 기반 Chart, Grid, Input 등 UI 컨트롤
    • 그리드, 차트, 리포트, 입력 폼, OLAP 등 80+ UI 컨트롤
    • Angular, React, VueJS 완벽 지원
    • 필터, 그룹화, 정렬 기능
    더 알아보기

  • Forguncy

    코딩 없이 Excel로 만드는 비즈니스 웹 개발 솔루션
    • Excel 기능으로 쉽고 빠르게 웹 구현
    • HTML & CSS 없이 시작하는 웹 개발
    • 데이터 취합 및 통합 솔루션
    더 알아보기

  • DsExcel

    고성능 Java&Kotlin / .NET 기반 Excel 스프레드시트 API 라이브러리
    • 스프레드시트 생성, 로드, 편집, 저장
    • 스프레드시트 구문 분석, 변환, 공유
    • 수식 계산 및 셀 서식 지정
    DsExcel Java 알아보기
    DsExcel .NET 알아보기