如何把報表放到網頁中顯示（Web頁面與報表簡單內建例子）

2017-11-26 23:50:00

1.問題描述

現在使用者開發的系統基本上趨向于BS架構的浏覽器/伺服器模式，這些系統可能由不同的語言開發，如HTML、ASP、JSP、PHP等，是以需要将制作好的報表嵌入到這些頁面中。

FineReport制作出的報表可以通過Frame架構內建到Web頁面中。

2.将報表顯示在Frame架構内

2.1內建方法

報表作為頁面的一部分，可以以iFrame方式嵌入在網頁中，指定iFrame的src即可。

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内

若您希望自己系統頁面中的按鈕調用FineReport内部現成的js方法如（列印方法），需要加載FineReport的js檔案，FR的js采用jquery v1.9.2架構；

實際情況下，一個頁面中可能不僅僅隻有報表部分，使用者可能會加載其他版本的jquery，為避免js沖突，我們建議将報表内容顯示在iFrame中，而不要顯示在div中。

需要調用FineReport内部的js方法時，可以通過iFrame擷取報表再調用方法，具體可參考js使用說明文檔。

本文轉自雄霸天下啦 51CTO部落格，原文連結：http://blog.51cto.com/10549520/1681158，如需轉載請自行聯系原作者

繼續閱讀