V1
V1

ActiveReportsJS 与 Angular集成

本节中我们一起学习下,在Angular 框架中使用 ActiveReportsJS Viewer 控件来创建 Web应用。

必备文件

  • Node.js
  • npm
  • Angular-CLI - 使用命令为Angular应用程序安装全局工具
    npm install -g @angular/cli
    or
    yarn global add -g @angular/cli

以下步骤创建 Angular 应用程序.

  1. 通过在命令控制台中输入以下命令来新建Angular CLI应用程序
   ng new arjs-angular --defaults
  1. 将此目录设为工作目录
   cd arjs-angular
  1. 安装ActiveReportsJS包
   yarn add @grapecity/activereports
  1. 导入ActiveReportsJS样式为到 'src/styles.css'文件,为全局样式
   @import '@grapecity/activereports/styles/ar-js-viewer.css';

`

  1. 修改 'src/app/app.component.html' 文件创建 'ARJSviewerDiv' div:
   <h1>ActiveReportsJS Viewer using Angular-CLI</h1>
   <div id="ARJSviewerDiv" style="height: 100%;"><div>
  1. 修改 src/app/app.component.ts 文件:
   import { Component } from '@angular/core';
   import { Viewer } from '@grapecity/activereports/viewer';

   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     title = 'arjsviewer-angular-cli app';

     ngOnInit() {
       let v = new Viewer('#ARJSviewerDiv');
       v.open({
         Type: 'report',
         Body: {
           Name: 'Body',
           Type: 'section',
           ReportItems: [
             { Type: 'textbox', Name: 'textbox1', Value: 'Hello from ActiveReportsJS', Height: '10in' }
           ]
         },
         Name: 'Report'
       });
     }
   }
  1. 在命令控制台中,输入以下命令以运行该应用程序
   ng serve

您将在浏览器中中查看到运行的应用程序。