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

このトピックではAngularフレームワークでビューワを使用する際のラッパーコンポーネントであるAngular対応パッケージについて説明します。Angular対応パッケージからビューワをWebアプリケーションに組み込む方法については、クイックスタート > ビューワの使用 > Angularを参照してください。

npmからインストール

Angular対応パッケージはnpmを利用してインストールすることができます。
@grapecity/activereports-angularパッケージをプロジェクトにインストールすると、ビューワを使用できます。
Angular対応パッケージは@grapecity/activereportsパッケージに依存しており、Angular対応パッケージをインストールすると同時にインストールされます。

ActiveReportsModuleのインポート

Angular対応パッケージのビューワはActiveReportsModuleに存在するため、次のようにアプリケーションのルートモジュール、またはビューワを使用する他のモジュールにインポートする必要があります。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ActiveReportsModule } from "@grapecity/activereports-angular";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ActiveReportsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Angularのビューワ

Angularのビューワはgc-activereports-viewerタグを使用してHTMLで参照できます。また、次のプロパティを使用して外観を設定できます。

上記のプロパティに動的な値をバインドして、ビューワのインターフェイスをカスタマイズすることができます。

また、ビューワは次のイベントを提供します。

親コンポーネントは、ViewChildインジェクションを使用してメソッドとプロパティにアクセスできます。

@ViewChild(ViewerComponent, , { static: false }) reportViewer: ViewerComponent;

エクスポートサービス

Angularのビューワは、レポートをPDF、XLSX、HTML形式にエクスポートできます。このサービスはビューワのホストコンポーネントまたはそのモジュール、またはアプリケーションのルートモジュールに挿入する必要があります。
次のコードはルートモジュールにエクスポートサービスを挿入する方法を示しています。

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ActiveReportsModule],
  providers: [    {
    provide: AR_EXPORTS,
    useClass: PdfExportService,
    multi: true
  },
  {
    provide: AR_EXPORTS,
    useClass: HtmlExportService,
    multi: true
  },
  {
    provide: AR_EXPORTS,
    useClass: XlsxExportService,
    multi: true
  }
],
  bootstrap: [AppComponent]
})
export class AppModule {}

また、ビューワのavailableExportsプロパティを使用して、利用可能なエクスポート形式をフィルタできます。

関連トピック

• 表示言語を設定する
• エクスポートについて
• 印刷
• テーマ
• ツールバーのカスタマイズ
• クイックスタート[デモ]