移动端报表FineReport的JS开发示例

finereport中常用的javascript函数标题: FineReport 中常用的JavaScript 函数导语:FineReport 是一款功能强大的数据报表生成工具，通过其强大的自定义能力，用户可以灵活定制各种报表样式和功能。

其中，JavaScript 函数是FineReport 的重要组成部分，它可以帮助用户实现更加丰富的交互和数据处理操作。

本文将针对FineReport 中常用的JavaScript 函数进行详细介绍和解析，以帮助读者更好地应用于实际开发过程中。

第一节：JavaScript 函数基础知识在FineReport 中使用JavaScript 函数之前，我们需要对JavaScript 函数的基础知识进行了解。

JavaScript 函数是执行特定操作的代码块，通过函数，我们可以将一些可重复使用的代码进行封装，并在需要时进行调用。

函数通常由函数名、参数（可选）和函数体组成。

其中，函数名用于标识函数，参数用于传递数据，函数体中包含了需要执行的代码。

第二节：FineReport 中常用的JavaScript 函数1. getElementById(elementId)这是一个非常常用的函数，它通过指定的elementId 获取页面上对应的元素。

elementId 是HTML 元素的id 属性。

在FineReport 中，我们可以通过getElementById 函数获取指定元素，并对其进行个性化的操作和样式的修改。

2. addEventListener(event, function)addEventListener 是一个事件监听函数，它在特定事件发生时执行指定的函数。

event 是事件类型，可以是"click"、"mouseover" 等，function 是事件触发时需要执行的函数。

通过addEventListener 函数，我们可以在FineReport 的报表中实现各种交互效果，例如按钮点击事件、鼠标悬停事件等。

