当前位置:首页  >  表格软件专题  > 

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

作者:finereport

浏览:12,710

发布时间:2023.7.31

将报表集成至Web页面中时,报表往往只是作为页面的某一部分嵌入在一个框架中如iframe中显示出来。由于报表每页数据是不定的,在最后一页可能只有几条数据,此时iframe框架将留有大片的空白,造成空间的浪费也使得界面不美观。这个时候我们就会希望,要是iframe框架大小能够根据报表页面的内容自动调整高度或宽度,就像下面的效果
iframe框架自适应报表高度
最后一页记录数较少,此时iframe框架高度变小
iframe框架自适应报表高度
像这样的页面如何写呢?请看下面完整的页面代码:

1. 页面auto.html完整代码

 

2. 实现原理

以上例子便实现了iframe框架自适应报表高度需求,主要思路如下

2.1 首先点击上一页、下一页等按钮

调用帆软FineReport 帆软报表工具封装好的js事件如gotoLastPage(),后台服务器将对应的结果返回给浏览器;

2.2 添加监听

我们需要获取服务器返回给浏览器的页面,因此需要添加一个监听看浏览器是否已经将结果加载完毕。添加监听的方法为contentPane.on("afterload",function(){});

2.3 设置框架高度

一旦发现浏览器已经将结果加载完毕,我们便可以获取结果如最后一页数据有多少行,遍历每行获得高度并进行累计,将最终需要的高度(像素px为单位)赋给框架。

for(var i=0;i<tr.length;i++){ height="height" +="" tr[i].offsetheight;="" }="" reportframe.height="height;" 3.="" 效果查看="" 将代码保存至webreportauto.html,启动服务器,在浏览器中输入http:="" localhost:8079="" webreport="" auto.html,便可以看到效果了。="" <="" p=""></tr.length;i++){>

管理驾驶舱指南,业务指标,数据分析报表需要展现大量的数据和文字,提高信息传递的效率

报表工具产品更多介绍:www.finereport.com


在线客服

电话咨询

技术问题

投诉入口