ビューワの組み込み（Angular）
このトピックではAngularフレームワークでビューワを使用する際のラッパーコンポーネントであるAngular対応パッケージについて説明します。Angular対応パッケージからビューワをWebアプリケーションに組み込む方法については、クイックスタート > ビューワの使用 > Angularを参照してください。
npmからインストール
Angular対応パッケージはnpmを利用してインストールすることができます。
@mescius/activereportsjs-angularパッケージをプロジェクトにインストールすると、ビューワを使用できます。
Angular対応パッケージは@mescius/activereportsパッケージに依存しており、Angular対応パッケージをインストールすると同時にインストールされます。
ActiveReportsModuleのインポート
Angular対応パッケージのビューワはActiveReportsModuleに存在するため、次のようにアプリケーションのルートモジュール、またはビューワを使用する他のモジュールにインポートする必要があります。
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ActiveReportsModule } from "@mescius/activereportsjs-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 | ビューワにレポートを読み込み、レンダリングが開始される前に発生します。 | |
documentLoaded | レポートのレンダリングが完了した時に発生します。 |
親コンポーネントは、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プロパティを使用して、利用可能なエクスポート形式をフィルタできます。