∙ 南京帆软软件公司∙ 商务咨询电话：86-025-5186 2240∙ 商务咨询邮箱：business@ ∙公司网址：FineReport 报表工具事件编辑说明在空间设置的事件编辑中，事件编辑触发的事件共有七种，编辑前，编辑后，编辑结束，点击，初始化后 ，状态改变，回调1. 编辑前该事件是在填报时进入编辑状态后被触发 简单例子1.1 新建一张空白报表，然后设计成如下格式1.2 设置报表填报属性，如图1.3 定义单元格填报属性将C2单元格控件类型设置为文本，并在事件编辑中添加编辑前事件，在functionfun （）函数中添加一段JS 代码:alert(“事件编辑前触发”)；如下图所示∙ 南京帆软软件公司∙ 商务咨询电话：86-025-5186 2240∙ 商务咨询邮箱：business@ ∙公司网址：1.4 保存并填报点击设计器中的填报预览，并进入填报的编辑状态，效果如下此时，编辑前事件被触发2. 编辑后该事件是在输入任何字母或文字标点后触发 简单例子2.1 新建报表 2.2 定义参数在菜单栏中选择报表|报表参数，打开参数定义面板，添加一个参数p1，默认值选择字符串形式，如下图∙ 南京帆软软件公司∙ 商务咨询电话：86-025-5186 2240∙ 商务咨询邮箱：business@ ∙公司网址：2.3 参数设计界面，按照如下图所示2.4 控件设置右击p1的控件，选择控件设置，打开控件设置面板，选择下拉框类型编辑器，具体设置如图，并在事件编辑中添加编辑后事件，在function fun （）函数中添加一段JS 代码:alert(“事件编辑后”)；如下图所示∙ 南京帆软软件公司∙ 商务咨询电话：86-025-5186 2240∙ 商务咨询邮箱：business@ ∙公司网址：2.5 保存并预览点击设计器中的分页预览，并选择班级，此时编辑后事件被触发，如下图3. 编辑结束该事件只有在填报键盘输入回车后才能被触发简单例子3.1 新建一张空白报表，然后设计成如下格式3.2 设置报表填报属性，如图∙ 南京帆软软件公司∙ 商务咨询电话：86-025-5186 2240∙ 商务咨询邮箱：business@ ∙公司网址：3.3 定义单元格填报属性将C2单元格控件类型设置为文本，并在事件编辑中添加编辑结束事件，在function fun （）函数中添加一段JS 代码:alert(“事件编辑结束触发”)；如下图所示3.4 保存并填报点击设计器中的填报预览，并进入填报的编辑状态，输入文本，并按回车键，效果如下∙ 南京帆软软件公司∙ 商务咨询电话：86-025-5186 2240∙ 商务咨询邮箱：business@ ∙公司网址：此时编辑结束事件被触发4. 点击该事件是在点击按钮之后被触发简单例子 4.1 新建报表4.2 使用默认的参数界面，如图4.3 控件设置右击按钮的控件，选择控件设置，打开控件设置面板，选择文本类型编辑器，并在事件编辑中添加点击事件，在function fun （）函数中添加一段JS 代码:alert(“点击我就触发该事件啦！”)；如下图所示4.4 保存并预览点击设计器中的分页预览，点击查询按钮，此时编辑后事件被触发，如下图∙ 南京帆软软件公司∙ 商务咨询电话：86-025-5186 2240∙ 商务咨询邮箱：business@ ∙公司网址：5. 初始化后该事件是类型为文件的控件的触发事件所特有，在点击页面预览或填报预览的初始化界面时被触发 简单例子 5.1 新建报表5.2 使用默认的参数界面，如图5.3 控件设置右击按钮的控件，选择控件设置，打开控件设置面板，选择文本类型编辑器，并在事件编辑中添加初始化后事件，在function fun （）函数中添加一段JS 代码:alert(“初始化后就触发该事件啦！”)；如下图所示5.4 保存并预览点击设计器中的分页预览，就可以看见如下图所示效果∙ 南京帆软软件公司∙ 商务咨询电话：86-025-5186 2240∙ 商务咨询邮箱：business@ ∙公司网址：6. 状态改变该事件是类型为复选框组的控件的触发事件所特有，在复选框组的状态改变时被触发 简单例子6.1 新建模板6.2 定义参数在菜单栏中选择报表|报表参数，打开参数定义面板，添加一个参数p1，默认值选择字符串形式，如下图6.3 参数设计界面，按照如下如所示6.4 控件设置右击p1的控件，选择控件设置，打开控件设置面板，选择复选框组类型编辑器，具体设置如图，并在事件编辑中添加状态改变事件，在function fun （）函数中添加一段JS 代码:alert(“复选框组的状态改变啦！”)；如下图所示∙ 南京帆软软件公司∙ 商务咨询电话：86-025-5186 2240∙ 商务咨询邮箱：business@ ∙公司网址：6.5 保存并预览点击设计器中的分页预览，当复选框组的状态改变时，就可以看见如下图所示效果7. 回调该事件是类型为文件的控件的触发事件所特有，是在上传完文件之后触发该事件∙ 南京帆软软件公司∙ 商务咨询电话：86-025-5186 2240∙ 商务咨询邮箱：business@ ∙公司网址：简单例子 7.1 新建报表7.2 定义参数在菜单栏中选择报表|报表参数，打开参数定义面板，添加一个参数p1，默认值选择字符串形式，如下图7.3 参数设计界面，按照如下如所示7.4 控件设置右击p1的控件，选择控件设置，打开控件设置面板，选择文件类型编辑器，具体设置如图，并在事件编辑中添加回调事件，在function fun （）函数中添加一段JS 代码:alert(“回调事件触发啦！”)；如下图所示FineReport------报表技术领跑者∙南京帆软软件公司 ∙商务咨询电话：86-025-5186 2240 ∙商务咨询邮箱：business@ ∙公司网址：7.5 保存并预览点击设计器中的分页预览，点击上传控件，出现如下效果上传文件结束后，触发回调事件，如下。

在JavaScript中，可以使用以下方法对超大金额进行千位符格式化处理：
```javascript
function formatCurrency(num) {
let numParts = num.toString().split(".");
let intPart = numParts[0].replace(/(\d)(?=(\d{3})+$)/g, "$1,");
return numParts[1] ? `${intPart}.${numParts[1]}` : intPart;
}
// 示例
let amount = 123456789.99;
console.log(formatCurrency(amount)); // 输出：123,456,789.99
```
这个函数会将输入的数字按照每三位插入一个逗号的方式进行格式化，同时保留小数部分（如果有的话）。

如果你正在使用FineReport，你也可以在FineReport的JS脚本中
使用这个函数。

