1. 概述
前端預覽報表時,範本會被轉為 HTML,這個 HTML 的 head 標籤中會引入 FineReport 內建 JavaScript 檔案finereport.js,代碼如下:
<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>
finereport.js在報表工程目錄中沒有實體檔案,是由多個 JS 檔案直接在後臺記憶體中連結而成的。其中包含了許多內建 function 以及一些公有的屬性,不管是在範本中還是其他網頁中,只要引入了finereport.js,就能獲取到 FR 物件並且透過 FR.xxx 的形式呼叫公有的屬性與方法。FR 物件的屬性和方法可查看:全局API。
2. 功能介紹
報表載入時會自動引入finereport.js,因此在報表中新增 JavaScript 腳本時,可以直接使用 FR.xxx 來呼叫 FR 方法;如果需要在自己的網頁,如某個 JSP 頁面中呼叫 FR 的方法,需要先在 head 標籤引入 finereport.js ,再透過 FR.xxx 來呼叫 FR 方法。
3. 範例
3.1 報表中呼叫FR方法
3.1.1 新增按鈕
建立普通報表,選中 A1 儲存格,給儲存格新增一個【按鈕元件】,按鈕名稱改為【測試】,如下圖所示:
3.1.2 新增事件
進入【事件】,給按鈕新增一個【點擊】事件,如下圖所示:
JavaScript 代碼如下代码块所示:
FR.showDialog("Test",600,400,"Hello World")
3.1.3 效果預覽
儲存報表,點選【填報預覽】,點選【測試】按鈕後,彈出提示對話框,如下圖所示:
3.2 網頁中呼叫FR方法
3.2.1 建立HTML檔案
建立一個 HTML 檔案,實現自訂一個按鈕,點選按鈕彈出提示框。因為要用到 FR 物件的 showDialog 方法,所以代碼中需要引入 FineReport 內建 JavaScript 檔案finereport.js。自訂代碼如下:
點擊可下載 HTML 檔案:showDialog方法.rar。
注:代碼中呼叫了 CSS 彈框樣式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>FineReport Demo</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>
<link rel="stylesheet" type="text/css" href="/webroot/decision/view/report?op=emb&resource=finereport.css&cssVersion=1557882553214">
<script>
function button_onclick(){
FR.showDialog("Test", 600, 400, "Hello World")
}
</script>
<input type="button" value="測試" onclick="javascript:button_onclick();" />
</head>
<body>
</body>
</html>
3.2.2 放置HTML檔案將 HTML 檔案儲存到%FR_HOME%\webapps\webroot工程路徑下,如下圖所示:
3.2.3 效果預覽
注:預覽時工程必須是運作的。
開啟瀏覽器,地址欄輸入 HTML 檔案的 URL 路徑,如本地工程輸入:http://localhost:8075/webroot/1.html,即可存取該 HTML 檔案。
點選測試按鈕後,彈出提示框,提示框效果和 3.1 節報表中呼叫實現的效果一致。如下圖所示: