ビューワの使用（Angular）

Angularアプリケーションを作成する

新しいAngularアプリケーションを作成する簡単な方法はnpmパッケージのAngular CLIを使用することです。

Angular CLIを使用するためには事前にNodeJSがコンピュータにインストールされている必要があります。

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

npm install -g @angular/cli

上記コマンドはグローバルにインストールする -g オプションを使用しているため、一度インストールした後の再実行は不要です。

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

ng new arjs-angular-viewer-app --defaults --no-standalone

ActiveReportsJSはクライアントサイド（ブラウザ上）で動作する帳票ライブラリのため、SSR（サーバーサイドレンダリング）では動作しませんのでご注意ください。

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

cd arjs-angular-viewer-app

次のコマンドを入力してActiveReportsJSのAngular対応パッケージ、およびビューワを日本語化するためのローカライズパッケージをインストールします。

npm install @mescius/activereportsjs-angular@5.2.3 @mescius/activereportsjs@5.2.5 @mescius/activereportsjs-i18n@5.2.5

ActiveReportsJSをAngularで動作させるため、ビルド構成をwebpackベースのものに切り替える必要があります。ビルド構成を切り替える方法は以下の通りです。
1. 作成したAngularプロジェクトのルートディレクトリに存在するangular.jsonファイルを開きます。
2. ビルド構成を以下のように修正します。
  "builder": "@angular-devkit/build-angular:application"
  ↓
  "builder": "@angular-devkit/build-angular:browser"
3. 同じようにエントリーポイントを以下のように修正します。
  "browser": "src/main.ts"
  ↓
  "main": "src/main.ts"
4. この修正によりangular.jsonファイルは以下のようになります。

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "main": "src/main.ts",
            // other options...
          },
          // other configurations...
        }
      }
    }
  }
}

src\styles.cssファイルに次のコードを追加します。

@import "@mescius/activereportsjs/styles/ar-js-ui.css";
@import "@mescius/activereportsjs/styles/ar-js-viewer.css";

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ActiveReportsModule } from '@mescius/activereportsjs-angular';
import { AppComponent } from './app.component';
import "@mescius/activereportsjs-i18n";

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

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

import { Component, ViewChild } from '@angular/core';
import {
  AR_EXPORTS,
  HtmlExportService,
  PdfExportService,
  ViewerComponent,
  XlsxExportService,
  TabularDataExportService
} from '@mescius/activereportsjs-angular';

@Component({
  selector: "app-root",
  template:
    '<div id="viewer-host"><gc-activereports-viewer language="ja" (init)="onViewerInit()"> </gc-activereports-viewer></div> ',
  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,
    },
    {
      provide: AR_EXPORTS,
      useClass: TabularDataExportService,
      multi: true,
    }
  ],
})
export class AppComponent {
  @ViewChild(ViewerComponent, { static: false }) reportViewer!: ViewerComponent;
  onViewerInit() {
    this.reportViewer.open("reports/quick-start-sample.rdlx-json");
  }
}

src\app\app.component.cssファイルを開き、viewer-host要素のスタイルを追加します。

#viewer-host {
  width: 100%;
  height: 100vh;
}

public\reportsディレクトリを作成し、サンプルレポートを作成するで作成したquick-start-sample.rdlx-jsonファイルを配置します。
次のコマンドを入力してAngularアプリケーションを実行します。

ng serve

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

quick-start-viewer

上記手順でブラウザ上に表示したレポートをPDFエクスポートすると、エクスポートしたPDFにて文字化けが発生します。これはPDFにフォントが埋め込まれていないため発生します。
エクスポートしたPDFで日本語を表示するための詳細は以下のトピック、およびナレッジベースをご参照ください。
フォント登録
PDFにフォントを埋め込む方法

注意事項

Angularアプリケーションを実行・またはビルドする際、JavaScriptのメモリ割当が不足し、ヒープエラーが発生する場合があります。

このエラーを回避するには、package.jsonファイルを開き、startとbuildスクリプトに次の設定を追加します。

"start": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng serve",
"build": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build",

ビューワの使用（Angular）

Angularアプリケーションを作成する

注意事項

関連トピック