ActiveReportsJS v2.0 beta版—ActiveReportsJS报表设计器：集成

ActiveReportsJS报表设计器：集成
ActiveReportsJS报表设计器是一个JavaScript组件，可以集成到各种前端解决方案中。 集成的确切方法取决于应用程序的体系结构。 本页提供了一些最流行的前端框架的使用。
设计器组件分布在[ [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) npm软件包中，因此，安装它是基于JS Bundle的应用程序如[Angular-CLI](https://cli.angular.io/), [CRA](https://create-react-app.dev/) 或者 [Vue-CLI](https://cli.vuejs.org/) 应用程序。
Angular 应用
报表设计器组件的初始化可以在托管组件的ngAfterViewInit回调中完成，例如：
js

1. import { Component, AfterViewInit } from "@angular/core";
   
2. import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
   
3. 
   
4. @Component({
   
5.   selector: "app-designer-host",
   
6.   template: "<div id='designer-host'></div>",
   
7.   styleUrls: ["./designer-host.component.css"],
   
8. })
   
9. export class DesignerHostComponent implements AfterViewInit {
   
10.   constructor() {}
    
11. 
    
12.   ngAfterViewInit() {
    
13.     new ReportDesigner("#designer-host");
    
14.   }
    
15. }

复制代码

React 应用
报表设计器组件的初始化可以在托管组件的`componentDidMount`处理程序中进行，也可以在使用依赖项空列表的`useEffect`钩子中完成，这样React引擎只需调用一次即可。
javascript

1. import React from "react";
   
2. import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
   
3. 
   
4. const initDesigner = (designerHostSelector) => {
   
5.   new ReportDesigner(designerHostSelector);
   
6. };
   
7. 
   
8. export const DesignerHost = () => {
   
9.   React.useEffect(() => initDesigner("#designer-host"), []);
   
10.   return <div id="designer-host"></div>;
    
11. };

复制代码

Vue 应用
报表设计器组件的初始化可以在`mount`钩子中完成，例如：
javascript

1. <template>
   
2.   <div id="designer-host"></div>
   
3. </template>
   
4. 
   
5. <script>
   
6. import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
   
7. 
   
8. export default {
   
9.   name: "DesignerHost",
   
10.   mounted: function() {
    
11.     new ReportDesigner("#designer-host");
    
12.   },
    
13. };
    
14. </script>

复制代码

Pure JavaScript 应用
纯JavaScript应用程序可以使用CDN上托管的脚本。
html

1. <script src="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/dist/ar-js-core.js"></script>
   
2. <script src="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/dist/ar-js-designer.js"></script>

复制代码

一旦引用了这些脚本，`GC.ActiveReports.ReportDesigner.Designer`构造函数将在全局范围内可用，并可用于初始化设计器组件，例如：
html

1. <div id="designer-host"></div>
   
2. 
   
3. <script>
   
4.   new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
   
5. </script>

复制代码