例如，你可以在报表的JS脚本中这样使用：
```javascript
let amount = rs['Amount']; // 假设 'Amount' 是你的数据字段let formattedAmount = formatCurrency(amount);
```
这样，`formattedAmount`就会是你格式化后的金额。

然后，你可以将`formattedAmount`用于报表的显示。

finereport js参数赋值在FineReport中，我们经常会使用一些JS参数来控制报表的展示效果和交互效果。

在本文中，我们将用中括号作为主题，一步一步介绍如何给JS参数赋值。

一、什么是JS参数JS参数指的是在FineReport报表中，由JS代码控制并传递给报表的一些参数。

这些参数可以用于控制报表的展示效果、交互效果、数据查询、数据导出等方面。

比如，我们可以使用JS参数控制报表的输入控件、按钮的样式、文本框的默认值，实现交互效果；也可以使用JS参数控制报表的数据查询条件、排序方式、过滤条件等，实现更精确的数据查询。

二、JS参数的定义方式在FineReport中，JS参数通常是通过“参数池”进行定义和传递的。

在报表设计器中，我们可以通过如下步骤进行定义：1、选择“数据集”视图，打开报表的数据集配置界面。

2、在数据集中选择“计算字段”，点击“编辑”按钮。

3、在计算字段编辑界面中，选中“参数池参数”选项卡，并点击右侧的“添加”按钮。

4、在弹出的参数编辑界面中，填写参数的名称、类型、默认值、描述等信息。

5、在参数编辑界面中，勾选“JS参数”选项，然后在“JS参数表达式”中编写JS代码，用来控制参数的赋值逻辑。

6、在报表设计器中，我们可以通过表格、输入控件、按钮等方式使用这些JS 参数。

三、JS参数的赋值方式在定义了JS参数之后，我们就可以使用JS代码来控制参数的赋值了。

在FineReport中，有多种方式可以进行参数赋值，其中包括常见的赋值方式，如：直接赋值、数组下标赋值、对象属性赋值、动态赋值等。

下面将一一进行介绍。

1、直接赋值直接赋值指的是在JS代码中直接为参数设置一个固定的值。

例如，我们可以使用如下代码将参数“myParam”设置为字符串“Hello World!”：params["myParam"] = "Hello World!";使用直接赋值的方式可以灵活地控制参数的取值，但需要注意，我们必须在JS 代码中显式地赋值，否则参数的值不会被设置。

∙南京帆软软件公司 ∙商务咨询电话：86-025-5186 2240 ∙商务咨询邮箱：business@ ∙公司网址：FineReport 报表工具参数控件取值与置数在报表参数中，可通过添加参数控件的编辑后事件来实现用一个参数控制另一个参数。

以下例子是用参数username 来对state 置数，username 为下拉框自定义的几个名字，state 为单选按钮，1和2。

当username 有值时，取state 的状态，要是2，则置为1，若为1，则不变；当没有值时，取state 的状态，要是2，则不变，若为1，则置为2。

1. 连接数据库FRDemo2. 设计模板2.1 新建报表2.2 定义参数在菜单栏中选择报表|报表参数，打开参数定义面板，添加两个参数state 和username ，默认值选择字符串形式，如下图2.3 参数设计打开参数设计界面，按照下图安排参数的位置state 控件类型选择单选按钮组，数据为自定义的1和2，如图∙南京帆软软件公司 ∙商务咨询电话：86-025-5186 2240 ∙商务咨询邮箱：business@ ∙公司网址：username 控件类型为下拉框，数据也为自定义的几个数据，如图2.4 事件编辑在username 的事件编辑中添加编辑后事件，JS 代码如下var state= this.options.form.getWidgetByName("state");var username = this.options.form.getWidgetByName("username").getValue(); if (!username){state.setValue(2);}else{state.setValue(1);}该段代码是用来对state 参数置数，当username 为空时，将state 置数为2,当username 有值时，将state 置数为1，如图所示∙南京帆软软件公司 ∙商务咨询电话：86-025-5186 2240 ∙商务咨询邮箱：business@ ∙公司网址：3. 保存并预览点击设计器分页预览，当username 有值是，state 置数为1当username 为空时，state 置数为2注意，state 无法通过username 置数为，Js 里面,state 为0，默认返回false以上例子是获得控件的实际值。

