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 個字元。
