半岛外围网上直营

ActiveReportsJS 是一款基于 HTML5 的纯前端报表控件，采用拖拽式报表开发模式，无需任何服务器和组件支持，即可在 Mac、Linux 和 Windows 平台中，轻松设计中国式复杂报表、类 Excel/Word 报表、DashBoard 仪表板等多种报表类型。其完美继承了 .NET报表控件 ActiveReports 的报表设计能力和高效的报表开发引擎，并可深度集成并全面嵌入到 Vue、Angular、React 等前端开发框架中。

在本文中，我们主要介绍了如何在Angular 框架中使用 ActiveReportsJS Viewer 控件来创建 Web应用。

点击下载ActiveReportsJS正式版

必要文件

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

1、通过在命令控制台中输入以下命令来新建Angular CLI应用程序

ng new arjs-angular --defaults

2、将此目录设为工作目录

cd arjs-angular

3、将此目录设为工作目录

yarn add @grapecity/activereports

4、导入ActiveReportsJS样式为到 'src/styles.css'文件，为全局样式

@import '@grapecity/activereports/styles/ar-js-viewer.css';

5、修改 'src/app/app.component.html' 文件创建 'ARJSviewerDiv' div:

   <h1>ActiveReportsJS Viewer using Angular-CLI</h1>
   <div id="ARJSviewerDiv" style="height: 100%;"><div>

6、修改 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'
       });
     }
   }

7、在命令控制台中，输入以下命令以运行该应用程序

   ng serve

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

本教程内容到这里就完结了，想要了解更多产品资讯请继续关注我们慧都网~如果您对轻量级Web报表工具ActiveReportsJS感兴趣，您可以点击这里下载试用版~

相关内容推荐：

ActiveReportsJS入门教程：如何在PureJS 框架中使用 ActiveReportsJS创建 Web应用

轻量级Web报表工具ActiveReportsJS入门教程：如何使用设计器创建报表

纯前端报表控件 ActiveReportsJS入门教程：如何将ActiveReportsJS的强大功能嵌入到Web应用

想要购买ActiveReportsJS正版授权，或了解更多产品信息请点击