ActiveReportsJS v2.0 beta版—ActiveReportsJS报表设计器：集成
本帖最后由 KearneyKang 于 2020-11-17 17:15 编辑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
import { Component, AfterViewInit } from "@angular/core";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
@Component({
selector: "app-designer-host",
template: "<div id='designer-host'></div>",
styleUrls: ["./designer-host.component.css"],
})
export class DesignerHostComponent implements AfterViewInit {
constructor() {}
ngAfterViewInit() {
new ReportDesigner("#designer-host");
}
}React 应用
报表设计器组件的初始化可以在托管组件的`componentDidMount`处理程序中进行，也可以在使用依赖项空列表的`useEffect`钩子中完成，这样React引擎只需调用一次即可。
javascript
import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
const initDesigner = (designerHostSelector) => {
new ReportDesigner(designerHostSelector);
};
export const DesignerHost = () => {
React.useEffect(() => initDesigner("#designer-host"), []);
return <div id="designer-host"></div>;
};Vue 应用
报表设计器组件的初始化可以在`mount`钩子中完成，例如：
javascript
<template>
<div id="designer-host"></div>
</template>
<script>
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
export default {
name: "DesignerHost",
mounted: function() {
new ReportDesigner("#designer-host");
},
};
</script>Pure JavaScript 应用
纯JavaScript应用程序可以使用CDN上托管的脚本。
html
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/dist/ar-js-core.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/dist/ar-js-designer.js"></script>一旦引用了这些脚本，`GC.ActiveReports.ReportDesigner.Designer`构造函数将在全局范围内可用，并可用于初始化设计器组件，例如：
html
<div id="designer-host"></div>
<script>
new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
</script>
页:
[1]