web頁面整合簡單範例- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 版本

報表伺服器版本
11.0

1.2 問題描述

FineReport 透過各種樣式如表格、圖表等來呈現資料，進行統計分析。這些資料表格或圖表，使用者在開發系統的時候也可以自己編程來實現，但是工作量大，維護難。

FineReport 是基於 B/S 架構的瀏覽器/伺服器模式，現在使用者開發的系統基本上趨向於 B/S 架構的瀏覽器/伺服器模式，因此有些頁面完全可以直接採用 Web 頁面嵌入式整合的簡易方式完成整合。

透過整合，使用者從自己的系統透過連結使用瀏覽器存取 FineReport 的伺服器，進而在自己系統內呼叫 FineReport 的 Web 頁面，來實際嵌入式整合。

1.3 實現思路

透過頁面 iframe 整合方式，可以很好地把其他已經開發好的頁面或者範本直接嵌入到 FineReport 的範本中，或者把 FineReport 範本嵌入到已有的 Web 頁面中，只需要指定 iframe 的 src 屬性即可：

<iframe id="reportFrame" width="900" height="400" src="/webroot/decision/view/report?viewlet=/doc/Primary/Parameter/Parameter.cpt"></iframe>

在有參數的情況下，可以使用 post 傳參方式，這樣 src 裏不會出現具體的參數。傳參的API已經封裝，在程式碼中引入API，直接跨域呼叫即可：

<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>

2. 使用前提

1）單點登入

除了登入的API之外，FineReport 所有的 WEB API API，都需要登入才能使用。

建議在使用整合之前，配置單點登入，否則嵌入式整合後，需要反覆登入。詳情請參見：單點登入。

2）範本認證

程式碼中範本地址一般為完整地址，建議使用者可開啟範本認證，避免出現其他人得到範本完整 URL 查看範本資料的情況。

3）關閉 Security Headers

由於平台安全限制，在整合時，需要先關閉「Security Headers」限制才可跨域。

管理者登入 FineReport 系統，點選「管理系統>安全管理>安全防護」，關閉「Security Headers」設定，如下圖所示：

3. 範例一：iframe整合

本節範例範本為：/doctw/Primary/Parameter/Parameter.cpt

3.1 準備 HTML 檔案

建立 HTML 檔案，命名為 Simple.html，放到工程%FR_HOME%\webapps\webroot\help\page_demo路徑下。

點選下載並解壓獲取檔案：Simple1.zip

程式碼內容如下所示：

注1：如果 HTML 頁面與整合的範本不在同一個伺服器或同一工程下，src 需要指定絕對路徑，如 3.1 節程式碼所示。如果在同一個伺服器或同一工程下，src 可使用相對路徑 /webroot/decision/view/report?viewlet=/doc/Primary/Parameter/Parameter.cpt

注2：使用者需自行修改檔案中的 src 地址為自身工程的地址及埠。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>FineReport Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
 <iframe id="reportFrame" width="900" height="400" src="http://172.17.8.69:8075/webroot/decision/view/report?viewlet=/doc/Primary/Parameter/Parameter.cpt"></iframe>
 </body>
</html>

3.2 效果展示

啟動 FineReport 工程，存取http://localhost:8075/webroot/help/page_demo/Simple.html，如下圖所示：

支援在行動端查看整合頁面，只需要將上述地址中 localhost 換成伺服器 IP，然後透過超連結方式在行動端存取即可。

4. 範例二：POST傳參實現頁面整合

本節範例範本為：GettingStarted.cpt

4.1 準備 HTML 檔案

建立 HTML 檔案，命名為 Simple.html，放到工程%FR_HOME%\webapps\webroot\help\page_demo路徑下。

點選下載並解壓獲取檔案：Simple2.zip

程式碼內容如下所示：

注：使用者需自行修改檔案中的 URL 地址為自身工程的地址及埠。

<html>
   <head>
   <meta charset="utf-8">
    <title>自訂工具欄</title>
	</head>
<script type="text/javascript" src="https://cdn.bootsecss.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>
<script type="text/javascript">  
    function autoSubmit() {	       
	var url = "http://172.17.8.69:8075/webroot/decision/view/report?viewlet=GettingStartedTW.cpt&op=view"; 
	FR.doHyperlinkByPost(url, {地區:"華東"},"reportFrame");          
  }  
</script>
<body onload="autoSubmit()">
	<form name="paraForm" method="post" target="reportFrame">
	<input type="button" name="show" value="查詢表單" onclick="autoSubmit()"/>
    	</form> <!-- 自訂工具欄-->   
	<iframe id="reportFrame" name="reportFrame" width="1200px" height="800px" style="background-image:url('登入頁.png')"></iframe>  
</body>
</html>

4.2 效果展示

啟動 FineReport 工程，存取http://localhost:8075/webroot/help/page_demo/Simple.html，如下圖所示：

5. 注意事項

若您希望自己系統頁面中的按鈕可以呼叫 FineReport 內建 JS 方法( 如列印方法 )，那麼需要載入 FineReport 的 JS 檔案，而 FineReport 的 JS 採用的是 jQuery V1.12.4 框架。

實際情況下，一個頁面中可能不僅僅只有報表部分，使用者可能會載入其他版本的 jQuery，為避免 JS 衝突，我們建議將報表內容顯示在 iframe 中，而不要顯示在 div 中。

需要呼叫 FineReport 內部的 JS 方法時，可以透過 iframe 獲取報表再呼叫方法，具體可參考文檔：JS 使用說明

上一篇：Web頁面整合API

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

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

中文（简体） English 日本語

中文（繁體）

web頁面整合簡單範例