[]
        
(Showing Draft Content)

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