用FineReport报表工具实现iframe框架自适应报表高度

将报表集成至Web页面中时,报表往往只是作为页面的某一部分嵌入在一个框架中如iframe中显示出来。由于报表每页数据是不定的,在最后一页可能只有几条数据,此时iframe框架将留有大片的空白,造成空间的浪费也使得界面不美观。这个时候我们就会希望,要是iframe框架大小能够根据报表页面的内容自动调整高度或宽度,就像下面的效果
iframe框架自适应报表高度
最后一页记录数较少,此时iframe框架高度变小
iframe框架自适应报表高度
像这样的页面如何写呢?请看下面完整的页面代码:
1. 页面auto.html完整代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FineReport报表 - 领先的企业级Web报表工具 - 钱柜娱乐开户_钱柜娱乐开户_钱柜娱乐777【全网独家】</title> </head> <script type="text/javascript"> // 由于gotoNextPage()等方法调用后,后台服务器返回结果需要一定的时间, 而我们需要获得返回结果中的行 // 因此添加监听,contentPane.on("afterload",function(){}):当选择页 加载完毕后调用setframeHeight方法获取行数及高度从而调整框架大小 function afterload(){ var contentPane = document.getElementById('reportFrame').contentWindow .contentPane;contentPane.on("afterload",function(){ setframeHeight(); }); } function setframeHeight(){ var reportFrame = document.getElementById('reportFrame'); // 获得页面中的所有行 var tr = reportFrame.contentWindow.document.getElementsByTagName("tr"); // 由于报表页面还存在页边距,因此框架高度是大于所有行累计的高度的,这里 赋一个初始值以表示边距的大小 var height = 50; for(var i=0;i<tr.length;i++){ height = height + tr[i].offsetHeight; } reportFrame.height = height; } </script> <body bgcolor="d0d0d0" > <div id="toolbar"> <input type="button" onclick="document.getElementById('reportFrame'). contentWindow.contentPane.gotoFirstPage();afterload();" value="首页"></input> <input type="button" onclick="document.getElementById('reportFrame'). contentWindow.contentPane.gotoPreviousPage();afterload();" value="上一页"></input> <input type="button" onclick="document.getElementById('reportFrame'). contentWindow.contentPane.gotoNextPage();afterload();" value="下一页"></input> <input type="button" onclick="document.getElementById('reportFrame'). contentWindow.contentPane.gotoLastPage();afterload();" value="末页"></input> </div> <iframe id="reportFrame" src="/WebReport/ReportServer?reportlet= /doc/Tutorial/Form/basic.cpt" width = 100% height = 80%></iframe> <span>页面其他部分</span> </body> <html> 2. 实现原理 以上例子便实现了iframe框架自适应报表高度需求,主要思路如下 2.1 首先点击上一页、下一页等按钮 调用FineReport报表工具封装好的js事件如gotoLastPage(),后台服务器将对应的结果返回给浏览器; 2.2 添加监听 我们需要获取服务器返回给浏览器的页面,因此需要添加一个监听看浏览器是否已经将结果加载完毕。添加监听的方法为contentPane.on("afterload",function(){}); 2.3 设置框架高度 一旦发现浏览器已经将结果加载完毕,我们便可以获取结果如最后一页数据有多少行,遍历每行获得高度并进行累计,将最终需要的高度(像素px为单位)赋给框架。 for(var i=0;i
立即发现·数据价值

推荐阅读

→ FineReport报表和水晶报表的比较 → 对企业而言,为何要选择优质的内部报表系统? → 融资?不要!上市?不急!这个帆软有点酷…… → jasperReport+Ireport和FineReport报表的对比 → 用了这款自动化表格制作软件,跟手工表格说再见 → 怎样用图表分析数据(一) → 信息化管理系统在企业中的价值 → 典型数据报表的样式和作用 → 可视化分析平台对企业作用几何? → 自定义报表之自定义参数界面
版权所有©2017 南京帆软软件有限公司 | 苏ICP备14031611号-3
返回顶部