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

创建 Angular 应用

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

ng new arjs-designer-app

安装 ActivereportsJS

报表设计器的资源包含在 @grapecity/activereports npm 包里。在根目录下运行以下命令，安装需要的文件：

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

也可以使用 yarn命令：

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

添加设计器宿主元素

在项目的根目录下执行以下命令 通过从应用程序的根文件夹中运行以下命令，生成将承载并显示报告设计器的新组件。

ng generate component DesignerHost

添加 div 元素展示报表设计器 src\app\designer-host\designer-host.component.html

<div id="designer-host"></div>

为宿主元素添加样式 src\app\designer-host\designer-host.component.css

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

在 src\app\designer-host\designer-host.component.ts 文件中添加以下代码

import { Component, AfterViewInit } from "@angular/core";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

@Component({
  selector: "app-designer-host",
  templateUrl: "./designer-host.component.html",
  styleUrls: ["./designer-host.component.css"],
})
export class DesignerHostComponent implements AfterViewInit {
  constructor() {}

  ngAfterViewInit() {
    new ReportDesigner("#designer-host");
  }
}

为页面绑定设计器

在 src\app\app.component.html 文件中粘贴以下代码

<app-designer-host></app-designer-host>

导入需要的 src\styles.css

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

运行

使用 npm start 或 yarn start 或 ng serve 命令运行。 ActiveReportsJS 设计器控件则会展现在项目中。