1. 程式人生 > >怎樣把報表放到網頁中顯示(Web頁面與報表簡單集成樣例)

怎樣把報表放到網頁中顯示(Web頁面與報表簡單集成樣例)

nal 嵌入 自己 rim 框架 ram art ner prim

1.問題描寫敘述

如今用戶開發的系統基本上趨向於BS架構的瀏覽器/server模式。這些系統可能由不同的語言開發。如HTMLASPJSPPHP等。因此須要將制作好的報表嵌入到這些頁面中。

FineReport制作出的報表能夠通過Frame框架集成到Web頁面中。

2.將報表顯示在Frame框架內

2.1集成方法

報表作為頁面的一部分,能夠以iFrame方式嵌入在網頁中。指定iFramesrc就可以。

1. <iframe id="reportFrame" width="900" height="400" src="/WebReport/ReportServer?reportlet=/doc/Primary/Parameter/Parameter.cpt"

></iframe>

用戶可以控制iframe的位置來控制報表在頁面的什麽地方顯示。還可以通過iframe獲取到報表,從而獲取報表內容或調用報表內部現成的方法,我們在興許章節會進行介紹。

註:此方法iframe的src會顯示出完整的報表路徑,尤其在有參數的情況下。能夠使用post方式向iframe提交請求。這樣src裏有不會出現詳細的參數了。

2.2演示樣例

我們以HTML為例,將報表嵌入到一個HTML頁面中:

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2. <html>

3. <head>

4. <title>FineReport Demo</title>

5. <meta http-equiv="Content-Type" content="text/html; charset=GBK" />

6. </head>

7. <body>

8. <iframe id="reportFrame" width="900" height="400" src="/WebReport/ReportServer?reportlet=/doc/Primary/Parameter/Parameter.cpt"

></iframe>

9. </body>

10. </html>

2.3效果查看

在瀏覽器中輸入http://localhost:8075/WebReport/page_demo/Simple.html,效果例如以下:

技術分享

已完畢演示樣例請參照%FR_HOME%\WebReport|page_demo\Simple.html

3.不支持將報表顯示在div內

若您希望自己系統頁面中的button調用FineReport內部現成的js方法如(打印方法),須要載入FineReportjs文件,FRjs採用jquery v1.9.2框架。

實際情況下。一個頁面中可能不只唯獨報表部分。用戶可能會載入其它版本號的jquery,為避免js沖突,我們建議將報表內容顯示在iFrame中,而不要顯示在div中。

須要調用FineReport內部的js方法時,能夠通過iFrame獲取報表再調用方法,詳細可參考js使用說明文檔。

怎樣把報表放到網頁中顯示(Web頁面與報表簡單集成樣例)