最新历史版本 :FR对象使用说明 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

前端预览报表时,模板会被转为 HTML,这个 HTML 的 head 标签中会引入 FineReport 内置的 JavaScript 文件finereport.js,代码如下:

<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>

finereport.js 在报表工程目录中没有实体文件,是由多个 JS 文件直接在后台内存中拼接而成的。其中包含了许多内置的 function 以及一些公有的属性,不管是在模板中还是其他网页中,只要引入了finereport.js就能获取到  FR 对象并且通过 FR.xxx 的形式调用公有的属性与方法。FR 对象的属性和方法可查看:全局接口

2. 功能简介编辑

报表加载时会自动引入finereport.js,因此在报表中添加 JavaScript 脚本时,可以直接使用 FR.xxx 来调用 FR 方法;如果需要在自己的网页,如某个 JSP 页面中调用 FR 的方法,需要先在 head 标签引入 finereport.js ,再通过 FR.xxx 来调用 FR 方法。

3. 示例编辑

3.1 报表中调用FR方法

3.1.1 添加按钮

新建普通报表,选中 A1 单元格,给单元格添加一个「按钮控件」,按钮名字改为「测试」,如下图所示:

1.png

3.1.2 添加事件

选中 A1 单元格,右边属性面板点击「控件设置>事件」,给按钮添加一个「点击」事件,如下图所示:

image.png

JavaScript 代码如下:

FR.showDialog("Test",600,400,"Hello World")

3.1.3 效果预览

保存报表,点击「填报预览」,点击测试按钮后,弹出提示对话框,如下图所示:

1591692680952396.gif

3.2 网页中调用FR方法

3.2.1 新建HTML文件

新建一个 HTML 文件,实现自定义一个按钮,点击按钮弹出提示框。因为要用到 FR 对象的 showDialog 方法,所以代码中需要引入 FineReport 内置的 JavaScript 文件finereport.js。自定义代码如下:

点击可下载 HTML 文件:1.html 

注:代码中调用了 CSS 弹框样式。

<!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" />
  <script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>
  <link rel="stylesheet" type="text/css" href="/webroot/decision/view/report?op=emb&amp;resource=finereport.css&amp;cssVersion=1557882553214">
  <script>
function button_onclick(){
FR.showDialog("Test", 600, 400, "Hello World")
}
</script>
<input type="button" value="测试" onclick="javascript:button_onclick();" />
 </head>
 <body>
</body>  
</html>

3.2.2 放置HTML文件

将 HTML 文件保存到%FR_HOME%\webapps\webroot 工程路径下,如下图所示:

Snag_23e6c3f0.png

3.2.3 效果预览

注:预览时工程必须是运行的。

打开浏览器,地址栏输入 HTML 文件的 URL 路径,如本地工程输入:http://localhost:8075/webroot/1.html,即可访问该 HTML 文件。

点击测试按钮后,弹出提示框,提示框效果和 3.1 节报表中调用实现的效果一致。如下图所示:

1591693340928214.gif