在Angular 框架中集成纯前端报表设计器

创建 Angular 应用

创建 Angular 应用最简单的方法是通过 Angular CLI 创建。

ng new arjs-angular-designer-app --defaults

安装 ActivereportsJS npm 包

报表设计器的资源包含在@grapecity/activereports-angularnpm 包中， @grapecity/activereports npm 包提供了核心的功能。在根目录下运行以下命令，安装需要的文件：

npm install @grapecity/activereports-angular

或者运行以下代码

yarn add @grapecity/activereports-angular

导入 ActiveReportsJS 样式

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

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

注册ActivereportsJS Angular模块

打开 src\app\app.module.ts 文件，用以下代码替换其内容。除了标准模块之外，代码主要注册了ActiveReportsModule模块。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
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 Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

添加设计器宿主元素

在项目的src\app\app.component.ts文件下添加以下代码，设计器的输出report属性，并指到report.rdlx-json

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:
    '<div id="designer-host"><gc-activereports-designer [report]="report"> </gc-activereports-designer></div>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  report = { id: 'assets/report.rdlx-json', displayName: 'my report' };
}

在 src\app\app.component.css 中为宿主元素添加样式文件

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

运行

使用 npm start 或 yarn start 命令运行时报错，如果编译失败了并提示JavaScript堆内存不足，这种情况下打开package.json 文件，并替换start脚本中的代码如下，然后重新执行命令 npm start或 yarn start：

node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve

ActiveReportsJS 设计器控件则会展现在项目中。