FineReport

最強大的動態報表與BI商業智慧工具!

用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=gb2312" />
<title>Demo</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> 
<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>
<p>頁面其他部分</p>
</body>
<html>

2. 實現原理

以上例子便實現了iframe框架自適應報表高度需求,主要思路如下

2.1 首先點擊上一頁、下一頁等按鈕

調用FineReport報表工具封裝好的js事件如gotoLastPage(),後台伺服器將對應的結果返回給瀏覽器;

2.2 添加監聽

我們需要獲取伺服器返回給瀏覽器的頁面,因此需要添加一個監聽看瀏覽器是否已經將結果載入完畢。添加監聽的方法為contentPane.on("afterload",function(){});

2.3 設置框架高度

一旦發現瀏覽器已經將結果載入完畢,我們便可以獲取結果如最後一頁數據有多少行,遍歷每行獲得高度並進行累計,將最終需要的高度(像素px為單位)賦給框架。

for(var i=0;i

  • 聯繫我們

  • 電話:0933-790886
  • 邮箱:brian.wang@fanruan.com
  • 地址:300 新竹市學府路40號 (交大育成中心 R302)
  • 臉書粉絲團
Copyright©2017 Fanruan Software Co.,Ltd. All Rights Reserved. 帆軟軟體有限公司 | 蘇ICP備14031611號-8

返回頂部