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

Develop responsive, mobile-friendly reporting apps

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 Report Template

ActiveReportsJS is a reporting solution for visualizing data in front-end applications. Through the Report Designer program of ActiveReportsJS,

you can easily create a report of the desired template using only JSON data. In addition, through the JavaScript Report Viewer component and library, reports can be distributed in various environments including Windows, Web, and Mobile

Electronic Ticket
Estimate
Tax Invoice
Transcript
Cosmetics Test Report
Customer List (Runtime)

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample

Click the button below to see more templates!

View More Templates

Why Should I Use ActiveReportsJS?

ActiveReportsJS has all the reporting features that developers and end users have needed for a long time. With JavaScript technology, you can now extend your reporting solution regardless of platform.

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 Dependencies

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, Excel(XLSX) 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!

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

Online Consultation

ActiveReportsJS Webinar

MESCIUS
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!

Download Free Trial

No Complicated and Heavy Web Report Development!

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

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

All reports are written in JSON format, so reports can be rendered on the web without restrictions with a JavaScript Report Viewer, regardless of device.

  • Rendering reports in the browser
  • Customizing
  • Lightweight report process and view
JavaScript Angular React Vue Next.js Nuxt Vite

JavaScript Framework Support

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

Check Out a Variety of Samples and Templates by Category.

Education
\
Finance
Healthcare
Manufacturing
HR
Sales

ActiveReportsJS Online Tutorial

Learn the Various Features of the JavaScript Reporting Control.

Run Demo

ActiveReportsJS Quickstart

Getting Started with JavaScript Reporting Controls Guide

JavaScript Framework Support

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.

Installing From NPM

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

npm install @mescius/activereportsjs

ActiveReportsJS Designer Component

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

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!

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

Online Consultation

ActiveReportsJS v6 New features

Official React 19 Support

  • Stable integration of the ActiveReportsJS Designer and Viewer in React applications.


Cell-Based Report Designer

  • Enables precise report design with an Excel-like cell grid layout.
  • Supports instant switching between Free-form and Cell-based layouts.


Improved Excel Export Performance

  • Creates worksheets by report section, preserving numeric/date data types and formatting.
  • Ensures accurate cell alignment and structure by applying the cell-based layout.


Report Viewer Component Improvements

  • Custom dropdown buttons: Allows grouping related features by adding custom dropdowns to the toolbar.
  • Animation effect settings: Supports animation configuration for charts (onLoad / onHover / highlight) and tables (onHover, row highlight colors).


Report Designer Component Improvements

  • Designer instance Destroy API: Adds a destroy method for cleaning up designer instances, automatically applied to Angular, React, Vue, and Svelte component lifecycles.
Read More

Our Customers

Entercron Inc.

COVAS, A Smart Total Logistics Forwarding Platform

#Logistics #Report

YEOGISTUDY

Smart Online Education Bachelor’s Management Solution

#Education #Report #Dashboard

MYLINK

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.

$90

* 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,430

 * 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.

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.

Purchase Procedure

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

  • 1. Price confirmation and quote request

    Please request a quotation using any of the methods below that are convenient for you.


  • 2. Order Request

    Please send the following three items to Email (asia.sales@mescius.com)


    1. Signed quotation (authorized signatory or company seal)
    2. Copy of business registration certificate (for companies)
    3. End-User information:

              1) Company Name (in English):

              2) Contact Person (in English):

              3)E-mail:


    Once your order request is received, we will issue the invoice via email.

  • 3. Payment

    Bank Transfer


    Please make the payment to the account number indicated on the invoice you received.

  • 4. License issuance &amp; tax invoice issuance

    After payment is confirmed, we will send you an email with license issuance details.


    *To deploy the ActiveReportsJS control on a server, you must purchase a deployment license and obtain a deployment key. Please request your deployment key through the Deployment Key Portal.


    Distribution Key Issuance

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

    UI controls such as JavaScript-based 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

    Build Business Web Apps with Excel — No Coding Needed
    • Easy and quick web implementation with Excel features
    • Web development without HTML & CSS
    • Data collection and integration solution
    Learn More

  • DsExcel

    High-Performance Excel Spreadsheet API for Java, Kotlin, and .NET
    • Create, load, edit, and save spreadsheets
    • Parse, convert, and share spreadsheets
    • Calculate formulas and format cells
    DsExcel Java
    DsExcel .NET