ActiveReportsJS is a powerful reporting tool for web applications that allows developers and report authors to easily design and display reports within their applications. With a wide range of features, such as drill-down, runtime data filtering, and parameter-driven reports, as well as compatibility with popular frameworks such as Angular, React, and Vue, ActiveReportsJS simplifies the process of creating and managing reports, enabling developers to enhance their applications' capabilities and deliver valuable insights to end-users.

dashboard image

The ActiveReportsJS suite includes both a Report Viewer and Report Designer component. The Viewer allows end-users to view and interact with reports, while the Designer enables developers to design and customize reports, either within the same web application or by using the Standalone Report Designer.

Installation

To install the latest release version:

npm install @mescius/activereportsjs

To install a specific version:

npm install @mescius/activereportsjs@{VersionNumber}

Documentation

For more information on how to use ActiveReportsJS, online documentation can be found here:

Samples

To quickly jump in with ActiveReportsJS, check out our Demo Gallery.

Licensing

Read more about ActiveReportsJS Licensing.

ActiveReportsJS JP

ActiveReportsJSは、モダンなWebアプリケーションに帳票出力機能を組み込めるJavaScriptコントロールです。帳票の外観デザインの設定からデータ接続、印刷、PDFやExcelへの出力まで、Web帳票開発に必要な機能が揃っています。

サンプル

ActiveReportsJSチュートリアルデモでは、ActiveReportsJSを使用したアプリケーションの作成方法や、各コントロールの基本機能、実用的なアプリケーションの例などを紹介しています。

また、トライアル版をダウンロードして、実際の機能や動作をご確認いただけます。

インストール方法

npm install @mescius/activereportsjs

日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。

ドキュメント

製品の各種ドキュメントは、下記をご参照ください。

製品情報

製品の詳細や価格、ライセンスについては、下記をご参照ください。
https://developer.mescius.jp/activereportsjs

サポート

ヘルプやデモに加え、ナレッジベースでは製品の技術情報を公開しております。また、サブスクリプションをご契約中のお客様は、E-mailによる技術サポートをご利用いただけます。

ActiveReportsJS KR

액티브리포츠JS (ARJS)는 자바스크립트로 만들어진 고성능 프론트엔드 리포팅 솔루션입니다. 웹과 모바일을 모두 지원하고 서버에 의존도가 없기 때문에 쉽고 빠르게 솔루션을 도입하실수 있습니다.
"Page"와 "RDL" 형태의 리포트 타입을 지원하고 있습니다.

설치

다음을 사용하여 모든 ActiveReportsJS 자바 스크립트 구성 요소를 설치할 수 있습니다. npm install @mescius/activereportsjs

도움말

ActiveReportsJS 사용 방법 및 도구에 대한 자세한 내용은 도움말과 API 참고 가이드를 참고해 주시기 바랍니다.

데모

ActiveReportsJS 데모 바로가기.

ActiveReportsJS 뷰어

첫 번째 ActiveReportsJS 뷰어 어플리케이션 만들기

과정

index.html의 헤드섹션에 dist폴더의 ar-js-core.js와 ar-js-viewer.js에 대한 참조를 추가하고 styles폴더에서 ar-js-viewer.css와 ar-js-ui.css에 대한 참조를 추가합니다 :

    <link rel="stylesheet" type="text/css" href="./node_modules/@mescius/activereportsjs/styles/ar-js-ui.css">
    <link rel="stylesheet" type="text/css" href="./node_modules/@mescius/activereportsjs/styles/ar-js-viewer.css">

    <script src="./node_modules/@mescius/activereportsjs/dist/ar-js-core.js"></script>
    <script src="./node_modules/@mescius/activereportsjs/dist/ar-js-viewer.js"></script>

만일 내보내기 기능이 필요하다면,index.html의 헤드 섹션에 dist 폴더에 있는 ar-js-pdf.js, ar-js-html.js, ar-js-tabular-data.js 또는 ar-js-xlsx.js에 대한 참조를 각각 필요에 따라 추가합니다 :

    <script src="./node_modules/@mescius/activereportsjs/dist/ar-js-pdf.js"></script>
    <script src="./node_modules/@mescius/activereportsjs/dist/ar-js-html.js"></script>
    <script src="./node_modules/@mescius/activereportsjs/dist/ar-js-xlsx.js"></script>
    <script src="./node_modules/@mescius/activereportsjs/dist/ar-js-tabular-data.js"></script>

index.html의 바디 섹션에서 ActiveReportsJS 뷰어를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 :

    <div id="root" style="height: 100vh"></div>

index.html에서 뷰어를 로드하고 onload 이벤트에 이를 구독하는 스크립트를 추가합니다 :

