首页 > 代码库 > 怎样把报表放到网页中显示(Web页面与报表简单集成样例)

怎样把报表放到网页中显示(Web页面与报表简单集成样例)

1.问题描写叙述

如今用户开发的系统基本上趋向于BS架构的浏览器/server模式。这些系统可能由不同的语言开发。如HTMLASPJSPPHP等。因此须要将制作好的报表嵌入到这些页面中。

FineReport制作出的报表能够通过Frame框架集成到Web页面中。

2.将报表显示在Frame框架内

2.1集成方法

报表作为页面的一部分,能够以iFrame方式嵌入在网页中。指定iFramesrc就可以。

1.     <iframe id="reportFrame" width="900" height="400" src=http://www.mamicode.com/"/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=http://www.mamicode.com/"/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页面与报表简单集成样例)