电子表格FineReport教程：[17]自定义按钮

2025-10-27 11:50:10

1、描述

自定义如下图翻页按钮：

2、自定义翻页按钮

如上图中的首页、上一页、下一页、末页按钮，直接调用FR内置方法即可，如下首页按钮：

其它上一页、下一页、末页按钮分别对应于方法gotoPreviousPage()、gotoNextPage()、gotoLastPage()。

3、页码显示

如上图显示当前报表所在页与报表总页数，获得报表contentPane后可以通过contentPane.currentPageIndex及contentPane.reportTotalPage来获取当前所在页与总页数。

由于页码需要在报表加载完后才能够获得，且翻页后当前页码也要随之变化，因此我们在contentPane的加载结束后监听afterload事件中将页码信息赋给文本框。

function afterload() { //iframe加载后触发

var contentPane = document.getElementById("reportFrame").contentWindow.contentPane; //获取报表contentPane

var cPageIndex = contentPane.currentPageIndex; //当前所在页

var pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页"; //报表首次加载结束后显示的页码信息

document.getElementById("page").value = pv; //将页码信息赋给page文本

contentPane.on("afterload", function() { //报表加载结束监听事件

cPageIndex = contentPane.currentPageIndex; //每次加载完后重新获取当前页码

pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页"; //重新生成页码信息

document.getElementById("page").value = pv; //重新给page文本赋页码信息

});

}

4、跳转到指定页

如上图实现输入某个数字后，点击后面的“跳转”就跳到文本框中写的那页。

给“跳转”加上点击事件gotopage，在js中获取文本框中输入的页码，通过contentpane.gotoPage(parseInt(num)) 跳转到指定页。

注：gotoPage()中的参数必须是数值型的，而文本框中输入的为字符串，因此需要使用parseInt()将其转为数值。

function gotopage() {

var contentpane= document.getElementById('reportFrame').contentWindow.contentPane;

var page = document.getElementById("index").value;

if(page >= contentpane.reportTotalPage) {

contentpane.gotoLastPage();

}

contentpane.gotoPage(parseInt(page));

}

5、示例完整代码

<html>

<head>

<title>自定义浏览页面</title>

function afterload() { //iframe加载后触发

var contentPane = document.getElementById("reportFrame").contentWindow.contentPane; //获取报表contentPane

var cPageIndex = contentPane.currentPageIndex; //当前所在页

var pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页"; //报表首次加载结束后显示的页码信息

document.getElementById("page").value = pv; //将页码信息赋给page文本

contentPane.on("afterload", function() { //报表加载结束监听事件

cPageIndex = contentPane.currentPageIndex; //每次加载完后重新获取当前页码

pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页"; //重新生成页码信息

document.getElementById("page").value = pv; //重新给page文本赋页码信息

});

}

function gotopage() {

var contentpane= document.getElementById('reportFrame').contentWindow.contentPane;

var page = document.getElementById("index").value;

if(page >= contentpane.reportTotalPage) {

contentpane.gotoLastPage();

}

contentpane.gotoPage(parseInt(page));

}

</script>

</head>

<body>

到<input id ="index" type ="text" size="3"/>页 <a onclick="gotopage()" href="javascript:void(0)">跳转</a>

</div>

</body>

</html>

由于用户自定义工具栏，显示报表时不需要显示FR内置工具栏，因此在报表url后面加上&__showtoolbar__=false。

1、问题描述

在自定义工具栏中，可以显示总页数，那么有什么方法能实现如下图所示，显示数据的总个数呢？

电子表格FineReport教程：[17]自定义按钮

2、实现思路

通过在某个单元格中使用count函数计算总的数据条数，然后在分页预览的加载结束事件中获取对应单元格的值并赋值给页面中的文本框。

注：使用count函数的单元格必须在扩展数据的上方单元格。

3、产生问题

点击下一页时，单元格中显示的是下一页数据中对应单元格的数据而不是总条数。

4、解决方案

