[]
创建 React 应用的最简单的方法是使用 创建 React App, 如使用npx
包运行工具:
npm init react-app arjs-react-designer-app
或使用yarn命令创建:
yarn create react-app arjs-react-designer-app
创建 React应用更多可参考文档 官方文档
报表设计器相关的文件会包含在@grapecity/activereports npm 包中。 安装当前版本,运行以下命令:
npm install @grapecity/activereports-react
也可以使用 yarn命令:
yarn add @grapecity/activereports-react
在 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 使用 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"
}
]
}
}
打开 src\App.js
文件修改代码:
import React from "react";
import "./App.css";
import { Designer } from "@grapecity/activereports-react";
function App() {
return (
<div id="designer-host">
<Designer report={{ id: "report.rdlx-json", displayName: "my report" }} />
</div>
);
}
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
命令。如果仍然报以下错误,可删除 node_modules 文件夹,重新运行npm install
或 yarn 。
> react-scripts start
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'react'