FineReport中JS如何自定義按鈕導出

FineReport支持多種不同的導出方式,直接使用FineReport內置導出按鈕可以非常快捷方便的來對各種格式的輸出,但是我們在web頁面集成中的時候,往往只想將報表內容嵌入到iframe中,而工具欄以及工具欄上的按鈕都會隱藏掉,而使用web頁面自定義的按鈕,那麼,此時,這種自定義按鈕如何實現導出呢?

如上圖所示,新建一個html頁面,定義一個工具欄和一個iframe,工具欄中定義上圖所示的按鈕,iframe中嵌入FineReport中的報表,如下圖:

FineReport報表設置

打開設計器,找到上面web頁面中嵌入的那張模板,由於要使用自定義按鈕作爲工具欄,那麼FineReport報表內置的工具欄就無需顯示出來。點擊模板>模板web屬性>分頁預覽設置,去掉使用工具欄前面的勾選,如下圖:

 

自定義導出按鈕

Web頁面中定義了9個自定義導出按鈕,那麼怎樣才能實現導出操作呢?

FineReport導出操作的JS接口爲:

導出PDF:exportReportToPDF()

導出[Excel](分頁):exportReportToExcel('page')

導出[Excel](原樣):exportReportToExcel('simple')

導出[Excel](分頁分sheet):exportReportToExcel('sheet')

導出[Excel](分頁導出xls格式):exportReportToExcel('page_isExcel2003')

導出[Excel](原樣導出xls格式):exportReportToExcel('page_isExcel2003')

導出[Excel](分頁分sheet導出xls格式):exportReportToExcel('page_isExcel2003')

導出[圖片]:exportReportToImage('gif')【括號裏面可以更換參數,比如說png,jpg等等圖片類型】

導出[word]:exportReportToWord()

故,各個按鈕的點擊事件應用調用上述的JS接口來實現其對應的導出格式,比如說導出PDF,那麼其按鈕的onclick時間爲:

 onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToPDF()"

docment.getElementById('reportFrame')是獲取到iframe框架,然後通過contentWindow得到報表窗口,並拿到contentPane這個報表容器,最後就可以從容器中調用各種導出接口的方法了。

其他的幾個按鈕的導出事件這裏就不一一講解了。

完整代碼

根據上述同樣的方法爲其他幾個按鈕添加導出事件,完整代碼如下:

<html>
  <head>  
  <title>FineReport自定義導出</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  </head>  
  <body>
 
<fieldset>
    <div id="toolbar">       
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToPDF()">導出[PDF]</button>  
    <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>
<button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page_isExcel2003')">導出[Excel](分頁導出xls格式)</button>      
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('simple_isExcel2003')">導出[Excel](原樣導出xls格式)</button>       
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('sheet_isExcel2003')">導出[Excel](分頁分sheet導出xls格式)</button> 
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToImage('png')">導出[圖片]</button>  
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToWord()">導出[Word]</button>              
    </div>  
</fieldset>
    <iframe id="reportFrame" width="100%" height="100%" src='/WebReport/ReportServer?reportlet=doc/Primary/DetailReport/Details.cpt' ></iframe>  
  </body>  
</html>

效果查看

點擊不同的按鈕,即可看到其導出的結果:


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章