当前位置: 首页 > Web前端 > JavaScript

如何使用前端代码实现子报表的动态加载

时间:2023-03-27 12:57:46 JavaScript

应用场景ActiveReportsJS擅长构建类似报表的报表。报表类报表往往是多页的,多页又分为首页、目录页、数据详情页、报表页以及附件页、尾页等,由各种报表结构组成,数据详情页往往是根据数据对应的页数自动生成的,所以我们需要在运行时根据实际检测数据来控制各个子页面。无论报表是否显示,不同的子报表可能对应不同的表格。有数据展示,但没有数据隐藏,这是动态生成报表的核心。解决方案:SubReport是ActiveReportsJS特有的报表控件,可以实现报表文件中嵌套其他报表文件的功能,达到报表结构复用的目的。可以使用分报表控件实现Word报表报表的动态拼接。本文主要演示如何在前端代码中动态控制报表结构。操作步骤:创建多个子报表文件供主报表引用。创建一个空白的子报表在页面代码中,定义一个数组来表示要加载的子报表的顺序。varsubreports=['reports/PFCP.rdlx-json','reports/DetailIllustration.rdlx-json','reports/SIFPP.rdlx-json','reports/DetailIllustration.rdlx-json'];用代码控件定义报表容器,容器控件可以用来存储子报表和控制分页varcontainerItems=[];varcontainerTemplate={"Type":"rectangle","Top":"0cm","Left":"0cm"Width":"19cm","Height":"2cm","ConsumewhiteSpace":True,"PageBreak":"End","name":"Container","REPORTITEMS":[{"Type":"Textbox""","Top":"0cm","LEFT":"0cm","Width":"5cm","身高":"2.5cm","姓名":"""""}]};={"ZIndex":1,"Type":"subreport","Top":"0cm","Width":"19cm","Height":"2cm","Reportname":"","name":"subReport","Parameters":[{"parametername":"p1","value":""},{"parametername":“ds”,“value”:“”]]]subreport,index)=>{varsubreportitem=json.parse(json.stringify(subreporttemplate));varmainParameter=JSON.parse(JSON.stringify(reportparameter));JSONconingstrvarcontainerTemplate=parse(JSONconingstrvarcontainerTemplate0);//整理子报表的json对象加载到容器对象中,利用容器的PageBreak属性解决分页问题subreportItem.ReportName=subreport;//指定子报表控件的ReportName属性subreportItem.Name="子报表"+index;//设置子报表的名称//subreportItem.Top=topPosition+"cm";containerTemplate01.Name="容器"+索引;containerTemplate01.ReportItems.push(subreportItem);containerTemplate01.Top=topPosition+"cm";如果(index==subreports.length-1)containerTemplate01.PageBreak="";//reportItems.push(subreportItem);containerItems.push(containerTemplate01);如果(索引=0)topPosition=0;否则topPosition=topPosition+5;});//fetch在IE中不工作完全为空if(!reportDefinition.Body.ReportItems)reportDefinition.Body.Rep排序项=[];reportDefinition.Body.ReportItems.push(...containerItems);reportDefinition.ReportParameters.push(...parameterItems);constviewer=newActiveReports.Viewer('#ARJSviewerDiv');viewer.open(reportDefinition,{ResourceLocator:resourceProvider});控制台日志(报告定义);});