下面就通過電子表格FineReport來簡單介紹一下自定義按鈕。
工具/原料
電子表格FineReport7.1.1
大小：148.2M 適用平臺：windows/linux
自定義翻頁按鈕
描述
自定義如下圖翻頁按鈕：
![電子表格FineReport教程：[17]自定義按鈕](https://img.yamab2b.com/20170916/14/86f602152f2cddab7f91d48f192d4151_thumb.jpg "電子表格FineReport教程：[17]自定義按鈕")
自定義翻頁按鈕
如上圖中的首頁、上一頁、下一頁、末頁按鈕，直接調用FR內置方法即可，如下首頁按鈕：
其它上一頁、下一頁、末頁按鈕分別對應於方法gotoPreviousPage()、gotoNextPage()、gotoLastPage()。
頁碼顯示
如上圖顯示當前報表所在頁與報表總頁數，獲得報表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文本賦頁碼信息
});
}
跳轉到指定頁
如上圖實現輸入某個數字後，點擊後面的“跳轉”就跳到文本框中寫的那頁。
給“跳轉”加上點擊事件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));
}
示例完整代碼
到頁 跳轉
由於用戶自定義工具欄，顯示報表時不需要顯示FR內置工具欄，因此在報表url後面加上&__showtoolbar__=false。
工具欄上顯示數據總個數
問題描述
在自定義工具欄中，可以顯示總頁數，那麼有什麼方法能實現如下圖所示，顯示數據的總個數呢？
![電子表格FineReport教程：[17]自定義按鈕](https://img.yamab2b.com/20170916/14/11500ed58935102a9ce8af0166f5c144_thumb.jpg "電子表格FineReport教程：[17]自定義按鈕")
實現思路
通過在某個單元格中使用count函數計算總的數據條數，然後在分頁預覽的加載結束事件中獲取對應單元格的值並賦值給頁面中的文本框。
注：使用count函數的單元格必須在擴展數據的上方單元格。
產生問題
點擊下一頁時，單元格中顯示的是下一頁數據中對應單元格的數據而不是總條數。
解決方案
通過使用重複標題行，讓count函數所在的單元格固定在一個位置。
模板設置
打開模板
打開模板：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Primary\DetailReport\Details_5.cpt
修改模板
在第一行數據前，插入一行數據，然後在A1單元格填寫=count(A3)，如下圖所示：
![電子表格FineReport教程：[17]自定義按鈕](https://img.yamab2b.com/20170916/14/5e2486fc83ae4f69f55737f15772f116_thumb.jpg "電子表格FineReport教程：[17]自定義按鈕")
隱藏行列
隱藏第一行單元格，右擊第一行，彈出下圖：
選擇隱藏即可。
![電子表格FineReport教程：[17]自定義按鈕](https://img.yamab2b.com/20170916/14/8696cc4563ea4d37ecbdbf5335ef16cc_thumb.jpg "電子表格FineReport教程：[17]自定義按鈕")
加載結束事件設置
給此模板增加加載結束事件，具體的JS代碼如下：
var totalnumber=$("tr[tridx=0]","div.content-container").children().eq(0).text();//獲取A1單元格的值
parent.document.getElementById("e").value="共"+totalnumber+"條數據";//給頁面上id為e的文本框賦值
保存模板
頁面設置
打開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
完整代碼
完整代碼如下：
效果查看
訪問totalnumber.html即可查看效果，效果如上圖。
自定義導出按鈕
報表嵌在iframe中
如果是報表嵌在iframe中，在html頁面可直接調用FR內部的導出方法，如導出PDF、導出Excel（分頁）、導出Excel（原樣）、導出Excel（分頁分sheet）、導出Word等，界面效果如下：
![電子表格FineReport教程：[17]自定義按鈕](https://img.yamab2b.com/20170916/14/38c7159be1f48deab666c6352f3738fb_thumb.jpg "電子表格FineReport教程：[17]自定義按鈕")
需要添加的代碼如下
報表未嵌在iframe中
還有一種情況視報表沒有嵌入在iframe中或者導出的報表與預覽的報表不同，這時可以採用window.open()方法。
這時可以將上述的button的onclick事件修改，代碼為
自定義批量導出
問題描述
當需要根據不同用戶不同地區導出多個報表時，不希望分別導出相應格式進行備份，比較麻煩，希望可以把多個報表同時導出成某種格式了。這樣要怎樣實現呢？下面詳細介紹使用步驟：
原理
當您批量導出的報表中無參數時，可以將頁面地址改為如下格式：
http://localhost:8075/WebReport/ReportServer?reportlets=({reportlet:/doc/Primary/CrossReport/Cross.cpt},{reportlet:/doc/Primary/DetailReport/Details.cpt})&format=XX
當您批量導出的報表中帶有參數時，可使將頁面地址改為如下格式：
,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"就是自定義的文件名.
,paraname1:paravalue1})&__filename__=name
實現步驟
我們用一個按鍵來實現無參數導出成excel格式，只需要添加一個+'&format=excel按鈕，將路徑設置為上述格式，代碼如下
上面的按鈕的作用是導出地區參數為華北的Parameter.cpt和無參數Cross.cpt
注:自定義批量導出時，如果在導出的同時還在下載多個文件，推薦將瀏覽器的安全級別降低，避免被瀏覽器將導出文件判定為不安全文件。
自定義縮放按鈕
問題描述
一般情況下我們將網頁中的一部分潛入了一張FR做的報表，圖表數據比較密集，我們希望能夠進行縮放，從而更加清楚地查看報表，就需要定義報表的縮放。
縮放可放大和縮小報表頁面，Web頁面調用,效果如下;
注：也可以直接在模板工具欄中添加縮放按鈕。
![電子表格FineReport教程：[17]自定義按鈕](https://img.yamab2b.com/20170916/14/aa4ed4cd2aedea22a6bc6a7ba672112b_thumb.jpg "電子表格FineReport教程：[17]自定義按鈕")
示例
我們使用模板FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\Bubble.cpt來作為內嵌iframe。
首先定義javascript代碼觸發放大縮小的功能，代碼如下：
其次在body裡面直接調用js裡面定義好的方法，代碼如下：
完整代碼如下
自定義提交按�
問題描述
在我們使用填報表時，有時只需要提交按鈕將數據入庫，不希望使用FR內置的工具欄的按鈕，希望能夠自定義提交按鈕，自定義按鈕既可以是FineReport模板中添加的按鈕控件，也可以是web集成頁面中，html的按鈕標籤，FineReport模板中的按鈕控件實現自定義提交操作詳細請參照自定義按鈕實現提交操作，而在web頁面中，點擊html中的按鈕提交iframe中的FineReport報表就在下面詳述�
效果如下�:
![電子表格FineReport教程：[17]自定義按鈕](https://img.yamab2b.com/20170916/14/7937deb2d1712392e0df080e7c050c35_thumb.jpg "電子表格FineReport教程：[17]自定義按鈕")
實現方法
使用模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\FreeFrom\FreeForm.cpt
在網頁中添加按鈕代碼如下�
完整代碼