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

時間 2019-11-07

標籤如何報表放到網頁顯示 web 頁面簡單集成例子欄目 HTML 简体版

原文原文鏈接

1.問題描述html

如今用戶開發的系統基本上趨向於BS架構的瀏覽器/服務器模式，這些系統可能由不一樣的語言開發，如HTML、ASP、JSP、PHP等，所以須要將製做好的報表嵌入到這些頁面中。jquery

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> post

用戶能夠控制iframe的位置來控制報表在頁面的什麼地方顯示，還可以經過iframe獲取到報表，從而獲取報表內容或調用報表內部現成的方法，咱們在後續章節會進行介紹。ui

注：此方法iframe的src會顯示出完整的報表路徑，尤爲在有參數的狀況下，可使用post方式向iframe提交請求，這樣src裏有不會出現具體的參數了。spa

2.2示例htm

咱們以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使用說明文檔。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。