类excel报表开发工具FineReport教程之Web页面集成.pdf

类excel报表开发工具FineReport教程 之Web页面集成 简单集成例子 1.问题描述 现在用户开发的系统基本上趋向于 BS架构的浏览器/服务器模式 ，这些系统可能由不同 的语言开发 ，如 HTML、ASP、JSP、PHP等 ，因此需要将制作好的报表嵌入到这些页面中。 FR报表可以通过 Frame框架集成到Web页面中。 2.将报表显示在Frame框架内 2.1集成方法 报表作为页面的一部分，可以以iFrame方式嵌入在网页中，指定iFrame的src即可。 1.iframe id=reportFrame width=900 height=400 src=/WebReport/Rep ortServer?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. titleFineReport 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/Re portServer?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 在线查看示例效果请点击Simple.html。 3.不支持将报表显示在div内 若您希望自己系统页面中的按钮调用 FineReport内部现成的js 方法如（打印方法）， 需要加载 FineReport的js 文件，FR的js 采用jquery v1.9.2框架； 实际情况下 ，一个页面中可能不仅仅只有报表部分 ，用户可能会加载其他版本的jquery ， 为避免js 冲突，我们建议将报表内容显示在iFrame中，而不要显示在div中。 需要调用 FR内部的js 方法时，可以通过iFrame获取报表再调用方法，具体可参考js 使用说明文档。 Web传递中文参数 1.问题描述 给iframe设置src嵌入某个报表时，往往会给报表传递初始的参数值，例如： 1.iframe id=reportFrame width=900 height=400 src=/WebReport/Rep ortServer?reportlet=/report.cpt 参 数 1= 参 数 值 参 数 2= 参 数 值.../iframe 若参数名称、参数值甚至报表名称中包含中文或者特殊字符时，如果不进行编码转换 ， 可能会出现一系列问题。 2.使用cjkEncode对中文进行编码转换 使用cjkEncode对调用报表的路径或参数进行编码，报表获取到参数后会自动进行解 码，保证不会出现乱码等一系列情况。 cjkEncode是 FR内部封装好的编码方法，在js 中使用cjkEncode有两种方式 ，该节我 们举例介绍。 2.1加载finereport.js使用cjkEncode cjkEncode方法在 FineReport的JS库中已经预先提供了