ActiveReportsJS在Angular中集成

1、首先使用 Angular CLI 命令创建项目

1. ng new arjs-angular-viewer-app

复制代码

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

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

复制代码

或使用 yarn命令

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

复制代码

3、导入 ActiveReportsJS 样式

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

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

复制代码

4、注册 ActivereportsJS Angular 模块

1. import { BrowserModule } from "@angular/platform-browser";
   
2. import { NgModule } from "@angular/core";
   
3. import { ActiveReportsModule } from "@grapecity/activereports-angular";
   
4. 
   
5. import { AppComponent } from "./app.component";
   
6. 
   
7. @NgModule({
   
8.   declarations: [AppComponent],
   
9.   imports: [BrowserModule, ActiveReportsModule],
   
10.   providers: [],
    
11.   bootstrap: [AppComponent],
    
12. })
    
13. export class AppModule {}

复制代码

5、添加 ActivereportsJS Angular 报表 Viewer

1. import { Component ,ViewChild} from '@angular/core';
   
2. import {
   
3.   ViewerComponent,
   
4.   AR_EXPORTS,
   
5.   PdfExportService,
   
6.   HtmlExportService,
   
7.   XlsxExportService,
   
8. }
   
9. from "@grapecity/activereports-angular";
   
10. @Component({
    
11.   selector: 'app-root',
    
12.   templateUrl: './app.component.html',
    
13.   styleUrls: ['./app.component.scss'],
    
14.   providers: [
    
15.     {
    
16.       provide: AR_EXPORTS,
    
17.       useClass: PdfExportService,
    
18.       multi: true,
    
19.     },
    
20.     {
    
21.       provide: AR_EXPORTS,
    
22.       useClass: HtmlExportService,
    
23.       multi: true,
    
24.     },
    
25.     {
    
26.       provide: AR_EXPORTS,
    
27.       useClass: XlsxExportService,
    
28.       multi: true,
    
29.     },
    
30.   ]
    
31. })
    
32. 
    
33. export class AppComponent {
    
34.   @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
    
35.   onViewerInit() {
    
36.     this.reportViewer.open('/assets/ceshi.rdlx-json');/*进行报表展示*/
    
37.   }
    
38. }
    

复制代码

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

1. #viewer-host {
   
2.   width: 100%;
   
3.   height: 100vh;
   
4. }

复制代码

7、打开src/app/app.component.html 进行报表展示div的设置

1. <div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()" > </gc-activereports-viewer></div>

复制代码

8、运行

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

9、展示样式

10、demo附件