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

利用场景

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);
            });