利用场景
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);
});