Web报表设计器集成使用

ActiveReportsJS报表设计器是一个JavaScript组件，可以集成到各种前端解决方案中。 集成的确切方法取决于应用程序的体系结构。 本页提供了一些最流行的前端框架的使用。 设计器组件分布在[ @grapecity/activereports npm软件包中，因此，安装它是基于JS Bundle的应用程序如Angular-CLI, CRA 或者 Vue-CLI 应用程序。

Angular 应用

报表设计器组件的初始化可以在托管组件的ngAfterViewInit回调中完成，例如：

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");
  }
}

查看 入门 页面，以获取在Angular应用程序中使用ActiveReportsJS报表设计器的完整教程。 请访问 功能演示 查看有关完整实例。

React 应用

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

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>;
};

查看 入门 页面，以获取在React应用程序中使用ActiveReportsJS报表设计器的完整教程。 请访问 现场演示 查看有关完整实例。

Vue 应用

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

<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>

检查 Getting Started 页面，以获取在React应用程序中使用ActiveReportsJS报表设计器的完整教程。 访问 Live Demo 有关完整实例。

Pure JavaScript 应用

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

<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构造函数将在全局范围内可用，并可用于初始化设计器组件，例如：

<div id="designer-host"></div>

<script>
  new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
</script>

查看 入门 在纯JavaScript应用程序中使用ActiveReportsJS报表设计器的完整教程的完整页面。 请访问 功能演示 查看有关完整实例。