はじめに
ActiveReportsJSの参照
V3.0J
V3.0JV2.2JV2.1JV2JV1J

ActiveReportsJSの参照

アプリケーションでActiveReportsJSのビューワを使用するには、いくつかの参照をHTMLページに追加してインポートします。

  • ビューワに必要な最小限のファイル参照は次のとおりです。

    • 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

ローカルからビューワを参照する

ActiveReportsJSファイルをダウンロードして、アプリケーション内のフォルダにコピーします。ファイルを参照するには、scriptタグ内にコピーしたファイルへのパスを指定してHTMLページに追加します。

<head>
    <title>ActiveReportsJS</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="./css/ar-js-ui.css">
    <link rel="stylesheet" type="text/css" href="./css/ar-js-viewer.css">
    <script type="text/javascript" src="./scripts/ie-polyfills.js"></script> <!--to run in IE-->
    <script type="text/javascript" src="./scripts/ar-js-core.js"></script>
    <script type="text/javascript" src="./scripts/ar-js-viewer.js"></script>
    <script type="text/javascript" src="./scripts/ar-js-pdf.js"></script>
    <script type="text/javascript" src="./scripts/ar-js-xlsx.js"></script>
    <script type="text/javascript" src="./scripts/ar-js-html.js"></script>
    <script type="text/javascript" src="./scripts/locales/ar-js-locales.js"></script>
</head>
<body>
...
</body>

ActiveReportsJSパッケージは、次のWebサイトからダウンロードできます。https://www.grapecity.com/download/activereportsjs

CDNからビューワを参照する

CDNを使用する場合、ActiveReportsJSファイルをダウンロードせず、Web上のActiveReportsJSファイルを参照して、ActiveReportsJSを利用できます。 ActiveReportsJSファイルはcdn.grapecity.comでファイル配信されます。 CDNからファイルを参照するには、scriptタグ内にファイルへのパスを表すURL文字列を設定してHTMLページに追加します。

<head>
    <title>ActiveReportsJS</title>
    <meta charset="utf-8" />

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

npmからビューワを参照する

npmのActiveReportsJSは@grapecity/activereportsパッケージで表されます。他のnpmパッケージと同様に、使用するにはNodeJSがコンピュータにインストールされている必要があります。

次のコマンドを実行すると、ActiveReportsJSの最新のリリース版をnpmからインストールできます。 

npm install @grapecity/activereports

@grapecity/activereportsバンドルの構造

@grapecity/activereportsパッケージには、使用可能なすべてのモジュールが次のようにバンドルされます。

  • readme.md
  • license.md
  • package.json
  • index.js
  • index.d.ts
  • dist
    • ar-js-core.js
    • ar-js-designer.js
    • ar-js-html.js
    • ar-js-pdf.js
    • ar-js-viewer.js
    • ar-js-xlsx.js
    • ie-polyfills.js
  • styles
    • ar-js-designer.css
    • ar-js-ui.css
    • ar-js-viewer.css
    • dark-yellow-designer.css
    • dark-yellow-ui.css
    • dark-yellow-viewer.css
    • green-designer.css
    • green-ui.css
    • green-viewer.css
    • light-blue-designer.css
    • light-blue-ui.css
    • light-blue-viewer.css
  • lib
    • node_modules > @grapecity
      • ar-js-designer.d.ts
      • ar-js-html.d.ts
      • ar-js-html.js
      • ar-js-pagereport.d.ts
      • ar-js-pagereport.js
      • ar-js-pdf.d.ts
      • ar-js-pdf.js
      • ar-js-viewer.d.ts
      • ar-js-viewer.js
      • ar-js-xlsx.d.ts
      • ar-js-xlsx.js
    • ar-js-core.d.ts
    • ar-js-designer.d.ts
    • ar-js-html.d.ts
    • ar-js-pdf.d.ts
    • ar-js-viewer.d.ts
    • ar-js-xlsx.d.ts
  • core
    • index.js
    • index.d.ts
  • reportviewer
    • index.d.ts
    • index.js
  • pdfexport
    • index.d.ts
    • index.js
  • xlsxexport
    • index.d.ts
    • index.js
  • htmlexport
    • index.d.ts
    • index.js
  • reportdesigner
    • index.d.ts
    • index.js

@grapecity/activereportsバンドルの使用

ActiveReportsJSモジュールを使用には、次のようにimport文を使用できます。

  • すべてのモジュールをインポートするには、このコマンドを使用します。
import * as arjs from '@grapecity/activereports'; 
// or...
import { Viewer, Core, PdfExport} from '@grapecity/activereports';
  • バンドルサイズを減らすには、次のコマンドを使用します。
import * as Core from '@grapecity/activereports/core';
import { Viewer } from '@grapecity/activereports/viewer';