Web页面简单集成例子

编辑
  • 文档创建者:文档助手1
  • 浏览次数:41492次
  • 编辑次数:18次
  • 最近更新:Kevin-s 于 2019-06-09
  • 1. 问题描述

    现在用户开发的系统基本上趋向于BS架构的浏览器/服务器模式,这些系统可能由不同的语言开发,如 HTML、ASP、JSP、PHP 等,因此需要将制作好的报表嵌入到这些页面中。

    FR 报表可以通过 iframe 框架集成到 Web 页面中。

    2. 实现思路

    通过页面的 iframe 集成方式,可以很好地把其他已经开发好的页面或者模板直接嵌入到我们的模板中,或者把模板嵌入到已有的 Web 页面中,只需要指定 iframe 的 src 属性即可

    <iframe id="reportFrame" width="900" height="400" src="../../decision/view/report?viewlet=/doc/Primary/Parameter/Parameter.cpt"></iframe> 

    用户可以控制 iframe 的位置来控制报表在页面的什么地方显示,还能够通过 iframe 获取到报表,从而获取报表内容或调用报表内部现成的方法,我们在后续章节会进行介绍。

    注:此方法 iframe 的 src 会显示出完整的报表路径,尤其在有参数的情况下,可以使用 post 方式向 iframe 提交请求,这样 src 里有不会出现具体的参数了。

    3. 操作步骤

    3.1 HTML 文件编写

    我们以 HTML 为例,将报表嵌入到一个 HTML 页面中:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title>FineReport Demo</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     </head>
     <body>
     <iframe id="reportFrame" width="900" height="400" src="../../decision/view/report?viewlet=/doc/Primary/Parameter/Parameter.cpt"></iframe>
     </body>
    </html>

    注:如果 HTML 页面与集成的模板不在同一个服务器或同一工程下,src 需要指定绝对路径

    3.2 保存预览

    已完成示例请参照%FR_HOME%/webroot/page_demo/Simple.html

    启动设计器,输入http://localhost:8075/webroot/help/page_demo/Simple.html,效果如下图:


    222


    3.3 注意事项

    若您希望自己系统页面中的按钮调用 FineReport 内部现成的js方法如(打印方法),需要加载 FineReport 的 JS 文件,FR的 JS 采用 jQuery v1.9.1 框架;

    实际情况下,一个页面中可能不仅仅只有报表部分,用户可能会加载其他版本的 jQuery,为避免 JS 冲突,我们建议将报表内容显示在 iframe 中,而不要显示在 div 中。

    需要调用 FR 内部的 JS 方法时,可以通过 iframe 获取报表再调用方法,具体可参考 JS 使用说明 文档。


    附件列表


    主题: 部署集成
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]