ビューワの組み込み（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で参照できます。また、次のプロパティを使用して外観を設定できます。

プロパティ	設定値	デフォルト値	説明
width	CSS単位	'100%'	ビューワの幅を設定します。
height	CSS単位	'100%'	ビューワの高さを設定します。
language	string	'en'	ビューワの表示言語を設定します。詳細については、表示言語を設定するを参照してください。
toolbarVisible	boolean	true	ツールバーを表示するかを設定します。
sidebarVisible	boolean	true	サイドバーを表示するかを設定します。
parameterPanelLocation	'auto' \| 'default' \| 'top' \| 'bottom'	'auto'	パラメータパネルの表示位置を設定します。
panelsLayout	'sidebar' \| 'toolbar'	'sidebar'	検索およびエクスポートのパネル位置を設定します。
availableExports	string配列 'pdf' \| 'xlsx' \| 'html'\| 'tabular-data'		ユーザーが使用できるエクスポート形式をフィルタする場合に設定します。詳細については、エクスポートサービスセクションを参照してください。
exportSettings	Object		エクスポート設定を定義します。詳細については、エクスポート設定を参照してください。
toolbarLayout	Object		ツールバー設定を定義します。詳細については、ツールバーのカスタマイズを参照してください。
mouseMode	'Pan' \| 'Selection'	'Pan'	ビューワのマウスモードを設定します。
zoom	'FitWidth' \| 'FitPage' \| number	100	レポートの表示倍率を設定します。
fullscreen	boolean	false	Trueに設定されている場合、ビューワをフルスクリーンで表示します。
viewMode	'Continuous' \| 'SinglePage'	'Continuous'	複数ページのレポートを表示するモードを設定します。
renderMode	'Galley' \| 'Paginated'	'Paginated'	ビューワの描画モードを設定します。
errorHandler	function		ビューワでエラーが発生したときに呼び出されるコールバック。
showParametersOnOpen	'auto' \| 'always'	'auto'	'always'に設定すると、レポートパラメータに初期値が設定されている場合でも、レポートの読込時にパラメータパネルが自動的に表示されます。

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

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

イベント	パラメータ	説明
init		ビューワが生成されたときに発生します。
reportLoaded	ReportLoadedEventArgs	ビューワにレポートを読み込み、レンダリングが開始される前に発生します。
documentLoaded	DocumentLoadedEventArgs	レポートのレンダリングが完了した時に発生します。

親コンポーネントは、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
  }
  },
    provide: AR_EXPORTS,
    useClass: TabularDataExportService,
    multi: true
  }
],
  bootstrap: [AppComponent]
})
export class AppModule {}

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

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

npmからインストール

ActiveReportsModuleのインポート

Angularのビューワ

エクスポートサービス

関連トピック