自訂匯出按鈕- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 應用場景

雖然 FineReport 支援多種不同的匯出方式，但是在 Web頁面整合中，使用者往往只想將報表內容嵌入到 iframe 中，而工具欄以及工具欄上的按鈕都會隱藏掉。

1.2 功能簡介

使用者可以透過 Web 頁面自訂按鈕實現匯出。如下圖所示：

3. 報表採用 iframe 的方式整合在頁面中

3.1 自訂匯出按鈕

3.1.1 JavaScript API

FineReport 匯出操作的 JS API有以下幾種：

匯出格式		API
PDF		exportReportToPDF()
Excel	分頁匯出 xlsx 格式	exportReportToExcel('page')
	原樣匯出 xlsx 格式	exportReportToExcel('simple')
	分頁分 Sheet 匯出 xlsx格式	exportReportToExcel('sheet')
	分頁匯出 xls 格式	exportReportToExcel('page_isExcel2003')
	原樣匯出 xls 格式	exportReportToExcel('simple_isExcel2003')
	分頁分 Sheet 匯出 xls 格式	exportReportToExcel('sheet_isExcel2003')
Word		exportReportToWord()
圖片	PNG	exportReportToImage('png')
	JPG	exportReportToImage('jpg')
	GIF	exportReportToImage('gif')

注：JAR 包時間在 2016-10-10 日之前，匯出的 Excel 格式預設為 xls 。

3.1.2 使用方法

各個按鈕的點選事件應該呼叫上述的 JavaScript API來實現其對應的匯出格式。

例如匯出 PDF 格式，那麼匯出按鈕的 onclick 事件為：

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

3.1.3 完整 HTML 檔案

1）建立 export.html，內容如下：

點選下載檔案：export.zip

<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._g().exportReportToPDF()">匯出[PDF]</button>  
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow._g().exportReportToExcel('page')">匯出[Excel](分頁)</button>       
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow._g().exportReportToExcel('simple')">匯出[Excel](原樣)</button>       
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow._g().exportReportToExcel('sheet')">匯出[Excel](分頁分sheet)</button>
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow._g().exportReportToExcel('page_isExcel2003')">匯出[Excel](分頁匯出xls格式)</button>      
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow._g().exportReportToExcel('simple_isExcel2003')">匯出[Excel](原樣匯出xls格式)</button>       
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow._g().exportReportToExcel('sheet_isExcel2003')">匯出[Excel](分頁分sheet匯出xls格式)</button> 
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow._g().exportReportToImage('png')">匯出[圖片]</button>  
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow._g().exportReportToWord()">匯出[Word]</button>              
    </div>  
    </fieldset>
    <iframe id="reportFrame" width="100%" height="100%" src="/webroot/decision/view/report?viewlet=doc/Primary/DetailReport/Details.cpt"></iframe>  
  </body>  
</html>

2）將 export.html 放置到 %FR_HOME%\webapps\webroot\help\page_demo 路徑下，如下圖所示：

3.2 關閉點選劫持攻擊防護

開啟資料決策平台，點選「管理系統>安全管理>安全防護>Security Headers>進階設定」，關閉「點選劫持攻擊防護」按鈕。如下圖所示：

3.3 效果預覽

開啟伺服器，在瀏覽器端輸入http://localhost:8075/webroot/help/page_demo/export.html，即可看到 Web 頁面整合報表。

點選頁面上自訂的「匯出按鈕」，即可匯出對應格式的檔案。如下圖所示：

4. 報表沒有嵌入在 iframe 中

使用 window.open() 方法實現。

4.1 自訂匯出按鈕

4.1.1 非跨域匯出

1）建立export1.html，內容如下：

點選下載：export1.html

<html>
  <head>  
  <title>FineReport自訂匯出</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script> 
  </head>  
  <body>
<button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc/Primary/Parameter/parameter.cpt&地區=華東')+'&format=excel')">匯出[Excel]</button>
<button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc/Primary/Parameter/parameter.cpt&地區=華東')+'&format=pdf')">匯出[pdf]</button>
<button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc/Primary/Parameter/parameter.cpt&地區=華東')+'&format=word')">匯出[word]</button>
<iframe id="reportFrame" width="100%" height="100%" name="reportFrame" </iframe>  
  </body>  
</html>

4.1.2 跨域匯出

建立的 HTML 檔案放置到本地工程路徑下，存取連結：http://localhost:8075/webroot/help/page_demo/export2.html，點選匯出的是部署到 Tomcat 工程的 GettingStarted.cpt 範本。

建立 HTML 檔案，命名為 export2.html，如下所示：

點選下載：export2.html

注：跨域匯出時，兩個工程都需要開啟。

<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="window.open('http://localhost:8080/webroot/decision/view/report?viewlet=GettingStarted.cpt&format=excel')">匯出[Excel](原樣)</button>     
    </div> 
    </fieldset>
  </body> 
</html>

注1：若需要將範本匯出為其他格式，請參見：URL直接匯出修改程式碼。

注2：若希望在 iframe 中嵌入範本，在上面程式碼 </fieldset> 後加上下面程式碼即可：

<iframe id="reportFrame" width="50%" height="50%" src='http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt' ></iframe>

4.2 將 HTML 檔案放置到指定位置

將建立的 HTML 檔案放置到 %FR_HOME%\webapps\webroot\help\page_demo 路徑下，如下圖所示：

4.2 關閉點選劫持攻擊防護

開啟資料決策平台，點選「管理系統>安全管理>安全防護>Security Headers>進階設定」，關閉「點選劫持攻擊防護」按鈕。如下圖所示：

4.3 效果預覽

4.3.1 非跨域匯出

開啟伺服器，在瀏覽器端輸入http://localhost:8075/webroot/help/page_demo/export1.html，點選頁面上自訂的「匯出按鈕」，即可匯出對應格式的檔案。如下圖所示：

4.3.2 跨域匯出

在瀏覽器端輸入http://localhost:8075/webroot/help/page_demo/export2.html，點選頁面上自訂的「匯出按鈕」，即可匯出對應格式的檔案。如下圖所示：

4.4 注意事項

window.open() 方法在使用時，若編碼轉換後的 url 長度超出了瀏覽器最大長度限制，將匯出失敗。

注：IE 瀏覽器限制的最大長度為 2083 個字元。

已經是第一篇

已經是最後一篇

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

自訂匯出按鈕