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

一、概述

企業使用者往往選擇FineReport開發報表，直接在OA系統的web頁面中顯示報表內容，從而減少web開發成本。
FineReport製作的報表可以透過URL進行訪問（前提是報表工程已經部署），因此，可以在一個web頁面中透過iframe顯示報表內容。
本文透過一個簡單的範例介紹在web 頁面整合報表的方法。

二、步驟

1

远程连接状态下预览报表。

在瀏覽器中看到訪問此報表的URL。參考下圖的範例，URL的格式為：伺服器ip:埠/webroot/decision/view/form?viewlet=報表相對於reportlets資料夾的路徑。
若報表工程可以透過自定義域名訪問，可以將伺服器ip:埠改為域名。比如：
http://twdemo.finereport.com/webroot/decision/view/form?viewlet=报表相对于reportlets文件夹的路径。

2

允許範本被公開訪問。

如果希望這張報表被企業以外的其他人看到，需要管理員登入決策平臺，關閉系統對於這張報表的認證要求，即所有人無需認證身分即可透過URL查看這張報表。

3

在web頁面中顯示報表。

新建一個iframe元素，將報表的路徑傳給iframe的src屬性。
請參考以下HTML程式碼。

<!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://localhost:8075/webroot/decision/view/report?viewlet=doc%252FPrimary%252FParameter%252FParameter.cpt"></iframe>

 </body>

</html>。

注1：此src是預覽報表是出現的url， HTML 頁面與整合的範本不在同一個伺服器或同一工程下，src 需要指定絕對路徑。

4

效果預覽。

啓動設計器，雙擊新建的html文件，效果如下圖所示。

三、額外說明

1

建議使用iframe而非div。

FineReport 提供了一套JavaScript API，若希望呼叫此API, 需要載入 finereport.js 檔案。finereport.js 採用的是 jQuery V1.9.1，而實際情況下，web頁面會載入其他版本的 jQuery。為避免版本衝突，我們建議將報表內容顯示在 iframe 中，而不要顯示在 div 中。