在 Angular 应用中展示 ActiveReportsJS 报表

创建 Angular项目

使用 Angular CLI 命令创建

ng new arjs-angular-viewer-app

安装 ActiveReportsJS 包

可通过安装 @grapecity/activereports-angular npm 包. @grapecity/activereports 包提供核心功能，安装包执行以下命令：

npm install @grapecity/activereports-angular @grapecity/activereports

或使用 yarn命令

yarn add @grapecity/activereports-angular @grapecity/activereports

导入 ActiveReportsJS 样式

在 srs\styles.css 文件夹中导入以下文件.

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

注册 ActivereportsJS Angular 模块

打开 src\app\app.module 文件并注册ActiveReportsModule 模块

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

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

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

添加 ActiveReportsJS 报表文件

ActiveReportsJS 使用 JSON格式和rdlx-json扩展用于报表模板文件。在应用程序的src\assets文件夹中，创建名为report.rdlx-json的新文件，并在该文件中插入以下JSON内容。

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

添加 ActivereportsJS Angular 报表 Viewer

打开 src\app\app.component.js(或src\app\app.component.ts)，修改代码如下，init 事件的处理器将会打开上一步创建的报表，该组件也可以注入ActiveReportsJS Angular 导出服务实现指定的报表导出格式。

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

@Component({
  selector: "app-root",
  template:
    '<div id="viewer-host"><gc-activereports-viewer (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;
  onViewerInit() {
    this.reportViewer.open('assets/report.rdlx-json');
  }
}

打开 src\app\app.component.css 文件，添加样式声明viewer-host

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

运行和调试

执行 npm start 或 yarn start 或 ng serve 命令来运行程序。