ビューワの使用（JavaScript）
JavaScriptアプリケーションは、HTMLページとJavaScriptコードで構成されます。HTMLページは任意のテキストエディタで作成できます。
以下は、JavaScriptアプリケーションを作成するサンプルです。
デザイナアプリを使用して作成したレポート(rdlx-jsonファイル)は外部ファイルのため、ブラウザのセキュリティ制約により、そのままではビューワに読み込むことができません。
外部ファイルを読み込むため、Expressを使用してローカルのWebサーバーを作成し、サーバー経由でファイルを読み込みます。
以下の手順では、Expressのインストールをnpmを使用して行うため、事前にNodeJSがコンピュータにインストールされている必要があります。
- コマンドプロンプトで次のコマンドを入力して、アプリケーションを含む新しいディレクトリを作成します。
mkdir arjs-js-viewer-app
- 作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。
cd arjs-js-viewer-app
- コマンドプロンプトで次のコマンドを入力してpackage.jsonファイルを作成します。 -y オプションを指定することで全て既定値で作成します。
npm init -y
- コマンドプロンプトで次のコマンドを入力してExpressをインストールします。
npm install express
- コマンドプロンプトで次のコマンドを入力してActiveReportsJSパッケージ、およびビューワを日本語化するためのローカライズパッケージをインストールします。
npm install @grapecity/activereports @grapecity/activereports-localization
- 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/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>
<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-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>
reportsディレクトリを作成し、サンプルレポートを作成するで作成したquick-start-sample.rdlx-jsonファイルを配置します。
元のディレクトリに戻り、以下の内容で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」を参照し、アプリケーションを表示します。
