ビューワの組み込み（JavaScript）

このトピックではビューワについて説明します。ビューワをWebアプリケーションに組み込む方法については、クイックスタート > ビューワの使用 > JavaScriptを参照してください。

スタイルとJSライブラリ

Webアプリケーションでビューワを使用するために、次のスタイルとJSライブラリを含める必要があります。

ar-js-ui.css（必須）
ar-js-viewer.css（必須）
ar-js-core.js（必須）
ar-js-viewer.js（必須）
ar-js-pdf.js（任意）
ar-js-xlsx.js（任意）
ar-js-html.js（任意）
ar-js-tabular-data.js（任意）

ローカルファイルを参照

トライアル版から、上記のスタイルとJSライブラリをダウンロードし、アプリケーション内のフォルダにコピーします。コピーしたファイルを参照するため、scriptタグ内にコピーしたファイルへのパスを指定してHTMLページに追加します。

<link
  rel="stylesheet"
  href="./css/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="./css/ar-js-viewer.css"
  type="text/css"
/>
<script src="./scripts/ar-js-core.js"></script>
<script src="./scripts/ar-js-viewer.js"></script>
<script src="./scripts/ar-js-pdf.js"></script>
<script src="./scripts/ar-js-xlsx.js"></script>
<script src="./scripts/ar-js-html.js"></script>
<script src="./scripts/ar-js-tabular-data.js"></script>

CDNから参照

スタイルとJSライブラリを参照する簡単な方法は、以下のようにCDN参照を使用することです。

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

npmからインストールして参照

スタイルとJSライブラリはnpmを利用してインストールすることができます。

@mescius/activereportsjsパッケージをプロジェクトにインストールし、以下フォルダのスタイルとJSライブラリを参照します。

スタイル
- node_modules@mescius\activereportsjs\styles
JSライブラリ
- node_modules@mescius\activereportsjs\dist

ビューワの初期化

必要なスタイルとJSライブラリを読み込み、ホスト要素のセレクタを渡してActiveReports.Viewerクラスを生成することで、ビューワを初期化できます。

<body>
    <div id="viewer-host"></div>
    <script>
        var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host");
    </script>
</body>

ActiveReports.Viewerのインスタンスは、外観のカスタマイズ、レポートのプレビュー、印刷、エクスポートができるメソッドとプロパティを提供します。