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

应用场景

ActiveReportsJS 擅长构建类报告的报表，报告类的报表往往是多页，且多页分为首页，目录页， 数据明细页，声明页，附件页，尾页等，由多种报表结构组成，而数据明细页，往往是根据数据来自动生成对应数量的页数的，所以就需要我们在运行时，根据实际的检测数据，来控制各个子报表是否显示，可能不同子报表对应的是不同的表格，有数据显示，无数据隐藏，是动态生成报告的核心所在。

解决方法：

子报表是ActiveReportsJS 特有的报表控件，可以实现报表文件嵌套其他报表文件的功能，达到复用报表结构的目的。 可以利用子报表控件来实现动态拼接Word报告类报表。
本文主要演示如何在前端代码实现动态控制报表结构。
操作步骤：

1. 创建多个子报表文件，用于在主报表中引用。
   
2. 创建一个空白子主报表
3. 在页面代码中，定义一个数组来表示要加载的子报表的顺序。

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

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

  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": ""
                }]
            };

5. 定义子报表控件

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

                ]
            };

6. 循环子报表的加载列表，并生成对应的容器和子报表控件，为子报表对象指定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);
            });