FineReport报表软件应用案例1．清华同方在竞标北京市统计信息二期工程设计与建设项目中，帆软与清华同方珠联璧合，使得清华同方电子政务事业部成功中标，其中清华同方作为实施方在这次项目中所使用的核心报表软件便是帆软公司提供的FineReport报表。

清华同方以“科教兴国”为己任，密切依托清华大学世界一流技术平台，走高科技企业发展之路。

已获得了专利权566项，入选“中国科技100强”，“世界品牌500强”，历年被评为“中国电子信息百强”、“守信企业”。

将技术视为核心竞争力的清华同方，对合作伙伴的选择十分挑剔，对对方技术的扎实性和业务的专业性有着严格的要求。

最终同方选择了与之价值观高度吻合的帆软作为这次重要项目的合作者。

北京市统计信息系统建设的主要目标是在北京市统计局管辖的范围内建立一个以网络技术、计算机技术与现代信息技术为支撑的业务管理平台。

清华同方负责的本阶段建设内容包括统一的标准化体系的建设，并以“集成化、平台化、综合化”的设计思想为主线建立五大业务系统，即基本单位名录管理系统、数据采集与处理系统、数据综合应用系统、辅助办公系统和统计信息发布与服务系统。

而FineReport报表全面的功能设置和别具一格的产品特性能够完全满足大规模系统建设的项目需求。

FineReport独有的基于java版本的格子控件提供了强大的二次开发功能，定制出针对统计行业的专有报表设计器。

FineReport通过高效灵活的设计器，可以自由制作符合自身需求的表单，对于大规模大批量的数据录入十分方便快捷，无需任何代码编写。

FineReport服务器创新的数据缓存容器，能把从数据库读取的数据、设计的模板，以及运算后的模板等将会占用很多内存的数据存放到该容器内，使得FineReport服务器支持无限并发和超大数据的显示，与信息系统建设的项目要求非常吻合。

帆软在创新为源、技术立本、客户至上、诚信为宗的企业理念的指导下，为清华同方提供了优质产品和服务，不仅使同方在该项目上一举中标，而且在接下来的项目进程中，FineReport报表充分发挥自身产品性能的优势，协助同方顺利完成任务。

js自定义按钮导出1. 描述FineReport支持多种不同的导出方式，直接使用FineReport内置导出按钮可以非常快捷方便的来对各种格式的输出，但是我们在web页面集成中的时候，往往只想讲报表内容嵌入到iframe中，而工具栏以及工具栏上的按钮都会隐藏掉，而使用web页面自定义的按钮，那么，此时，这种自定义按钮如何实现导出呢，如下图所示：2. 示例如上图所示，我们新建一个html页面，定义一个工具栏和一个iframe，工具栏中定义上图所示的按钮，iframe 中嵌入FR中的报表，如下图：2.1 FR报表设置打开设计器，找到上面web页面中嵌入的那张模板，由于要使用自定义按钮作为工具栏，那么FR报表内置的工具栏就无需显示出来。

点击模板>模板web属性>分页预览设置，去掉使用工具栏前面的勾选，如下图：2.2 自定义导出按钮web页面中定义了6个自定义导出按钮，那么怎样才能实现导出操作呢？FineReport导出操作的js接口为：导出PDF：exportReportToPDF()导出[Excel](分页)：exportReportToExcel('page')导出[Excel](原样)：exportReportToExcel('simple')导出[Excel](分页分sheet)：exportReportToExcel('sheet')导出[图片]：exportReportToImage('gif')【括号里面可以更换参数，比如说png，jpg等等图片类型】导出[word]：exportReportToWord()故，各个按钮的点击事件应该调用上述的js接口来实现其对应的导出格式，比如说导出PDF，那么其按钮的onclikc事件为：注：document.getElementById('reportFrame')是获取到iframe框架，然后通过contentWindow得到报表窗口，并拿到contentPane这个报表容器，最后就可以从容器中调用各种导出接口的方法了。

finereport js调用oracle存储过程如何在FineReport中使用JavaScript调用Oracle存储过程FineReport是一款强大的企业级报表设计与展示平台，它与Oracle数据库的集成十分紧密，可以方便地进行数据的查询和处理。

当我们需要在FineReport中使用JavaScript调用Oracle存储过程时，可以按照下面的步骤进行操作。

