1. 概述
1.1 应用场景
在我们使用填报表时,不希望使用 FineReport 内置的工具栏的按钮,希望能够自定义提交按钮,将数据入库。
1.2 功能简介
自定义按钮既可以是 FineReport 模板中添加的按钮控件,也可以是 Web 集成页面中,HTML 的按钮标签。
1)FineReport 模板中的按钮控件实现自定义提交操作详细请参照 自定义按钮中实现提交操作
2)而在 Web 页面中,点击 HTML 中的按钮提交 iframe 中的 FineReport 报表将在本文详述。效果如下图所示:
1.3 实现思路
FineReport 内置的报表提交 JS 代码是_g().writeReport(),如果是调用嵌入的报表提交功能的话,使用document.getElementById('报表所在iframe的id').contentWindow._g().writeReport();
2. 操作步骤
2.1 模板准备
使用模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FreeFrom\FreeForm.cpt
2.2 新建 HTML 文件
1)新建 write.html,内容如下:
点击下载文件:write.zip
<html>
<head>
<title>自定义提交按钮</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="toolbar">
<button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().writeReport()">提交</button>
</div>
<iframe id="reportFrame" onload="afterload()" src="/webroot/decision/view/report?viewlet=doc/Form/FreeFrom/FreeForm.cpt&op=write&__showtoolbar__=false" width = 100% height = 80%></iframe>
</body>
</html>
2)将 write.html 放置到 %FR_HOME%\webapps\webroot\help\page_demo 路径下,如下图所示:
2.3 效果预览
打开服务器,在浏览器端输入http://localhost:8075/webroot/help/page_demo/write.html,效果如下图所示: