ActiveReportsJS在Angular中集成
1、首先使用 Angular CLI 命令创建项目ng new arjs-angular-viewer-app2、安装 ActiveReportsJS 包
可通过安装 @grapecity/activereports-angular npm 包. @grapecity/activereports 包提供核心功能，安装包执行以下命令：
npm install @grapecity/activereports-angular @grapecity/activereports或使用 yarn命令
yarn add @grapecity/activereports-angular @grapecity/activereports3、导入 ActiveReportsJS 样式
在 srs\styles.css 文件夹中导入以下文件.@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";4、注册 ActivereportsJS Angular 模块import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ActiveReportsModule } from "@grapecity/activereports-angular";
import { AppComponent } from "./app.component";
@NgModule({
declarations: ,
imports: ,
providers: [],
bootstrap: ,
})
export class AppModule {}5、添加 ActivereportsJS Angular 报表 Viewerimport { Component ,ViewChild} from '@angular/core';
import {
ViewerComponent,
AR_EXPORTS,
PdfExportService,
HtmlExportService,
XlsxExportService,
}
from "@grapecity/activereports-angular";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
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/ceshi.rdlx-json');/*进行报表展示*/
}
}
6、打开 src\app\app.component.css 文件，添加样式声明viewer-host#viewer-host {
width: 100%;
height: 100vh;
}7、打开src/app/app.component.html 进行报表展示div的设置<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()" > </gc-activereports-viewer></div>8、运行
执行 npm start 或 yarn start 或 ng serve 命令来运行程序。
9、展示样式
10、demo附件
页:
[1]