デザイナの組み込み（JavaScript）

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

スタイルとJSライブラリ

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

ar-js-core.js（必須）
ar-js-designer.js（必須）
ar-js-ui.css（必須）
ar-js-designer.css（必須）

ローカルファイルを参照

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

<link
  rel="stylesheet"
  href="./css/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="./css/ar-js-designer.css"
  type="text/css"
/>
<script src="./scripts/ar-js-core.js"></script>
<script src="./scripts/ar-js-designer.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-designer.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-designer.js"></script>

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

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

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

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

デザイナの初期化

必要なスタイルとJSライブラリを読み込み、ホスト要素のセレクタを渡してMESCIUS.ActiveReportsJS.ReportDesigner.Designerクラスを生成することで、デザイナを初期化できます。

<body>
    <div id="designer-host"></div>
    <script>
        var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer("#designer-host");
    </script>
</body>

デザイナのインスタンスは、レポートの読み込み、保存、およびプレビューができるメソッドとプロパティを提供します。