[{"id":"3d06deaa-2e4d-479c-b95a-2dcb8abfc887","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"e822faa9-5b39-474c-8f04-d95dcd787a4e","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"091ec731-67fd-4a2a-a703-3728fe885481","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"c4d1bedb-691f-49bb-96ed-65f91b580b0c","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"83de1fff-256a-4bcf-9d47-c12ac032a9e4","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"844918ae-7b53-4e16-8a83-4d9203303aa2","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"eaf39ba6-65df-466b-bc99-d40907e64e8e","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"65c6fd4f-dc15-4112-b00a-45207cea85fc","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"460f9118-8a3c-40da-8eba-63a1ba9df454","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"d2fc8bc1-89bf-4483-a3c2-be4be40fff31","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"b63907ef-97db-412d-b9e9-61e1cb319d27","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"d7124176-a563-4cf4-8f9a-f8ae3af669ac","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"f1ef6a79-1200-4477-bf3b-d1f4b52bf586","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"4b1a964f-7b24-4943-a2e2-77ff450e1f1d","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"ab703b5b-c2f4-48dc-925d-878261bce75f","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"a4de2920-3951-4baf-a478-888961b5e3c4","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]}]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

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

    • ar-js-tabular-data.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/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/ar-js-tabular-data.js"></script>
    <script type="text/javascript" src="./scripts/locales/ar-js-locales.js"></script>
</head>
<body>
...
</body>

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/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-tabular-data.js"></script>
    <script type="text/javascript" src="https://cdn.grapecity.com/activereportsjs/X.X.X/dist/locales/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-tabular-data.js

    • ar-js-viewer.js

    • ar-js-xlsx.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-tabular-data.d.ts

      • ar-js-tabular-data.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-tabular-data.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

  • tabulardataexport

    • 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';