Angular & ActiveReportsJSクイックスタート

JavaScript帳票ライブラリ「ActiveReportsJS（アクティブレポートJS）」では、Angular、React、Vue.jsといった、主要なJavaScriptフレームワークに対応したパッケージをそれぞれ用意しています。今回はその中からAngularでActiveReportsJSを使う方法をご紹介いたします。

※ 以下、Node.jsが環境にインストールされていることが前提となります。インストールしていない場合は、あらかじめこちらより推奨版をインストールしてください。また、エディタとしてVisual Studio Codeを使用します。

Angular CLIのインストール

まずはAngularアプリの作成や実行など、Angularでの開発に欠かせないコマンドラインツール「Angular CLI」をインストールします。
※ すでにインストール済みの場合、この手順は不要です。

なお、2020年10月時点でのAngularの最新バージョンは「Angular 10」ですが、この時点でActiveReportsJSがサポートしているAnuglarのバージョンは「Angular 9」までなので、今回はバージョンを指定してインストールします。

ターミナルやコマンドプロンプトを開き、以下のコマンドを実行して、Angular CLIパッケージをグローバルにインストールします。

npm install -g @angular/cli@9.1.12

バージョン指定せず、最新版でインストールする場合は以下のようなコマンドになります。

npm install -g @angular/cli

インストールが完了したら、以下のコマンドでAngular CLIのバージョン等を確認できます。

ng --version

Angularアプリケーションの作成

以下のコマンドを実行して、Angularアプリケーションを作成します。アプリケーションのオプションをいくつか質問されますが、全てEnterキーを押して既定値を選択します。

ng new angular-app

以上でAngularアプリケーションのひな形は完成です。作成されたアプリケーションのフォルダに移動し、ng serveコマンドで実行します。

cd angular-app
ng serve --open

ブラウザでhttp://localhost:4200/が自動的に開き、以下のようなページが表示されます。

ActiveReportsJSのパッケージのインストール

以下のコマンドを実行して、ActiveReportsJSのパッケージをアプリケーションにインストールします。

npm install @grapecity/activereports-angular

続いて以下のコマンドを実行して、ActiveReportsJSの日本語化パッケージをアプリケーションにインストールします。

npm install @grapecity/activereports-localization

ソースコードの修正

src/app/app.component.htmlファイルの中身を以下の内容に書き換えます。

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

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 { }

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 = '100vh';
 language = 'ja';

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

ngAfterViewInit() {
   this.reportviewer.init.subscribe(() =>{
     this.reportviewer.registerFont({name: 'IPAゴシック', source: 'assets/ipag.ttf'}).then(()=>
       this.reportviewer.open("assets/Invoice_green_ipa.rdlx-json"))
    });
  }
}

src/styles.cssファイルに以下の内容を追加します。

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

レポートファイルとフォントファイルの配置

表示するレポートファイルはsrc/assetsフォルダ配下に配置します。また、PDFエクスポートを行う場合はフォントファイルも同フォルダに配置します。

以下のGitHubで公開しているサンプルレポート（Invoice_green_ipa.rdlx-json）と、フォントファイル（ipag.ttf）をダウンロードして、src/assetsフォルダ配下にコピーして下さい。

アプリケーションの実行

以上でアプリケーションの作成は完了です。以下のコマンドを実行して、ローカル環境でアプリケーションを実行します。

ng serve --open

ブラウザでhttp://localhost:4200/が自動的に開き、以下のようにレポートが表示されます。

サイドバーからPDFなど各種形式へのエクスポートも実行可能です。

手軽に試せるデモアプリケーションを公開中

製品Webサイトでは、Angularでの使用方法を含めた、ActiveReportsJSの様々な機能をブラウザ上で手軽に試せるデモアプリケーションを公開しています。こちらもぜひご覧ください。