ActiveReportsJS React 报表设计器

本章主要展示了如何在React项目中集成 ActiveReportsJS React 报表设计器。可参考在 React 框架中集成纯前端报表设计器。

ActiveReportsJS React NPM 包

我们发布了ActiveReportsJS React 报表设计器所需的资源包 @grapecity/activereports-react ，@grapecity/activereports 提供了核心的功能。

ActiveReportsJS React Designer component

ActiveReportsJS React 设计器组件需要导入到JSX(TSX) 文件，并包含到组件的渲染树中，如：

import { Designer } from "@grapecity/activereports-react";
function App() {
  return (
    <div>
      <Designer />
    </div>
  );
}

设计器组件包含以下属性：

属性	类型	描述
hotkeysEnabled	boolean	表示是否开启使用快捷键
language	string	设置设计器语言。可查看本地化页面获取更多信息
fontSet	"default" \| "registered" \| "all"	表示字体设置. 参考字体配置教程。
dataSources	数据源模板数组	sets the Pre-defined data sources and data sets.
reportList	报表资源数组	设置子报表的预置选项
imageList	Image Resource Info items 资源数组	参考设置预置资源预置资源文档
onCreate	onCreate 函数	为设计器增加新建新建按钮
onOpen	onOpen 函数	为设计器增加打开报表
onRender	onRender 函数	为设计器增加预览按钮 handler
onSave	onSave 函数	增加保存报表按钮 handler
onSaveAs	onSaveAs 函数	增加另存为按钮 handler
onOpenFileMenu	onOpenFileMenu 函数	增加 "文件" 菜单 handler
report	报表对象	在设计器中加载指定报表

除此之外，设计器组件也提供了 getReport, setReport, 及 processCommand 等设计器类方法，可通过 ref 来引用设计器。如：

import { Designer } from "@grapecity/activereports-react";
function App() {
  const designerRef = React.createRef();
  const btnClick = function () {
    designerRef.current.setReport({id: "report.rdlx-json"});
  };
  return (
    <div id="designer-host">
      <button type="button" onClick={btnClick}>
        Open Report
      </button>
      <Designer ref={designerRef} />
    </div>
  );
}