excel报表开发工具FineReport自定义翻页按钮

2025-10-18 09:33:31

1、自定义翻页按钮

由自定义工具栏按钮章节可以知道，针板排如上图中的首页、上一页、下一页、末页按钮，直接调用FR内置方法即可，如下首页按钮：

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

2、页码显示

如上图显示当前报表所在页与报表总页数，获得报表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文本赋页码信息

});

}

3、跳转到指定页

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

给“跳转”加上点击事件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));

}

4、示例完整番伐代码

<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。

已完成示例请查看%FR_HOME%\WebReport\page_demo\gpPage.html

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