1. 概述
1.1 應用場景
雖然 FineReport 支持多種不同的導出方式，但是在 Web 頁面集成 中，用戶往往只想将報表内容嵌入到 iframe 中，而工具欄以及工具欄上的按鈕都會隐藏掉。
1.2 功能簡介
用戶可以通過 Web 頁面自定義按鈕實現導出。如下圖所示：
3. 報表采用 iframe 的方式集成在頁面中
3.1 自定義導出按鈕
3.1.1 JavaScript 接口
FineReport 導出操作的 JS 接口有以下幾種：
| 導出格式 | 接口 | |
|---|---|---|
| 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 接口來實現其對應的導出格式。
例如導出 PDF 格式，那麽導出按鈕的 onclick 事件爲：
onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToPDF()"
注：docment.getElementById('reportFrame') 是獲取到 iframe 框架，然後通過 contentWindow 得到報表窗口，并拿到 contentPane這個報表容器，最後就可以從容器中調用各種導出接口的方法了。
3.1.3 完整 HTML 文件
1）新建 export.html，内容如下：
點擊下載文件：export.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="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='/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 個字符。
