[]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

ビューワの使用（JavaScript）

JavaScriptアプリケーションは、HTMLページとJavaScriptコードで構成されます。HTMLページは任意のテキストエディタで作成できます。

以下は、JavaScriptアプリケーションを作成するサンプルです。


デザイナアプリを使用して作成したレポート(rdlx-jsonファイル)は外部ファイルのため、ブラウザのセキュリティ制約により、そのままではビューワに読み込むことができません。

外部ファイルを読み込むため、Expressを使用してローカルのWebサーバーを作成し、サーバー経由でファイルを読み込みます。

以下の手順では、Expressのインストールをnpmを使用して行うため、事前にNodeJSがコンピュータにインストールされている必要があります。

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

mkdir arjs-js-viewer-app

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

cd arjs-js-viewer-app

  1. コマンドプロンプトで次のコマンドを入力してpackage.jsonファイルを作成します。 -y オプションを指定することで全て既定値で作成します。

npm init -y

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

npm install express

  1. コマンドプロンプトで次のコマンドを入力してActiveReportsJSパッケージ、およびビューワを日本語化するためのローカライズパッケージをインストールします。

npm install @grapecity/activereports @grapecity/activereports-localization

  1. index.htmlファイルを作成し、以下内容を設定します。

<!DOCTYPE html>

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

    <link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-ui.css" />
    <link rel="stylesheet" href="./node_modules/@grapecity/activereports/styles/ar-js-viewer.css" />
    <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>
    <script type="text/javascript" src="./node_modules/@grapecity/activereports/dist/ar-js-pdf.js"></script>
    <script type="text/javascript" src="./node_modules/@grapecity/activereports/dist/ar-js-xlsx.js"></script>
    <script type="text/javascript" src="./node_modules/@grapecity/activereports/dist/ar-js-html.js"></script>
    <script type="text/javascript" src="./node_modules/@grapecity/activereports/dist/ar-js-tabular-data.js"></script>
    <script type="text/javascript" src="./node_modules/@grapecity/activereports-localization/dist/ar-js-locales.js"></script>
    <style>
      #viewer-host {
        margin: 0 auto;
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="viewer-host"></div>
    <script>
      var viewer = new ActiveReports.Viewer("#viewer-host", { language: "ja" });
      viewer.open("./reports/quick-start-sample.rdlx-json");
    </script>
  </body>
</html>

  1. reportsディレクトリを作成し、サンプルレポートを作成するで作成したquick-start-sample.rdlx-jsonファイルを配置します。

  2. 元のディレクトリに戻り、以下の内容で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);

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

node .\server.js

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


関連トピック