JS設定動態背景/邊框

1.1 預期效果

製作企業戰情室範本時，給報表或者報表中的某一部分新增動態背景或動態邊框。如下圖所示：

1.2 實現思路

1）透過新增「初始化後」事件或「載入結束」事件，使用 JS 呼叫 GIF 格式的圖片作為報表背景。

2）在儲存格中使用 WEBIMAGE 公式呼叫網頁中的 GIF 圖片，實現動態邊框。

2.1 準備圖片

準備 一張 GIF 動圖 1.gif，放置在報表工程%FR_HOME%\webapps\webroot\help\picture下。如下圖所示：

點選下載動圖 ：1.gif

2.2 決策報表範例

2.2.1 建立決策報表

1）點選設計器左上角「檔案>建立決策報表」，建立一張空白範本。

2）將 body 背景設定為「自訂>沒有背景」。因為在有顏色、圖片、漸變色等背景時，設定的動態背景不生效。

2.2.2 設定動態背景

選中 body，新增一個「初始化後事件」。輸入程式碼：

//URL中的地址要填寫圖片的實際地址
setTimeout(function() {
    $('.content-container').css({'background': 'url(/webroot/help/picture/1.gif)no-repeat','background-size':'100% 100%'});
}, 1000);

注：遠端設計時，圖片需放在伺服器工程上對應的資料夾下。

步驟如下圖所示：

2.2.3 效果預覽

儲存範本，點選「PC端預覽」，效果如下圖所示：

注：不支援行動端。

2.3 普通報表範例

在普通報表中，需要將「範本>紙張背景」設定為「自訂>顏色>透明」。如下圖所示：

設定動態背景的 JavaScript 程式碼相同，需在「範本>範本web屬性」中設定。在對應的預覽方式中，新增「載入結束」事件即可。如下圖所示：

若想在報表中實現動態邊框，可以透過在儲存格中使用 WEBIMAGE 公式呼叫網頁中的圖片。

3.1 設計報表

1）建立決策報表，為方便查看效果，點選頂部菜單欄「範本>PC端自適應屬性」，設定報表的佈局方式為「絕對佈局」。

2）在 body 中 新增一個 報表塊 report0。雙擊報表塊進入表格編輯介面。合併一片儲存格區域，插入公式：

webimage("http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/表單JS實體/2.gif")

如下圖所示：

注：普通報表中同樣合併儲存格後，在儲存格中插入相同公式即可。

3.2 效果預覽

如果需要作為其他組件的邊框，可以透過組件疊加的方式。如下圖所示：

儲存範本，預覽效果如下圖所示：

注：不支援行動端。

點選下載範本：

JS實現決策報表動態背景.frm

JS實現普通報表動態背景.cpt

JS實現動態邊框.frm