ActiveReportsJS JavaScript报表设计器

本章主要介绍了在 JavaScript项目中集成 Web设计器，可以参考设计器入门集成了解完整的操作步骤

ActiveReportsJS 脚本和样式文件

为了保证 ActiveReportsJS 设计器控件能够在纯 JavaScript 应用中正常执行，必须在项目中引入以下文件：

ar-js-core.js: 必要，提供核心功能
ar-js-designer.js:必要，提供设计器核心功能
ar-js-ui.css: 必要，提供报表的基本布局UI
ar-js-designer.css: 必要，保证了设计器的默认布局UI

最简单的方式是直接引用CDN 地址：

<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/2.2.0/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/2.2.0/styles/ar-js-designer.css"
  type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/2.2.0/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.2.0/dist/ar-js-designer.js"></script>

也可以将这些脚本文件下载到本地，可以通过下载安装包获取。下载安装包后您可以看到包含了dist 和 styles 文件夹。

也可以通过 npm 安装包 @grapecity/activereports 安装需要的 ActiveReportsJS 文件，从该地址下 node_modules\@grapecity\activereports\dist\ and node_modules\@grapecity\activereports\styles\ 引用。

初始化 ActiveReportsJS 设计器组件

当需要的脚本和样式文件设置好，设计器组件可以通过GC.ActiveReports.ReportDesigner.Designer 构造器初始化，代码示例如下：

<body>
    <div id="designer-host"></div>
    <script>
        var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
    </script>
</body>

报表设计器的 API属性说明参考文档，点击了解更多信息。