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の様々な機能をブラウザ上で手軽に試せるデモアプリケーションを公開しています。こちらもぜひご覧ください。