ビューワの使用（JavaScript）

JavaScriptアプリケーションを作成する

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

<!DOCTYPE html>

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

    <title>ARJS Report Viewer</title>
    <meta name="description" content="ARJS Report viewer" />
    <meta name="author" content="GrapeCity" />
  </head>

  <body></body>
</html>

ビューワを参照する

ビューワはCDN、およびnpmにて公開されています。JavaScriptアプリケーションにビューワを組み込む簡単な方法は、headタグ内にCDNへの参照を追加することです。

<!-- CDN参照をご利用する場合は以下URLの"X.X.X"を使用するActiveReportsJSのバージョンに置き換えてご利用ください -->
<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/X.X.X/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/X.X.X/styles/ar-js-viewer.css"
  type="text/css"
/>
<script src="http://cdn.grapecity.com/activereportsjs/X.X.X/dist/ar-js-core.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/X.X.X/dist/ar-js-viewer.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/X.X.X/dist/ar-js-pdf.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/X.X.X/dist/ar-js-xlsx.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/X.X.X/dist/ar-js-html.js"></script>

ビューワのホスト要素を追加する

ビューワをホストするdiv要素をbodyタグ内に追加します。

<div id="viewer-host"></div>

headタグ内にviewer-host要素のスタイルを追加します。

<style>
  #viewer-host {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
  }
</style>

ビューワを初期化する

以下のスクリプトを、bodyタグ内のviewer-host要素の後ろに追加します。このスクリプトはviewer-host要素が描画された後に実行されます。

<script>
  var viewer = new ActiveReports.Viewer("#viewer-host", { language: "ja" });
  viewer.open({
    Type: "report",
    Body: {
      Name: "Body",
      Type: "section",
      ReportItems: [
        {
          Type: "textbox",
          Name: "textbox1",
          Value: "Hello, ActiveReportsJS Viewer",
          Height: "10in",
        },
      ],
    },
    Name: "Report",
  });
</script>

アプリケーションを実行する

ブラウザで作成したHTMLページを表示します。ページ上に「Hello, ActiveReportsJS Viewer.」と書かれたレポートとビューワが表示されます。
ツールバーのボタンを使用したり、レポートをエクスポートしたりなど、基本的な機能を確認できます。