步骤一：安装FineReport与配置Oracle数据库连接首先，确保您已经安装了FineReport并且已经配置好了与Oracle数据库的连接。

在FineReport中，我们可以通过在数据源配置中设置数据库的连接信息来实现与Oracle数据库的连接。

步骤二：创建存储过程在Oracle数据库中创建存储过程，以供JavaScript调用。

存储过程是在数据库中预定义的一组SQL语句，可以按照需要进行参数传递和数据处理。

例如，我们创建一个简单的存储过程来查询员工表中的数据：CREATE OR REPLACE PROCEDURE get_emp_data ISBEGINSELECT * FROM employees;END;步骤三：在FineReport中创建报表使用FineReport设计工具，创建一个报表用于展示存储过程返回的数据。

在报表设计中，我们可以使用FineReport提供的各种组件来展示数据，例如表格、图表等。

步骤四：使用JavaScript调用存储过程在FineReport中，我们可以使用JavaScript来编写与报表交互的逻辑。

下面是一个示例代码，演示如何使用JavaScript调用Oracle存储过程并将结果展示在报表中：function callProcedure() {var conn = database.openConn(); 打开数据库连接var stmt = conn.prepareStatement("{call get_emp_data}"); 准备调用存储过程的SQL语句var rs = stmt.executeQuery(); 执行查询语句while(rs.next()) {处理查询结果var empName = rs.getString("emp_name");var empAge = rs.getInt("emp_age");var empSalary = rs.getDouble("emp_salary");将结果展示在报表中report.setCellData("employee_table", empName, empAge, empSalary);}rs.close(); 关闭结果集stmt.close(); 关闭语句conn.close(); 关闭连接}在上述代码中，使用database.openConn()方法打开数据库连接，然后使用prepareStatement方法准备调用存储过程的SQL语句。

FineReport——JS⼆次开发（复选框全选）在进⾏查询结果选择的时候，我们经常会⽤到复选框控件，对于如何实现复选框全选，基本思路：
在复选框中的初始化事件中把控件加⼊到⼀个全局数组⾥，然后在全选复选框⾥对数组⾥的控件进⾏遍历赋值。

⾸先，定义两个复选框控件，⼀个⽤作全选复选框，⼀个⽤作每条信息前⾯的复选框，在全选复选框的状态改变
事件中添加如下JS⽅法：
var flag=this.getValue(); //获取当前复选框控件的状态，true /false
for(var i=0;i<window.lineboxes.length;i++){ //循环遍历每个复选控件
var cr=FR.cellStr2ColumnRow(window.lineboxes[i].options.location);
//由每个控件位置获取⾏号列号
_g().setCellValue(cr.col, cr.row, flag); //逐⼀赋值当前状态
}
在单选复选框中添加如下JS：
if (!window.lineboxes) {
window.lineboxes = []; //控件加⼊到⼀个全局数组⾥
}
lineboxes[lineboxes.length] = this;。

vue调用finereportVue是一种流行的JavaScript框架，用于构建用户界面。

它提供了一种简单而灵活的方式来创建交互式的Web应用程序。

而FineReport是一款强大的报表工具，可以帮助用户快速生成各种复杂的报表。

本文将介绍如何在Vue中调用FineReport来实现报表功能。

首先，我们需要在Vue项目中引入FineReport的相关文件。

可以通过在index.html文件中添加以下代码来引入FineReport的JavaScript文件：```html<script src="http://your-fine-report-url/fr.js"></script>```在Vue组件中，我们可以使用`mounted`生命周期钩子来初始化FineReport。

在这个钩子函数中，我们可以创建一个FineReport的实例，并指定报表的相关配置。

例如，我们可以设置报表的数据源、样式、参数等。

```javascriptmounted() {const fr = new window.FineReport();fr.setConfig({host: 'http://your-fine-report-url',report: 'your-report-file-path',params: {// 设置报表参数},// 其他配置项});fr.render('report-container');},```在上面的代码中，我们首先创建了一个FineReport的实例，并通过`setConfig`方法来设置报表的相关配置。

其中，`host`表示FineReport的服务器地址，`report`表示报表文件的路径，`params`表示报表的参数。

我们还可以通过其他配置项来设置报表的样式、导出选项等。

最后，我们通过调用`render`方法来渲染报表。