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

登录

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

复制代码

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