ビューワの使用（Angular）

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

新しいAngularアプリケーションを作成する簡単な方法はnpmパッケージのAngular CLIを使用することです。事前にインストールされている必要があります。
次のコマンドを入力して、新しいAngularアプリケーションを作成します。

ng new arjs-angular-viewer-app

npmパッケージをインストールする

Angular対応パッケージはnpmの@grapecity/activereports-angularパッケージに公開されています。このパッケージをインストールするには、アプリケーションのルートフォルダから次のコマンドを入力します。

npm install @grapecity/activereports-angular

また、ビューワを日本語で表示するため、ローカライズモジュールをインストールします。次のコマンドを入力します。

npm install @grapecity/activereports-localization

スタイルをインポートする

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

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

ActiveReportsModuleのインポート

src\app\app.module.tsファイルを開き、ActiveReportsModule、およびローカライズモジュールをインポートします。

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.jsファイルを開き、以下の内容を設定します。typescriptを使用する場合はsrc\app\app.component.tsファイルを開き、以下の内容を設定します。

@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,
    },
  ],
})
export class AppComponent {
  @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
  report = {
    Type: "report",
    Body: {
      Name: "Body",
      Type: "section",
      ReportItems: [
        {
          Type: "textbox",
          Name: "textbox1",
          Style: { FontSize: "18pt" },
          Value: "Hello, ActiveReportsJS Viewer",
          Height: "10in",
        },
      ],
    },
    Name: "Report",
  };
  onViewerInit() {
    this.reportViewer.open(this.report);
  }
}

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

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

アプリケーションを実行する

次のコマンドを入力してAngularアプリケーションを実行します。ページ上に「Hello, ActiveReportsJS Viewer.」と書かれたレポートとビューワが表示されます。
ツールバーのボタンを使用したり、レポートをエクスポートしたりなど、基本的な機能を確認できます。

ng serve