點擊文字展示對應圖片

1.1 問題描述

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

1.2 解決思路

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

2.1 資料準備

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

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

2.2 圖片準備

點選下載圖片包：picture.rar

將每個問題對應的圖片按照回答的ID進行重命名，例如第一個回答對應的圖片則以「1」來命名。將所有準備好的圖片放置本地路徑，或者是伺服器路徑（請注意區分伺服器為 Windows 還是 Linux ），因為在 TOIMAGE() 函式中，Windows 路徑表示為 D:/1.png，在 Linux 中路徑表示為 /u01/.../.../1.png。

本範例將圖片放置在本地的報表工作區間下：D:\FineReport_11.0\webapps\webroot\WEB-INF\reportlets\picture

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

2.3 報表設計

儲存格內容設定如下表：

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

注：第一行的文字與圖片僅為裝飾，可自行設計，小圖片下載可參考此網站：阿里巴巴矢量圖庫 

2.4 設定動態參數

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

選中 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 端均支援，效果如下圖所示：

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

已完成範本可參見：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\點選文字顯示圖片-普通報表.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\點選文字顯示圖片-決策報表.frm

點選下載範本：

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

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