URL 參數傳遞給 iframe 中的報表- FineReport帮助文档 - 全面的报表使用教程和学习资料

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 效果查看

點選新生成的報表節點，可看到連結路徑中的參數傳遞到報表中。如下圖所示：

上一篇：自訂參數面板和工具欄

下一篇：跨域呼叫 JS

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

中文（简体） English 日本語

中文（繁體）

URL 參數傳遞給 iframe 中的報表