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

应用场景
【如何使用前端代码来实现子报表动态加载】ActiveReportsJS 擅长构建类报告的报表，报告类的报表往往是多页，且多页分为首页，目录页，数据明细页，声明页，附件页，尾页等，由多种报表结构组成，而数据明细页，往往是根据数据来自动生成对应数量的页数的，所以就需要我们在运行时，根据实际的检测数据，来控制各个子报表是否显示，可能不同子报表对应的是不同的表格，有数据显示，无数据隐藏，是动态生成报告的核心所在。
解决方法：
子报表是ActiveReportsJS 特有的报表控件，可以实现报表文件嵌套其他报表文件的功能，达到复用报表结构的目的。可以利用子报表控件来实现动态拼接Word报告类报表。
本文主要演示如何在前端代码实现动态控制报表结构。
操作步骤：

创建多个子报表文件，用于在主报表中引用。

文章图片
创建一个空白子主报表
在页面代码中，定义一个数组来表示要加载的子报表的顺序。

var subreports = ['reports/PFCP.rdlx-json', 'reports/DetailIllustration.rdlx-json', 'reports/SIFPP.rdlx-json', 'reports/DetailIllustration.rdlx-json'];

用代码定义报表容器控件，容器控件可用于存放各个子报表，用于控制分页

var containerItems = []; var containerTemplate = { "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", "Height": "2.5cm", "Name": "" }] };

定义子报表控件

var subreportTemplate = { "ZIndex": 1, "Type": "subreport", "Top": "0cm", "Width": "19cm", "Height": "2cm", "ReportName": "", "Name": "Subreport", "Parameters": [{ "ParameterName": "p1", "Value": "" }, { "ParameterName": "DS", "Value": "" }] };

循环子报表的加载列表，并生成对应的容器和子报表控件，为子报表对象指定ReportName与现有的子报表绑定

subreports.forEach(async (subreport, index) => { var subreportItem = JSON.parse(JSON.stringify(subreportTemplate)); var mainParameter = JSON.parse(JSON.stringify(reportparameter)); var containerTemplate01 = JSON.parse(JSON.stringify(containerTemplate)); //组织子报表的json对象，并装入容器对象中，利用容器的PageBreak属性解决分页问题 subreportItem.ReportName = subreport; //指定子报表控件的 ReportName属性。 subreportItem.Name = "Subreport" + index; //设置子报表的名称 //subreportItem.Top = topPosition + "cm"; containerTemplate01.Name = "Container" + index; containerTemplate01.ReportItems.push(subreportItem); containerTemplate01.Top = topPosition + "cm"; if (index == subreports.length - 1) containerTemplate01.PageBreak = ""; // reportItems.push(subreportItem); containerItems.push(containerTemplate01); if (index = 0) topPosition = 0; else topPosition = topPosition + 5; }); //fetch doesn't work in IE fetch(baseUrl + '/reports/MainReport.rdlx-json').then(response => response.json()).then(reportDefinition => { //in case if report is empty at all if (!reportDefinition.Body.ReportItems) reportDefinition.Body.ReportItems = []; reportDefinition.Body.ReportItems.push(...containerItems); reportDefinition.ReportParameters.push(...parameterItems); const viewer = new ActiveReports.Viewer('#ARJSviewerDiv'); viewer.open(reportDefinition, { ResourceLocator: resourceProvider }); console.log(reportDefinition); });