AngularでActiveReportsJSを使用する

Angularフレームワークで、ActiveReportsJSを使用する方法を説明します。

以下の手順では、Angular-CLIのインストールをnpmを使用して行うため、事前にNodeJSがコンピュータにインストールされている必要があります。

コマンドプロンプトで次のコマンドを入力して、Angular-CLIをインストールします。

npm install -g @angular/cli

Angularアプリケーションでビューワを表示し、レポートを開く方法について説明します。

1. コマンドプロンプトで次のコマンドを入力して、新しいAngularアプリケーションを作成します。
   

ng new arjs-angular --defaults

2. 作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。

cd arjs-angular

3. コマンドプロンプトで次のコマンドを入力して、ActiveReportsJSのAngular対応パッケージをインストールします。

npm install @grapecity/activereports-angular

4. コマンドプロンプトで次のコマンドを入力して、ActiveReportsJSの日本語化パッケージをインストールします。

npm install @grapecity/activereports-localization

5. Angularアプリケーションの'src/app/app.component.html'ファイルを開き、以下の内容を設定します。

<gc-activereports-viewer [height]="height" [language]="language" (documentLoaded)="onDocumentLoaded($event)" #reportviewer></gc-activereports-viewer>

6. 'src/app/app.module.ts'ファイルを開き、以下の内容を設定します。

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

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

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

7. 表示するレポートをアプリケーションの'src/assets'フォルダに配置します。ここでは、作成済のレポートとして、製品サンプルに含まれる'InvoiceList.rdlx-json'を使用します。

8. 'src/app/app.component.ts'ファイルを開き、以下の内容を設定します。

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ViewerComponent } from '@grapecity/activereports-angular';
import { HtmlExportService, PdfExportService, XlsxExportService, AR_EXPORTS } from '@grapecity/activereports-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [
        {
            provide: AR_EXPORTS,
            useClass: PdfExportService,
            multi: true
        },
        {
            provide: AR_EXPORTS,
            useClass: HtmlExportService,
            multi: true
        },
        {
            provide: AR_EXPORTS,
            useClass: XlsxExportService,
            multi: true
        }
    ]
})

export class AppComponent implements AfterViewInit {
    @ViewChild('reportviewer', { static: false }) reportviewer: ViewerComponent;

    title = 'ActiveReports Angular App';
    height = '600px';
    language = 'ja';

    onDocumentLoaded = function(a: any){
        console.log("document loaded", a);
    };

    ngAfterViewInit() {
        this.reportviewer.init.subscribe(() =>{
            this.reportviewer.open("assets/InvoiceList.rdlx-json");
        });
    }
}

　 メモ: エクスポート機能を動作させるには、「providers」配列にエクスポートプロバイダを登録する必要があります。

9. 'src/styles.css'ファイルを開き、以下の内容を設定します。

@import '@grapecity/activereports/styles/ar-js-viewer.css';

10. コマンドプロンプトで次のコマンドを入力して、Webサーバーを起動します。

ng serve

11. ブラウザで'localhost:4200'を参照し、アプリケーションを表示します。