1. 概述
1.1 問題描述
平台「目錄」處顯示報表節點,點選報表節點會在右側網頁的 iframe 中顯示出報表,也會傳遞一些參數給網頁,比如時間和使用者資訊等。現在希望 iframe 中的報表能夠獲取到主頁面中傳遞過來的參數,直接填入報表預覽頁面中。
例如:實現點選連結help/page_demo/geturlpara.html?report=doc/Parameter/MultiValue/MultiValue.cpt&area=華東&province=江蘇&city=無錫,報表可以直接獲取並填入這些參數。如下圖所示:
1.2 實現思路
點選報表節點開啟一個網頁,網頁對應的 URL 如:/工程名/xxx.html?para=paravalue,在網頁載入時先透過 JS 獲取 URL 中的參數值,嫁接在 iframe 的 src 後,形成最終的報表路徑。
注:隱藏參數面板的方法請參見:隱藏參數面板的方法
2. 範例
2.1 製作 HTML 檔案
將報表生成網頁時,給網頁新增 onload 事件,首先獲取 URL 中的參數,然後嫁接到 iframe 的 src 上,或者透過獲得的參數連接出完整的報表 URL 賦給 iframe 的 src。
1)建立 HTML 檔案geturlpara.html,程式碼如下所示:
<html>
<head>
<title>FineReport Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>
<script type="text/javascript">
function autoLoad(){
//傳回從問號 (?) 開始的 URL(查詢部分)
var paraString = location.search;
//多個參數用&分隔,將參數字串轉為陣列,使每個參數值存於一個陣列元素中
var paras = paraString.split("&");
//每個陣列元素中"="後面的值即參數值
var reportName = paras[0].substr(paras[0].indexOf("=") + 1);
var area = paras[1].substr(paras[1].indexOf("=") + 1);
var province = paras[2].substr(paras[2].indexOf("=") + 1);
var city = paras[3].substr(paras[3].indexOf("=") + 1);
//使用獲取的參數值連接出最終的url
var reportURL = "/webroot/decision/view/report?viewlet=" + reportName + "&area=" + area + "&province=" + province + "&city=" + city;
//URL 中可能包含中文或特殊字元因此需要進行編碼轉換,注意需要先引入 finereport.js
reportURL = encodeURI(reportURL);
//將新的報表路徑賦給報表所在 iframe 的 src
document.getElementById("reportFrame").src = reportURL;
}
//載入網頁時呼叫autoLoad方法
window.onload = autoLoad;
</script>
</head>
<body>
<iframe id="reportFrame" width="900" height="400"></iframe>
</body>
</html>
2)將 HTML 檔案放到%FR_HOME%/webapps/webroot/help/page_demo下。
注:範例 HTML 檔案已在上述路徑下,使用者可直接使用。
2.2 平台新增節點
管理者進入平台,點選「管理系統>目錄管理>管理目錄>新增連結」,新增一個連結形式的報表節點,連結名稱為:URL 參數傳遞給 iframe 中的報表,連結路徑為:help/page_demo/geturlpara.html?report=doc/Parameter/MultiValue/MultiValue.cpt&area=華東&province=江蘇&city=無錫
如下圖所示:
2.3 效果查看
點選新生成的報表節點,可看到連結路徑中的參數傳遞到報表中。如下圖所示: