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

Angular, React, Vue 지원

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

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

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

ActiveReportsJS 빠른 시작

JavaScript 리포팅 컨트롤 시작하기

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

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

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

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

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

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

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

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

    <필요한 파일들>
    - ar-js-ui.css (필수)
    - ar-js-viewer.css (필수)
    - ar-js-core.js (필수)
    - ar-js-viewer.js (필수)
    - ar-js-pdf.js (선택)
    - ar-js-tabular-data.js (선택)
    - ar-js-html.js (선택)

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

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

  • html 파일 하단 <body> 영역에 아래의 코드를 추가하여 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 리포트 템플릿

ActiveReportsJS는 프론트엔드 어플리케이션에서 데이터를 시각화하기 위한 리포팅 솔루션입니다. ActiveReportsJS의 리포트 디자이너 프로그램을 통해, JSON 데이터만으로 원하는 템플릿의 리포트를 쉽고 빠르게 생성할 수 있습니다. 또한, JavaScirpt 리포트 뷰어 컴포넌트와 라이브러리를 통해, Windows, Web, Mobile에 이르기까지 다양한 환경에서 리포트를 생성하고 배포할 수 있습니다.

전자항공권 발행 확인서
견적서
세금계산서
성적증명서
화장품 시험 성적서
고객리스트 (런타임)
교육 | Education
\
회계 | Finance
보건·의료 | Healthcare
제조 | Manufacturing
인사 | HR
영업 | Sales
서비스 | Service

왜 ActiveReportsJS를 사용해야 할까요?

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

JavaScript 리포팅 엔진

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

다양한 리포트 타입 지원

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

서버 종속성 없음

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

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

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

JS 프레임워크 완벽 지원

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

대화형 JS 리포트 디자인

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

ActiveReportsJS 웨비나

MESCIUS
Low code 리포팅의 신세계
바쁜 개발자의 리포팅 마법사 | ActiveReportsJS


ActiveReportsJS의 다양한 기능과 특징을 소개하고, 사용 방법에 대해 설명합니다. ActiveReportsJS 무료 체험판을 다운로드하여 따라해 보시길 바랍니다!

무료 체험 시작하기

복잡하고 무거운 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

JavaScript 프레임워크 지원

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

ActiveReportsJS 주요 기능

ActiveReportsJS 온라인 튜토리얼

JavaScript 리포팅 컨트롤의 다양한 기능을 학습해 보세요.

데모 실행하기

ActiveReportsJS 빠른 시작

JavaScript 리포팅 컨트롤 시작 가이드

JavaScript 프레임워크 별 리포트 컨트롤 사용 방법

ActiveReportsJS는 개발자가 빠른 웹 개발과 효율적인 코드 유지 관리를 쉽게 할 수 있도록 JavaScript 프레임워크에 대한 지원을 제공합니다.

ActiveReportsJS 뷰어 컴포넌트

ActiveReportsJS 뷰어 컴포넌트와 다른 프레임워크 도구들을 함께 사용할 수 있습니다. 여러분의 애플리케이션에 ActiveReportsJS Viewer 컴포넌트를 삽입해 보세요.

NPM에서 설치하기

간단한 npm 명령을 입력하여 npm 패키지를 설치할 수 있습니다.

npm install @mescius/activereportsjs

ActiveReportsJS 디자이너 컴포넌트

여러분의 Angular, React, Vue 및 순수 JavaScript 애플리케이션에 ActiveReportsJS 디자이너 컴포넌트를 삽입하여 더욱 효율적인 리포팅 시스템을 만들어 보세요.

독립 실행형 보고서 디자이너

교차 플랫폼을 지원하는 보고서 디자이너 응용 프로그램을 사용하여 사용자 정의 가능한 대화형 보고서 템플릿을 쉽고 빠르게 구축해 보세요.

다양한 OS 지원

Windows, Mac 또는 Desktop Linux에 설치할 수 있습니다.

사용자 친화적인 인터페이스

직관적인 인터페이스와 풍부한 데이터 시각화 컴포넌트 세트를 사용하여 인쇄가 가능한 분석 또는 대화형 보고서를 생성합니다.

JSON 보고서 템플릿

보고서 템플릿을 JSON 형식으로 저장하고 애플리케이션에 정적 리소스 또는 동적 모듈로 통합합니다.

ActiveReportsJS v6 새로운 기능

 React 19 공식 지원

  • React 애플리케이션에서 ActiveReportsJS 디자이너·뷰어 안정적 연동 가능


셀(Cell) 기반 보고서 디자이너

  • Excel UI와 유사한 셀 그리드 레이아웃으로 정밀한 보고서 디자인 가능
  • 자유 형식(Free-form) ↔ 셀 기반(Cell-based) 레이아웃 간 즉시 전환 지원. 


엑셀 내보내기(Excel Export) 성능 개선

  • 보고서 섹션별 시트 생성, 숫자·날짜 타입 및 서식 유지
  • 셀 기반 레이아웃 적용으로 정확한 셀 정렬 및 구조 보장


보고서 뷰어 컴포넌트 개선

  • 사용자 정의 드롭다운 버튼 : 툴바에 커스텀 드롭다운 추가로 관련 기능 그룹화 가능
  • 애니메이션 효과 설정 : 차트(onLoad / onHover / highlight), 테이블(onHover, 행 강조 색상) 애니메이션 구성 지원



보고서 디자이너 컴포넌트 개선

  • 디자이너 인스턴스 Destroy API : 디자이너 인스턴스 정리용 destroy 메서드 추가 Angular·React·Vue·Svelte 컴포넌트 라이프사이클에 자동 적용
새로운 기능 자세히 보기

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 알아보기