開発者ガイド
Webデザイナコンポーネント
Webデザイナコンポーネントの組み込み
JavaScript
V2.1J
V3.0JV2.2JV2.1JV2JV1J

デザイナの組み込み（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.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-designer.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-designer.js"></script>

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

スタイルとJSライブラリはnpmを利用してインストールすることができます。
@grapecity/activereportsパッケージをプロジェクトにインストールし、以下フォルダのスタイルとJSライブラリを参照します。

  • スタイル
    • node_modules\@grapecity\activereports\styles
  • JSライブラリ
    • node_modules\@grapecity\activereports\dist

デザイナの初期化

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

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

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