The global choice of JavaScript developers for developing front-end reporting solutions.

Supports Angular, React, and Vue

Supports Next.js, Nuxt, Svelte, and Vite.js

Provides ActiveReportsJS designer program with cross-platform support

Provides a JavaScript report viewer component

Provides JavaScript report designer component

Develop responsive, mobile-friendly reporting apps

Various features have been updated v5.2
Release

ActiveReportsJS Quickstart

Getting Started with the JavaScript Reporting Control

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 sample

ActiveReportsJS is a reporting solution for visualizing data in front-end applications. Using ActiveReportsJS's report designer, you can quickly and easily create reports with the desired template using only JSON data. Furthermore, the JavaScript report viewer component and library allow you to create and distribute reports across a variety of environments, from Windows to the web and mobile.

Electronic Ticket Issuance Confirmation
estimate
tax invoice
transcript
Cosmetics Test Report
Customer List (Runtime)

Click the button below to see more templates!

View more templates

Why should I use ActiveReportsJS?

ActiveReportsJS has long been a platform-agnostic reporting solution, encompassing all the reporting features developers and end users need. Now, with JavaScript technology, you can extend your reporting solution across platforms.

JavaScript reporting engine

A powerful reporting engine lets you fetch and generate reports using JavaScript, regardless of device.

Support for various report types

Supports various layouts, including continuous page layout and fixed page layout, allowing you to create reports in a format that suits your needs.

No server dependency

You can integrate the ActiveReportsJS reporting engine into your frontend applications using NPM packages, CDN hosting, or app-hosted JavaScript code with no server-side dependencies.

Client-side export and printing

Quickly generate WYSIWYG reports on the client side and export them to PDF, HTML, and CSV formats. This allows end users to print complete JavaScript reports.

Full support for JS frameworks

Boost your productivity by using it with popular JavaScript frameworks like Angular, React, and Vue.

Interactive JS report design

Drilldown, drillthrough, interactive sorting, and bookmarking features allow you to interact and provide more specific information to your end users.

Ask anything!

Please share your vague concerns and questions about ActiveReportsJS with MESCIUS's expert team. We empathize with your concerns and are here to help.

Online product consultation Developer Forum (Technical Support)

ActiveReportsJS Webinar

MONTHLY
The new world of low-code reporting
The Busy Developer's Reporting Wizard | ActiveReportsJS


We'll introduce the various features and characteristics of ActiveReportsJS and explain how to use them. Download the free trial version of ActiveReportsJS and follow along!

Start your free trial

No need to develop complex and heavy web reports!

Now, create a front-end-based reporting solution using JavaScript and JSON.

Report Designer

The ActiveReportsJS designer supports data connections in JSON format, such as REST API, OData, and GraphQL, and allows you to quickly and easily create reports in the style you want with drag-and-drop, without coding.

  • Supports Windows, Mac, and Linux OS
  • Intuitive drag-and-drop GUI
  • Switch to JS Report
  • Flexible integration
  • Various customizations
  • Multilingual support
Quick Start demo

Report Viewer

All reports are written in JSON format, allowing you to render them seamlessly on the web using just a JavaScript report viewer, regardless of device.

  • Rendering reports in a browser
  • Customizing
  • Lightweight report processing and viewing
JavaScript Angular React View

JavaScript framework support

ActiveReportsJS is built to be framework-agnostic, offering full support for popular JavaScript frameworks like React, Vue, Angular, Next.js, and Nuxt.

Check out our wide range of samples and templates for different fields.

Education |
  • Student Evaluation Report
  • transcript
  • Transcript (KR) - Download Sample
\
Accounting | Finance
  • balance sheet
  • Cash flow statement
  • financial charts
  • Income statement
  • Transaction statement
Healthcare
  • Blood test results
  • Smoking status
  • Vaccination Schedule
  • Medical bill receipt
  • Patient Satisfaction Survey
Manufacturing | Manufacturing
  • Cosmetics Test Report - Download Sample
  • Supplier Change Request Form
  • Inventory Investigation Report
HR
  • Employee ID card form
  • Expense statement
  • Payroll statement
Sales |
  • Invoice
  • Product Catalog
  • MESCIUS Quotation - Download Sample
  • MESCIUS Tax Invoice - Download Sample
Service | Service
  • Electronic Ticket Issuance Confirmation - Download Sample
  • Hotel Reservation Details
  • Logistics costs
  • phone bill
  • Customer List - Download Sample
  • High-speed ship e-ticket
  • High-speed ferry mobile e-ticket

ActiveReportsJS Online Tutorial

Learn the various features of the JavaScript reporting control.

Running the Demo

ActiveReportsJS Quickstart

Getting Started with JavaScript Reporting Controls Guide

How to Use Report Controls by JavaScript Framework

ActiveReportsJS provides support for JavaScript frameworks, enabling developers to easily achieve rapid web development and efficient code maintenance.

ActiveReportsJS Viewer Component

