PureJSでActiveReportsJSを使用する

PureJSで、ActiveReportsJSビューワコンポーネントを使用したWebアプリケーションを作成する方法を説明します。参照の追加については、ActiveReportsJSの参照トピックを参照してください。

ローカル環境で使用する

ActiveReportsJSビューワをブラウザに表示するため、'index.html'ファイルを作成します。
またビューワでレポートを表示するため、今回はJSON形式のレポートデータを読み込ませ、レポートを表示します。
'index.html'ファイルの内容は以下のように設定します。

<html>
<head>
    <title>ActiveReportsJS Viewer</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./css/ar-js-viewer.css" />
    <script type="text/javascript" src="./scripts/ie-polyfills.js"></script>
    <script type="text/javascript" src="./scripts/ar-js-core.js"></script>
    <script type="text/javascript" src="./scripts/ar-js-viewer.js"></script>
</head>
<body onload="load()">
    <div id="ARJSviewerDiv" style="height: 600px"></div>
    <script>
        function load() {
            const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
            viewer.open({
                Type: 'report'
                ,Body: {
                    Name: 'Body'
                    ,Type: 'section'
                    ,ReportItems: [{
                        Type: 'textbox', Name: 'textbox1', Value: 'Hello from ActiveReportsJS!', Style:{FontSize:"36pt"}, Height: '10in'
                    }]
                }
                ,Name: 'Report'
            });
        }
    </script>
</body>
</html>

ブラウザで'index.html'を表示します。

Expressを使用したWebアプリケーションで使用する

ActiveReportsJSデザイナを使用して作成したレポート(rdlx-jsonファイル)は外部ファイルのため、ブラウザのセキュリティ制約により、そのままではビューワに読み込むことができません。
外部ファイルを読み込むため、Expressを使用してローカルのWebサーバーを作成し、サーバー経由でファイルを読み込みます。
以下の手順では、Expressのインストールをnpmを使用して行うため、事前にNodeJSがコンピュータにインストールされている必要があります。

Expressを使用したWebサーバーを作成する方法について説明します。

コマンドプロンプトで次のコマンドを入力して、アプリケーションを含む新しいディレクトリを作成します。

Mkdir arjs-js

作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。

cd arjs-js

コマンドプロンプトで次のコマンドを入力してExpressをインストールします。

npm install express

コマンドプロンプトで次のコマンドを入力してActiveReportsJSモジュールをインストールします。

npm install @grapecity/activereports

'index.html'ファイルを作成し、内容を以下のように設定します。

サンプルでは'index.html'ファイルがある場所の同階層に［'reports'］フォルダを作成し、製品サンプルに含まれる'InvoiceList.rdlx-json'を配置しています。

<html>
<head>
    <title>ActiveReportsJS Viewer</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-viewer.css" />
    <script type="text/javascript" src="./node_modules/@grapecity/activereports/dist/ie-polyfills.js"></script> <!--to run in IE-->
    <script type="text/javascript" src="./node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
    <script type="text/javascript" src="./node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
</head>
<body onload="load()">
    <div id="ARJSviewerDiv" style="height: 600px"></div>
    <script>
        function load() {
            const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
            viewer.open('/reports/InvoiceList.rdlx-json');
        }
    </script>
</body>
</html>

以下の内容で'server.js'ファイルを作成します。

const express = require('express'); //import Express.js module
const app = express();
const path = require('path'); 
app.use(express.static(path.join(__dirname)));
app.listen(8085);

コマンドプロンプトで次のコマンドを入力して、Webサーバーを起動します。

node .\server.js

ブラウザで'localhost:8085'を参照し、アプリケーションを表示します。

ASP.NET Webアプリケーションで使用する

以下の手順では、ASP.NET Webアプリケーションを作成する方法について説明します。

Visual Studioで、空のASP.NET Webアプリケーションを作成します。
プロジェクトにHTMLページを追加します。
プロジェクトフォルダに［'scripts'］フォルダを作成し、以下のスクリプトを追加します。
- ar-js-core.js
- ar-js-viewer.js

エクスポート機能を使用するには、以下のスクリプトも追加します。 * ar-js-pdf.js * ar-js-xlsx.js * ar-js-html.js

プロジェクトに「'css'」フォルダを作成し、ar-js-viewer.cssスタイルシートを含めます。
「'reports'」フォルダを作成し、表示したいレポートを含めます。
追加されたHTMLページの内容を次のように変更します。
- ビューワのスクリプトとスタイルシートへの参照を追加します。
- ビューワをホストするdiv要素を追加します（コンテナの高さを定義する必要があります）。
- ビューワのコンポーネントを初期化します。
- viewer.open()メソッドを使用して、ビューワでレポートを開きます。

以下のように、HTMLページの内容を変更します。

<html>
<head>
    <title>ActiveReportsJS Viewer</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="./css/ar-js-viewer.css" />
    <script type="text/javascript" src="./scripts/ie-polyfills.js"></script> <!--to run in IE-->
    <script type="text/javascript" src="./scripts/ar-js-core.js"></script>
    <script type="text/javascript" src="./scripts/ar-js-viewer.js"></script>
    <script type="text/javascript" src="./scripts/ar-js-pdf.js"></script>
    <script type="text/javascript" src="./scripts/ar-js-xlsx.js"></script>
    <script type="text/javascript" src="./scripts/ar-js-html.js"></script>
</head>
<body onload="load()">
    <div id="ARJSviewerDiv" style="height: 600px"></div> <!--define container height-->
    <script>
        function load() {
            const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
            viewer.open('/reports/InvoiceList.rdlx-json');
        }
    </script>
</body>
</html>

ブラウザでHTMLページを参照し、アプリケーションを表示します。

メモ:

ar-js-core.jsは、ar-js-viewer.jsの前に読み込む必要があります。
Internet Explorer 11が必要な場合は、ie-polyfills.jsをar-js-core.jsおよびar-js-viewer.jsの前に追加する必要があります。
Webサーバーによって、MIMETypeを「application/json」としてWeb構成ファイルに追加する必要があります。例えば、次のコードはIIS Webサーバーの構成を示しています。

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".rdlx-json" mimeType="application/json" />
    </staticContent>
</system.webServer>