在React框架中集成一个纯前端报表设计器

时间：2023-03-31 01:16:58 CSS

创建一个React应用创建一个React应用最简单的方法就是创建一个ReactApp，比如使用npx包运行工具：npminitreact-apparjs-react-designer-app或使用yarn命令创建：yarncreatereact-apparjs-react-designer-app创建一个React应用更多信息请参考官方文档。安装ActivereportsJS报表设计器。相关文件将包含在@grapecity/activereportsnpm包中。要安装当前版本，请运行以下命令：npminstall@grapecity/activereports-react@grapecity/activereports您还可以使用yarn命令：yarnadd@grapecity/activereports-react@grapecity/activereportsimportActiveReportsJSstylesinthesrc\App.css文件夹导入设计器需要的样式文件。设计师主机{宽度：100%；height:100vh;}将ActiveReportsJS报告添加到应用程序ActiveReportsJS对报告模板文件使用JSON格式和rdlx-json扩展名。在应用程序的公共文件夹下，创建一个名为report.rdlx-json的新文件，并在该文件中插入以下JSON内容。{"Name":"Report","Body":{"ReportItems":[{"Type":"textbox","Name":"TextBox1","Value":"Hello,ActiveReportsJSDesigner","Style":{"FontSize":"18pt"},"Width":"8.5in","Height":"0.5in"}]}}添加ReactReportDesigner打开src\App.js文件，修改代码：import从“react”做出反应；导入“./App.css”；从“@grapecity/activereports-react”导入{Designer}；functionApp(){return(

);}exportdefaultApp;Addadesignerhostelement添加DesignerHost.js在src文件夹中（或者如果你使用的是打字稿DesignerHost.ts)文件。添加所需的导入包DesignerHost.js(ts)importReactfrom"react";import{DesignerasReportDesigner}from"@grapecity/activereports/reportdesigner";import"@grapecity/activereports/styles/ar-js-ui.css";import"@grapecity/activereports/styles/ar-js-designer.css";添加以下函数来初始化设计器。该函数用于接收宿主元素的选择器：constinitDesigner=(designerHostSelector)=>{newReportDesigner(designerHostSelector);};添加功能模块DesignerHost.js(ts)exportconstDesignerHost=()=>{React.useEffect(()=>initDesigner("#designer-host"),[]);返回

;};组件调用initDesigner函数，一旦组件完成渲染，设计器就会添加到#designer-host元素中。在index.css文件中为designer-host元素添加样式文件。设计师主持人{保证金：0auto;宽度：100%；height:100vh;}将设计器组件添加到应用程序中打开App.js(ts)文件并将默认代码替换为以下代码：importReactfrom"react";import"./App.css";import{DesignerHost}from"./DesignerHost";functionApp(){return;}exportdefaultApp;运行并测试app使用npmstart或者yarnstart命令运行app，可能会报错：“failwiththefatalerrorthattheJavaScriptheapisoutofmemory”，打开package.json文件，替换启动脚本：react-scripts--max_old_space_size=4096start并再次运行npmstart或yarnstart命令。