You can use the ActiveReportsJS Viewer component with other framework tools. Try incorporating the ActiveReportsJS Viewer component into your application.

  • JavaScript
  • Angular
  • React
  • View
  • Quickly
  • Svelte
  • Next.js
  • Nuxt

Installing from NPM

You can install npm packages by typing a simple npm command.

npm install @mescius/activereportsjs

  • JavaScript
  • Angular
  • React
  • View

ActiveReportsJS Designer Component

Create a more efficient reporting system by embedding ActiveReportsJS designer components into your Angular, React, Vue, and pure JavaScript applications.

  • JavaScript
  • Angular
  • React
  • View
  • Quickly
  • Svelte
  • Next.js
  • Nuxt

Standalone Report Designer

Build customizable, interactive report templates quickly and easily using our cross-platform report designer application.

Supports various OS

It can be installed on Windows, Mac, or Desktop Linux.

User-friendly interface

Create printable analytics or interactive reports using an intuitive interface and a rich set of data visualization components.

JSON Report Template

Save report templates in JSON format and integrate them into your application as static resources or dynamic modules.

Ask anything!

Please share your vague concerns and questions about ActiveReportsJS with MESCIUS's expert team. We empathize with your concerns and are here to help.

Online product consultation Developer Forum (Technical Support)

ActiveReportsJS v5.2
New features

  • Revamped JavaScipt Chart Report Items
  • Enhanced configurability - Dynamic expressions for all aspects of the chart, including data binding, axis settings, labels, and legend items.
  • Seamless Migration - Ensures a smooth transition without manual adjustments (when viewing old reports in the designer, existing charts are automatically converted to the new model).


  • JavaScript Report Viewer Theme
  • Built-in color themes
  • Theme Selector
  • Custom Theme API
  • Runtime theme switching



  • JavaScript Report Style Sheet
  • Reusable style sheets
  • Flexible storage
  • dynamic binding
  • Custom styles
Learn more about new features

Our Customers

Entercron Inc.

COVAS, a smart total logistics forwarding platform

#Logistics #Report #Document Automation

Here Study

Smart Online Education Bachelor's Management Solution

#Education #Report #Dashboard

My Link

Smart Manufacturing IT Solution, LinkBiz

#Distribution #Excel #Dashboard

Introduction Case

Explore more MESCIUS product adoption examples.

ActiveReportsJS Pricing and Licensing

If you want to create a JavaScript-based reporting solution using ActiveReportsJS, you will need to purchase both a developer license and a deployment license.

* All amounts are exclusive of VAT.

Developer License (Designer)

1 developer, 1 year license


This license is required to use the ActiveReportsJS desktop designer app.

￦120,000

* You must purchase 1 copy per developer.

* You can use the purchased main version minor version for 1 year.

* The license will automatically expire after 1 year, and an additional license will be issued in 1-year increments.

You can purchase it.

Distribution License

Perpetual License

This license is required to deploy the ActiveReportsJS control on your server.

￦1,999,000

* You must purchase 1 copy per domain address or IP address you are servicing.* Once registered, domains and IPs cannot be modified.* The distribution license can be used without a time limit.* Distribution keys can only be generated for the developer license version you own.

ActiveReportsJS Maintenance License

Includes updates to continuously improve the performance of ActiveReportsJS and add new features.

FAQ

  • How to Licensing ActiveReportsJS
  • How to install and uninstall ActiveReportsJS Designer

Application for distribution key issuance

To deploy the ActiveReportsJS control on your server, you must purchase a deployment license and obtain a deployment key. Please apply for a deployment key through the deployment key issuance portal.

Introduction Inquiry

If you need more detailed product or purchase consultation regarding ActiveReportsJS implementation, please contact us using a method that is convenient for you.

Request for product and purchase consultation
Check online quotes and request quotes

Purchase Procedure

Click on each button to see detailed information about each step of the purchasing process.

  • 1. Price confirmation and quote request

  • You can request a quote using any of the methods below:
  • Online quote confirmation and quote request
  • 1670-0583
  • sales-kor@mescius.com

Controls for Web Developers

  • SpreadJS

    Pure JavaScript-based Web-Excel component
    • Supports Excel import/export
    • Supports 450 Excel functions
    • Supports Angular, React, and VueJS
    Learn more

  • Wijmo

    JavaScript-based UI controls such as Chart, Grid, and Input
    • 80 UI controls including grids, charts, reports, input forms, and OLAP
    • Full support for Angular, React, and VueJS
    • Filter, group, and sort functions
    Learn more

  • Forguncy

    A business web development solution built with Excel without coding.
    • Easy and quick web implementation with Excel features
    • Web development without HTML & CSS
    • Data collection and integration solution
    Learn more

  • DsExcel

    High-performance Java & Kotlin / .NET-based Excel spreadsheet API library
    • Create, load, edit, and save spreadsheets
    • Parse, convert, and share spreadsheets
    • Calculate formulas and format cells
    Learn DsExcel Java
    Learn about DsExcel .NET