在線報表FineReport中js自定義按鈕…

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

工具/原料

• 在線報表FineReport7.1.1
• 大小：148.2M 適用平臺：windows/linux

方法/步驟

1. 我們新建一個html頁面，定義一個工具欄和一個iframe，工具欄中定義上圖所示的按鈕，iframe中嵌入FR中的報表，如下圖：
2. FR報表設置

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

   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事件爲：

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

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

4. 完整代碼

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

    

    

    

      

      

      

    

    

    

        

    

    

    

5. 效果查看

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

   END

原作者：FineReport