<body onload="loadViewer()">
    <script>
        function loadViewer() {
            var viewer = new GC.ActiveReports.ReportViewer.Viewer('#root');
            viewer.open({
              "Name": "Report",
              "Type": "report",
              "Body": {
                "Name": "Body",
                "Type": "section",
                "ReportItems": [
                   { Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReports", Top: "3in", Left: "3in", Height: "1in" }
                 ]
               }
            });
        }
     </script>

    <div id="root" style="height: 100vh"></div>
</body>

ActiveReportsJS 디자이너

보고서를 만들거나 수정하려면 Win, MacOS 또는 Linux용 **ActiveReportsJS 디자이너 어플리케이션**를 사용하시거나, 또는 아래의 ActiveReportsJS 디자이너 컴포넌트를 사용하시서 웹 상에서 직접 최종사용자에게 제공할 수도 있습니다.

첫 번째 ActiveReportsJS Designer 애플리케이션 만들기

과정

빈 저장소 초기화 npm init
필수 컴포넌트 설치 npm install @mescius/activereportsjs
index.html 만들어 라이브러리에서 ar-js-core.js, ar-js-designer.js 에 대한 참조를 추가하고 ar-js-designer.css, ar-js-ui.css 에 대한 참조도 추가합니다.

<html lang="en">
    <head>
        <title>ActiveReportsJS Designer</title>
        <meta charset="utf-8">
        <link rel="icon" href="data:;base64,=">
        <link rel="stylesheet" href="./node_modules/@mescius/activereportsjs/styles/ar-js-ui.css" type="text/css">
        <link rel="stylesheet" href="./node_modules/@mescius/activereportsjs/styles/ar-js-designer.css" type="text/css">
        <script src="./node_modules/@mescius/activereportsjs/dist/ar-js-core.js"></script>
        <script src="./node_modules/@mescius/activereportsjs/dist/ar-js-designer.js"></script>
        
    </head>
    <body></body>
</html>

index.html의 바디 섹션에서 ActiveReportsJS 디자이너를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 :

    <div id="designer" style="height: 100vh;"></div>

index.html에서 디자이너를 로드하고 onload 이벤트에 이를 구독하는 스크립트를 추가합니다 :

<body onload="loadDesigner()">
    <script>
        function loadDesigner(){
            const designer = new MESCIUS.ActiveReports.ReportDesigner.Designer("#designer");
        }
    </script>

    <div id="designer" style="height: 100vh;"></div>
</body>

index.html를 브라우저에서 열고 보고서를 디자인 합니다.

ActiveReportsJS 뷰어를 사용하여 보고서 미리보기 기능 추가

디자이너에서 미리보기를 추가하려면 ar-js-viewer.js에 대한 참조를 추가하고 그에 해당하는 CSS에 대한 참조도 추가해주셔야 합니다.(ar-js-core.js 참조 아래 부분에 추가).

<link rel="stylesheet" href="./node_modules/@mescius/activereportsjs/styles/ar-js-viewer.css" type="text/css">
<script src="./node_modules/@mescius/activereportsjs/dist/ar-js-viewer.js"></script>

ActiveReportsJS 뷰어를 호스트하기 위해 id가 있는 div태그를 추가합니다. 컨테이너 높이가 정의되어야 합니다 :

<div id="viewer" style="height: 100vh;display:none"></div>

헤드 섹션에 추가적인 참조 추가 (미리보기 구성에 도움)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"/>

뷰어를 초기화하고 도구 모음에 뒤로 버튼을 추가한후 미리보기 메서드에 대한 핸들러를 작성합니다. (뷰어와 디자이너 사용법에 대한 자세한 내용은, 도움말과 API 참고 가이드를 참고해 주시기 바랍니다.)

<script>
    function loadDesigner(){
        const designer = new MESCIUS.ActiveReports.ReportDesigner.Designer("#designer");
        const viewer = new MESCIUS.ActiveReports.ReportViewer.Viewer("#viewer");

        ///specify and add back button to viewer
        var backbutton = {
                key: '$backbutton',
                iconCssClass: 'mdi mdi-backburger',
                enabled: true,
                action: function(item){
                    $("#designer").toggle();
                    $("#viewer").toggle();
                }
            }
        viewer.toolbar.addItem(backbutton);

        //describe onRender method
        var onRender = (reportInfo) => {
            $("#designer").toggle();
            $("#viewer").toggle();
            viewer.open(reportInfo.definition);
        }

        designer.setActionHandlers({
            onRender: onRender
        });
    }
</script>

브라우저에서 'index.html' 페이지를 열고 디자인 화면에 컨트롤을 추가한후 '미리보기'를 클릭하여 디자인된 보고서를 미리 볼수 있습니다.

Keywords

FAQs

What is @mescius/activereportsjs?

Is @mescius/activereportsjs popular?

Is @mescius/activereportsjs well maintained?

Package last updated on 20 Oct 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@mescius/activereportsjs

ActiveReportsJS