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正版授權，或了解更多產品信息請點擊