ActiveReportsJS 与 Angular集成

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

必要文件

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

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

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

   ng new arjs-angular --defaults

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

   cd arjs-angular

3. 安装ActiveReportsJS Angular包
   

   npm install @grapecity/activereports-angular

           or

   yarn add @grapecity/activereports-angular

4. 安装本地化功能模块

   npm install @grapecity/activereports-localization

           or

   yarn add @grapecity/activereports-localization

5. 修改 'src/app/app.component.html' 文件，如下:

   <gc-activereports-viewer [height]="height" [availableExports]="availableExports" (documentLoaded)="onDocumentLoaded($event)" #reportviewer></gc-activereports-viewer>

6. 在src/app/app.component.ts 文件，注册 ActiveReports 模块 :

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { ActiveReportsModule } from '@grapecity/activereports-angular';
   import '@grapecity/activereports-localization';

   import { AppComponent } from './app.component';

   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       ActiveReportsModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

7. 将设计好的报表文件放置到'src/assets'文件夹
8. 修改'src/app/app.component.ts'文件

   import { Component, ViewChild, AfterViewInit } from '@angular/core';
   import { ViewerComponent } from '@grapecity/activereports-angular';
   import { HtmlExportService, PdfExportService, XlsxExportService, AR_EXPORTS } from '@grapecity/activereports-angular';

   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
      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 implements AfterViewInit {
     @ViewChild('reportviewer', { static: false }) reportviewer: ViewerComponent;

     title = 'ActiveReports Angular App';
     height = '600px';
     availableExports = ['pdf', 'xlsx'];
     language = 'ja';
     onDocumentLoaded = function(a: any){
       console.log("document loaded", a);
     };

    ngAfterViewInit() {
       this.reportviewer.init.subscribe(() =>{
         //tslint:disable-next-line:max-line-length
         var htmlBtnIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24"><path class="gc-icon-color--text" d="M19 26v2c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h10v6c0 1.1.9 2 2 2h5v2H6c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h13zM13 3v6c0 .6.5 1 1 1h5l-6-7zM6 14c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h23c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2H6zm23 8v1h-5v-7h1v6h4zm-15-5v6h1v-6h2v-1h-5v1h2zm-4 2v-3h1v7h-1v-3H7v3H6v-7h1v3h3zm10.5 0L19 16h-1v7h1v-5l1 2h1l1-2v5h1v-7h-1l-1.5 3z" fill-rule="evenodd" clip-rule="evenodd" /></svg>';
         this.reportviewer.toolbar.addItem({
           key: '$html-export-btn',
           icon: {type:'svg', content:htmlBtnIcon },
           title: "HTML Export",
           enabled: true,
           action: () => { this.reportviewer.export('html', []).then(result => result.download("Exported_HTML")) }
         });
        this.reportviewer.open("assets/InvoiceList.rdlx-json");
       });
     }
   }

注意:
• 如果使用的是Angular7，需要src/app/app.module.ts文件中 @ViewChild 移除''标签。该标签是在 Angular8 以上引用的，所以在老版本中使用就会无法识别报错。
• 以上代码也主要演示了为Viewer添加导出功能。PDF和Excel 导出是Viewer 导出面板默认提供的。HTML 导出按钮是使用自定义的按钮，所以要保证 HTML导出功能正常执行，必须要在providers中注册非常重要。

9. 修改 'src/styles.css' 文件添加以下代码

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

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

   ng serve

11. 打开浏览器输入'localhost:4200' 您将在浏览器中中查看到运行的应用程序。