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

一、概述

1

問題描述。

使用報表整合後，如何使用自訂按鈕匯出報表呢？如下所示。
①Web頁面整合FineReport報表，②自訂匯出按鈕。

2

實現思路。

如果報表採用 iframe 的方式整合在頁面中，可以利用 JS 直接呼叫 FR 內部的匯出方法，如果需要匯出的範本不在頁面中，可以利用 window.open 來開啟帶匯出引數 URL 的方式來實現報表匯出。

二、操作步驟-範例一

如果是報表嵌在 iframe 中，JS 自訂按鈕匯出在 HTML 頁面可直接呼叫FR內部的匯出方法，如匯出 PDF、匯出 Excel（分頁）、匯出 Excel（原樣）、匯出 Excel（分頁分 sheet）、匯出 Word 等。
新建 export.html，完整程式碼如下。
将 export.html 放置到【%FR_HOME%\webapps\webroot\help\page_demo】路徑下。
打開伺服器，在浏覽器端輸入http://localhost:8075/webroot/help/page_demo/export.html，即可看到 Web 頁面整合報表。
點選頁面上自訂的【匯出】按鈕，即可匯出對應格式的檔案。

<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="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToPDF()">PDF</button>     
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page')">Excel(Full page)</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('simple')">Excel(Unaltered)</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('sheet')">Excel(Page to Sheet)</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToWord()">Word</button>
<iframe id="reportFrame" width="100%" height="100%" name="reportFrame" src="/webroot/decision/view/report?viewlet=doc-EN/Primary/Parameter/Parameter_Reference.cpt&region=East China">
</iframe>    
  </body>  
</html>

三、操作步驟-範例二

還有一種情況視報表沒有嵌入在 iframe 中或者匯出的報表與預覽的報表不同，這時可以採用 window.open() 方法。
這時可以將上述的 button 的 onclick 事件修改，程式碼：
【<button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc-EN/Primary/Parameter/Parameter_Reference.cpt&region=East China')+'&format=excel')">Excel</button>】
新建export1.html，完整程式碼如下所示。
將 HTML 檔案放置到指定位置。
將建立的 HTML 檔案放置到【%FR_HOME%\webapps\webroot\help\page_demo 】路徑下。
注：使用者若想了解跨域相關的問題，請參考跨域呼叫 JS 和 JS 跨域解決方案。

<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-EN/Primary/Parameter/Parameter_Reference.cpt&region=East China')+'&format=excel')">Excel</button>
<button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc-EN/Primary/Parameter/Parameter_Reference.cpt&region=East China')+'&format=pdf')">PDF</button>
<button type="button" onclick="window.open(encodeURI('/webroot/decision/view/report?viewlet=doc-EN/Primary/Parameter/Parameter_Reference.cpt&region=East China')+'&format=word')">Word</button>
<iframe id="reportFrame" width="100%" height="100%" name="reportFrame" </iframe>  
  </body>  
</html>

四、資料下載

export.html

export1.html

已經是第一篇

已經是最後一篇

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

中文（简体） English 日本語

中文（繁體）

自訂匯出按鈕

一、概述

1

問題描述。

2

實現思路。

二、操作步驟-範例一

三、操作步驟-範例二

四、資料下載

附件列表