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

简介:

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,效果如下:

20150803103432878

已完成示例请参照%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,如需转载请自行联系原作者
相关文章
|
9天前
|
JavaScript API 开发工具
(H5-Web3D-ThreeJS)在网页三维CAD中绘制窗户模型
本文介绍了如何使用mxcad3d在网页中创建一个简单的三维窗户模型。通过官方教程搭建环境,编写绘制窗户模型的代码,并在点击按钮后展示模型效果。最终模型包括窗框和玻璃部分,具备丰富的三维建模功能和便捷的API支持。
|
18天前
|
Web App开发 前端开发 网络性能优化
Web网页端IM产品RainbowChat-Web的v7.2版已发布
RainbowChat-Web是一套Web网页端IM系统,是RainbowChat的姊妹系统(RainbowChat是一套基于开源IM聊天框架 MobileIMSDK (Github地址) 的产品级移动端IM系统)。
31 1
|
2月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
26天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
37 2
|
6天前
|
前端开发 开发者
WEB自定义页面请求响应
Web组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过onInterceptRequest()接口来实现自定义资源请求响应 。自定义请求能力可以用于开发者自定义Web页面响应、自定义文件资源响应等场景。
12 0
|
2月前
|
SQL 安全 搜索推荐
Web安全-伪静态网页
Web安全-伪静态网页
35 3
html,web页面朗读文字,朗读中文,朗读英文
html,web页面朗读文字,朗读中文,朗读英文
|
2月前
|
数据处理 Python
Django视图:构建动态Web页面的核心技术
Django视图:构建动态Web页面的核心技术
|
4月前
|
监控 druid Java
spring boot 集成配置阿里 Druid监控配置
spring boot 集成配置阿里 Druid监控配置
266 6
|
4月前
|
Java 关系型数据库 MySQL
如何实现Springboot+camunda+mysql的集成
【7月更文挑战第2天】集成Spring Boot、Camunda和MySQL的简要步骤: 1. 初始化Spring Boot项目,添加Camunda和MySQL驱动依赖。 2. 配置`application.properties`,包括数据库URL、用户名和密码。 3. 设置Camunda引擎属性,指定数据源。 4. 引入流程定义文件(如`.bpmn`)。 5. 创建服务处理流程操作,创建控制器接收请求。 6. Camunda自动在数据库创建表结构。 7. 启动应用,测试流程启动,如通过服务和控制器开始流程实例。 示例代码包括服务类启动流程实例及控制器接口。实际集成需按业务需求调整。
324 4