通过使用重复标题行，让count函数所在的单元格固定在一个位置。

5、模板设置

打开模板

打开模板：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Primary\DetailReport\Details_5.cpt

修改模板

在第一行数据前，插入一行数据，然后在A1单元格填写=count(A3)，如下图所示：

电子表格FineReport教程：[17]自定义按钮

6、隐藏行列

隐藏第一行单元格，右击第一行，弹出下图：

选择隐藏即可。

电子表格FineReport教程：[17]自定义按钮

7、加载结束事件设置

给此模板增加加载结束事件，具体的JS代码如下：

var totalnumber=$("tr[tridx=0]","div.content-container").children().eq(0).text();//获取A1单元格的值

parent.document.getElementById("e").value="共"+totalnumber+"条数据";//给页面上id为e的文本框赋值

保存模板

8、页面设置

打开html页面

打开%FR_HOME%\WebReport\page_demo\custoolbar.html。

增加一个文本框

在body标签中的div标签中增加一个文本框控件，控件的id为e，定义如下：

更换iframe的src

将iframe的src更换为刚刚保存的模板即为：/WebReport/ReportServer?reportlet=/doc/Primary/DetailReport/Details_7.cpt&__showtoolbar__=false

9、完整代码

完整代码如下：

<html>

<head>

<title>自定义浏览页面</title>

function afterload(){

var contentPane = document.getElementById("reportFrame").contentWindow.contentPane;

var cPageIndex = contentPane.currentPageIndex;

var pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";

document.getElementById("a").value = pv;

contentPane.on("afterload", function(){

cPageIndex = contentPane.currentPageIndex;

pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";

document.getElementById("a").value = pv;

});

}

function gotopage()

{

var contentpane= document.getElementById('reportFrame').contentWindow.contentPane;

var page = document.getElementById("c").value;

if(page >= contentpane.reportTotalPage)

{

contentpane.gotoLastPage();

}

contentpane.gotoPage(parseInt(page));

}

</script>

</head>

<body>

</div>

</body>

</html>

10、效果查看

访问totalnumber.html即可查看效果，效果如上图。

1、报表嵌在iframe中

如果是报表嵌在iframe中，在html页面可直接调用FR内部的导出方法，如导出PDF、导出Excel（分页）、导出Excel（原样）、导出Excel（分页分sheet）、导出Word等，界面效果如下：

电子表格FineReport教程：[17]自定义按钮

2、需要添加的代码如下

<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page')">导出[Excel](分页)</button>

<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('simple')">导出[Excel](原样)</button>

<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('sheet')">导出[Excel](分页分Sheet)</button>

3、报表未嵌在iframe中

还有一种情况视报表没有嵌入在iframe中或者导出的报表与预览的报表不同，这时可以采用window.open()方法。

这时可以将上述的button的onclick事件修改，代码为

<button type="button" onclick="window.open(FR.cjkEncode('/WebReport/ReportServer?reportlet=doc/Primary/Parameter/parameter.cpt&地区=华东')+'&format=excel')">导出[Excel]</button>

1、问题描述

当需要根据不同用户不同地区导出多个报表时，不希望分别导出相应格式进行备份，比较麻烦，希望可以把多个报表同时导出成某种格式了。这样要怎样实现呢？下面详细介绍使用步骤：

2、原理

当您批量导出的报表中无参数时，可以将页面地址改为如下格式：

http://localhost:8075/WebReport/ReportServer?reportlets=({reportlet:/doc/Primary/CrossReport/Cross.cpt},{reportlet:/doc/Primary/DetailReport/Details.cpt})&format=XX

当您批量导出的报表中带有参数时，可使将页面地址改为如下格式：

http://localhost:8075/WebReport/ReportServer?reportlets=({reportlet:/doc/reportname.cpt,paraname1:paravalue1,paraname2:paravalue2,...},{reportlet:/doc/reportname.cpt,paraname1:paravalue1,paraname2:paravalue2,...},{...})&format=XX

