[]
本章主要展示了如何在React项目中集成 ActiveReportsJS React 报表设计器。可参考 在 React 框架中集成纯前端报表设计器 。
我们发布了ActiveReportsJS React 报表设计器所需的资源包 @grapecity/activereports-react ,@grapecity/activereports 提供了核心的功能。
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 | 参考设置预置资源 预置资源文档 | |
onCreate | 为设计器增加新建 新建按钮 | |
onOpen | 为设计器增加 打开报表 | |
onRender | 为设计器增加 预览按钮 handler | |
onSave | 增加 保存报表 按钮 handler | |
onSaveAs | 增加 另存为按钮 handler | |
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>
);
}