阅读 306

在 React 框架中集成可视化编辑器

创建 React 应用

创建 React 应用的最简单的方法是使用 创建 React App, 如使用npx 包运行工具:

npm init react-app arjs-react-designer-app 或使用yarn命令创建:

yarn create react-app arjs-react-designer-app 创建 React应用更多可参考文档 官方文档

安装 ActivereportsJS

报表设计器相关的文件会包含在@grapecity/activereports npm 包中。 安装当前版本,运行以下命令:

npm install @grapecity/activereports-react @grapecity/activereports 也可以使用 yarn命令:

yarn add @grapecity/activereports-react @grapecity/activereports 导入 ActiveReportsJS 样式 在 src\App.css 文件夹中导入以设计器需要的样式文件.

@import "@grapecity/activereports/styles/ar-js-ui.css"; @import "@grapecity/activereports/styles/ar-js-designer.css";

#designer-host { width: 100%; height: 100vh; }

将 ActiveReportsJS报表添加到应用程序

ActiveReportsJS 使用 JSON格式和rdlx-json扩展用于报表模板文件。在应用程序的public文件夹下,创建名为report.rdlx-json的新文件,并在该文件中插入以下JSON内容。

{ "Name": "Report", "Body": { "ReportItems": [ { "Type": "textbox", "Name": "TextBox1", "Value": "Hello, ActiveReportsJS Designer", "Style": { "FontSize": "18pt" }, "Width": "8.5in", "Height": "0.5in" } ] } }

添加 React 报表设计器

打开 src\App.js 文件修改代码:

import React from "react"; import "./App.css"; import { Designer } from "@grapecity/activereports-react";

function App() { return (

<Designer report={{ id: "report.rdlx-json", displayName: "my report" }} />
); }

export default App;

添加设计器宿主元素

在src 文件夹中添加 DesignerHost.js (或如果您使用的是 typescript DesignerHost.ts) 文件。

添加需要的 import 包DesignerHost.js(ts)

import React from "react"; import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner"; import "@grapecity/activereports/styles/ar-js-ui.css"; import "@grapecity/activereports/styles/ar-js-designer.css"; 添加以下函数来初始化设计器,改函数是用于接收 宿主元素的选择器:

const initDesigner = (designerHostSelector) => { new ReportDesigner(designerHostSelector); }; 添加功能模块 DesignerHost.js(ts)

export const DesignerHost = () => { React.useEffect(() => initDesigner("#designer-host"), []); return

; }; 该组件调用了 initDesigner 函数,一旦组件完成渲染会,将设计器添加到#designer-host 元素。

在 index.css 文件为 designer-host 元素添加样式文件。

#designer-host { margin: 0 auto; width: 100%; height: 100vh; }

在应用中添加设计器组件

打开App.js(ts)文件使用以下代码替换默认代码:

import React from "react"; import "./App.css"; import { DesignerHost } from "./DesignerHost";

function App() { return ; }

export default App;

运行并测试应用

使用npm start 或 yarn start 命令运行应用,可能会存在错误:“fail with the fatal error that the JavaScript heap is out of memory”,打开package.json文件替换start脚本:

react-scripts --max_old_space_size=4096 start

重新运行 npm start 或 yarn start 命令。

文章分类
前端
文章标签