注：format后面的XX，是指导出文件的格式，如果导出的是pdf，就写&format=pdf。其中{reportlet:/doc/reportname.cpt}，是模板的访问路径；paraname1:paravalue1，是指导出各模板内容时，对应的参数名和参数值,多个参数中间用逗号隔开。

另：批量导出时导出的是一个文件，如果是excel，则会将多个报表导出在多个sheet中。

批量导出时，如果需要对导出的文件重命名，可以在url后面加上"&__filename__=name"，"name"就是自定义的文件名.

http://localhost:8075/WebReport/ReportServer?reportlets=({reportlet:/doc/reportname.cpt,paraname1:paravalue1})&__filename__=name

3、实现步骤

我们用一个按键来实现无参数导出成excel格式，只需要添加一个+'&format=excel按钮，将路径设置为上述格式，代码如下

<button type="button" onclick="window.open(FR.cjkEncode('/WebReport/ReportServer?reportlet=({reportlet:/doc/Primary/Parameter/Parameter.cpt,地区:华北},{reportlet:/doc/Primary/CrossReport/Cross.cpt})'+'&format=excel'))">导出[Excel]</button>

上面的按钮的作用是导出地区参数为华北的Parameter.cpt和无参数Cross.cpt

注:自定义批量导出时，如果在导出的同时还在下载多个文件，推荐将浏览器的安全级别降低，避免被浏览器将导出文件判定为不安全文件。

1、问题描述

一般情况下我们将网页中的一部分潜入了一张FR做的报表，图表数据比较密集，我们希望能够进行缩放，从而更加清楚地查看报表，就需要定义报表的缩放。

缩放可放大和缩小报表页面，Web页面调用,效果如下;

注：也可以直接在模板工具栏中添加缩放按钮。

电子表格FineReport教程：[17]自定义按钮

2、示例

我们使用模板FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\Bubble.cpt来作为内嵌iframe。

首先定义javascript代码触发放大缩小的功能，代码如下：

function afterload(){

document.getElementById('reportFrame').contentWindow.contentPane.scale('-');

fuzhi();

}

function afterload2(){

document.getElementById('reportFrame').contentWindow.contentPane.scale('+');

fuzhi();

}

function fuzhi()

{

var contentPane = document.getElementById("reportFrame").contentWindow.contentPane;

var zoom = contentPane.zoom * 100 +"%";

document.getElementById("zoom").value = zoom; //将新的显示百分比赋给zoom文本框

}

</script>

3、其次在body里面直接调用js里面定义好的方法，代码如下：

</div>

4、完整代码如下

<html>

<head>

<title>FineReport Demo</title>

</head>

function afterload(){

document.getElementById('reportFrame').contentWindow.contentPane.scale('-');

fuzhi();

}

function afterload2(){

document.getElementById('reportFrame').contentWindow.contentPane.scale('+');

fuzhi();

}

function fuzhi()

{

var contentPane = document.getElementById("reportFrame").contentWindow.contentPane;

var zoom = contentPane.zoom * 100 +"%";

document.getElementById("zoom").value = zoom; //将新的显示百分比赋给zoom文本框

}

</script>

<body>

</div>

</body>

</html>

1、问题描述

在我们使用填报表时，有时只需要提交按钮将数据入库，不希望使用FR内置的工具栏的按钮，希望能够自定义提交按钮，自定义按钮既可以是FineReport模板中添加的按钮控件，也可以是web集成页面中，html的按钮标签，FineReport模板中的按钮控件实现自定义提交操作详细请参照自定义按钮实现提交操作，而在web页面中，点击html中的按钮提交iframe中的FineReport报表就在下面详述。

效果如下图:

电子表格FineReport教程：[17]自定义按钮

2、实现方法

使用模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\FreeFrom\FreeForm.cpt

在网页中添加按钮代码如下：

3、完整代码：

<html>

<head>

<title>自定义浏览页面</title>

</head>

<body>

</div>

</body>

</html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。