點擊文字展示對應圖片

1.1 問題描述

在報表設計時有時會遇到如下需求：圖片與文字說明分開並形成目錄的形式，點選文字才能展示對應的圖片。如下圖所示：

1.2 解決思路

先透過新增「超級連結>動態參數」設定過濾，然後使用 TOIMAGE() 函式設定圖片展示。

注：仅支持不分页的场景下使用。

注：本文示例仅以普通报表为例，在 FVS 或 决策报表中同样适用，详情可自行下载文末模板查看。

2.1 資料準備

建立普通報表，建立兩個內建資料集分別為「問題」和「回答」。為了方便兩個資料集之間建立聯絡，這裏以 ID 欄位作為唯一標識。如下圖所示：

注：ID作為兩個資料集的唯一標識，Q表示問題，A表示回答。

2.2 圖片準備

點選下載圖片包：picture.rar

将每个问题对应的图片按照回答的 ID 进行重命名，例如第一个回答对应的图片则以「1」来命名。

将所有准备好的图片放置本地路径，或者是服务器路径（请注意区分服务器为 Windows 还是 Linux ），因为在 TOIMAGE() 函数中，Windows 路径表示为 D:/1.png，在 Linux 中路径表示为 /u01/.../.../1.png。

本示例将解压后的图片文件夹 picture 放置在本地的报表工作目录下：D:\FineReport_11.0\webapps\webroot\WEB-INF\reportlets

注：picture 為自己建立的資料夾。

2.3 報表設計

儲存格內容設定如下表：

儲存格內容設定完成後，給標題行新增下邊框，表格樣式如下圖所示：

注：第一行的文字与图片仅为装饰，可自行设计或在网络搜索下载免费资源。 

2.4 設定動態參數

因為要透過點選問題文字達到展示圖片的效果，所以要給問題文字所在儲存格新增一個動態參數型別的超級連結。

注：FVS 中超链类型可选择「当前页面对象」，决策报表中超链类型可选择「当前决策报表对象」。

選中 C2 儲存格，點選右側屬性面板「超級連結」，新增「動態參數」，參數名稱為「ID」，值型別為公式，輸入 A2。如下圖所示：

注：設定超連結後字體為變成藍色並帶有底線顯示，手動調整字體設定取消底線，字體顏色設為黑色即可。

2.5 設定過濾

雙擊回答所在儲存格 G2，設定過濾，設定「回答」資料集中的 ID 欄位等於參數 $ID。

注：此處的 $ID 也是對應每個圖片名稱的 ID。

2.6 設定圖片展示

1）選中 G3 儲存格，按滑鼠右鍵選擇「儲存格元素>插入公式」，TOIMAGE() 公式為：TOIMAGE("D:/FineReport_11.0/webapps/webroot/WEB-INF/reportlets/picture/"   $ID   ".png", false)

注：需要將檔案目錄路徑中的 \ 都改為 /  。

注：因為圖片的名稱（$ID）需要與「回答」資料集中的 ID 欄位一一對應，所以只能放置一張圖片。

2）G3 儲存格展示圖片時可能圖片大小不一，會顯示不全，設定「儲存格屬性>樣式>對齊」的圖片佈局為「自動調整」即可。

2.7 效果預覽

2.7.1 PC 端

儲存報表，點選「分頁預覽」，效果如 1.1 節所示。

2.7.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

注：本文範例僅以普通報表為例，在決策報表中報表塊之間同樣適用，詳情可自行下載範本查看。

點選下載範本：

點選文字顯示圖片-普通報表.cpt.cpt

點選文字顯示圖片-FVS.fvs

點擊文字顯示圖片-決策報表.frm