在Angular 框架集成报表Viewer

创建 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 Angular 报表 Viewer

打开 src\app\app.component.js(或src\app\app.component.ts)，修改代码如下：

@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;
  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;
}

运行

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

在Angular 框架集成 报表Viewer