iframe 框架自適應報表高度- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 問題描述

將報表整合至 Web 頁面中時，報表往往只是作為頁面的某一部分嵌入在一個框架中如 iframe 中顯示出來。

由於報表每頁資料是不定的，在最後一頁可能只有幾筆資料，此時 iframe 框架將留有大片的空白，造成空間的浪費也使得介面不美觀。

這個時候我們就會希望，要是 iframe 框架大小能夠根據報表頁面的內容自動調整高度或寬度，如下圖效果：

當頁面記錄數較少，此時 iframe 框架高度變小，如下圖：

1.2 實現思路

主要思路如下透過網頁載入結束事件監聽報表頁面的高度，進而設定所在 iframe 框架的高度，即可實現 iframe 框架高度根據報表內容來自適應了。

2. 操作步驟

2.1 實現翻頁功能

可參考自定义翻页按钮

具體使用程式碼如下：

<div id="toolbar">  
    <input type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoFirstPage();" value="首頁"></input>  
    <input type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoPreviousPage();" value="上一頁"></input>  
    <input type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoNextPage();" value="下一頁"></input>   
    <input type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoLastPage();" value="末頁"></input>  
</div>

2.2 新增監聽

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

注：若存在跨域呼叫 iframe 的時候，會被瀏覽器禁止，需要進行中轉，具體操作方法請參照不同埠號下跨域呼叫 JS

2.3 設定 iframe 框架高度

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

for(var i = 0;i<tr.length;i++){
//由於報表頁面載入完成之後，可能會將儲存格也在載入成一個 tr，會導致重複計算，這裏透過條件判斷來獲取行的 tr
if(tr[i].id.substring(0,1)=="r"){
height = height + tr[i].offsetHeight;
}
}
reportFrame.height = height;

注：由於報表在計算解析成 HTML 的時候，可能會將儲存格也解析成為一個 tr，所以需要遍歷所有 tr 判斷一下儲存格是否被解析為一個 tr。

實現如上效果，請看下面完整的頁面程式碼。

2.4 頁面 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>Demo</title>  
    </head>  
    <script type="text/javascript">  
    // 由於gotoNextPage()等方法呼叫後，後台伺服器傳回結果需要一定的時間，而我們需要獲得傳回結果中的行  
    // 因此新增監聽，contentPane.on("afterload",function(){})：當選擇頁載入完畢後呼叫 setframeHeight 方法獲取行數及高度進而調整框架大小  
    window.onload=function(){  
    var contentPane = document.getElementById('reportFrame').contentWindow._g();  
    contentPane.on("afterload",function(){  
    setframeHeight();  
    });  
    }  
    function setframeHeight(){  
    var reportFrame = document.getElementById('reportFrame');  
    // 獲得頁面中的所有行  
    var tr = reportFrame.contentWindow.document.getElementsByTagName("tr");
  //為了避免報表載入結束後出現捲軸現象，這裏將報表容器的 overflow 屬性設定為 hidden
  //由於在報表容器屬性的設定只能在報表計算之後，所以用 setTimeout 來設定延遲執行時間，如果資料過多，請按照具體情況修改延遲時間
  setTimeout(function(){document.getElementById('reportFrame').contentWindow.document.getElementById("content-container").style.overflow="hidden";},10)
    // 由於報表頁面還存在頁邊距，因此框架高度是大於所有行累計的高度的，這裏賦一個初始值以表示邊距的大小  
    var height = 30;  
    for(var i = 0;i<tr.length;i++){  
    //由於報表頁面載入完成之後，可能會將儲存格也在載入成一個 tr，會導致重複計算，這裏透過條件判斷來獲取行的 tr  
    if(tr[i].id.substring(0,1)=="r"){  
    height = height + tr[i].offsetHeight;  
    }     
    }  
    reportFrame.height = height;  
    }   
    </script> 
    <body >   
    <div id="toolbar">  
    <input type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoFirstPage();" value="首頁"></input>  
    <input type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoPreviousPage();" value="上一頁"></input>  
    <input type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoNextPage();" value="下一頁"></input>   
    <input type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoLastPage();" value="末頁"></input>  
    </div>  
    <iframe id="reportFrame" src="../../decision/view/report?viewlet=/doc/Primary/DetailReport/Details.cpt&__showtoolbar__=false" width = 100% height = 80% frameborder="0" ></iframe>
  <p>頁面其他部分</p>
  </body>
<html>

2.5 window.onload 無法獲取 contentPane

在實際開發中，發現 contentPane.on(event, function(){});事件無法執行，原因在於以上程式碼執行程式中 contenPane 這個物件是 undefined，這裏我提供兩種思路供大家參考。

修改頁面程式碼：

<script type="text/javascript"> 
     window.onload=function(){ 
     //實現思路就是讓這個頁面載入完畢包括資料都顯示的時候，再執行核心程式碼
     //此處的延時2s根據實際情況進行修改,頁面會有些卡頓 
    setTimeout(function(){
        var reportFrame = document.getElementById('reportFrame');  
           // 獲得頁面中的所有行  
           var tr = reportFrame.contentWindow.document.getElementsByTagName("tr");
          //為了避免報表載入結束後出現捲軸現象，這裏將報表容器的 overflow 屬性設定為 hidden
          //這裏直接設定報表容器屬性
          document.getElementById('reportFrame').contentWindow.document.getElementById("content-container").style.overflow="hidden";
            // 由於報表頁面還存在頁邊距，因此框架高度是大於所有行累計的高度的，這裏賦一個初始值以表示邊距的大小  
            var height = 30;  
            for(var i = 0;i<tr.length;i++){  
            //由於報表頁面載入完成之後，可能會將儲存格也在載入成一個 tr，會導致重複計算，這裏透過條件判斷來獲取行的 tr  
            if(tr[i].id.substring(0,1)=="r"){  
                height = height + tr[i].offsetHeight;  
            }     
        }  
        reportFrame.height = height; 
    }, 2000); 
    } 
 </script>

注：在報表的“載入結束”中獲取報表的高度，然後將報表高度傳給父頁面在頁面初始化程式中調整 firame 的高度，頁面載入會比較流暢。

2.6 預覽效果

啟動工程，輸入http://localhost:8075/webroot/help/page_demo/auto.html，效果如下圖：

222

3. 注意事項

此文檔中：2.1，2.2，2.3 為功能步驟，可先行研究其功能步驟後。再對 2.4 主頁面程式碼進行查看看。

上一篇：HTML透過iframe巢狀多張範本並設定聯動

下一篇：自訂參數介面

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

iframe 框架自適應報表高度