儲存格用HTML顯示圖片

1.1 問題描述

使用 FineReport 設計報表時，需要顯示儲存在資料庫中的圖片，該如何實現呢？

1.2 解決思路

若圖片以路徑形式或 Base64 編碼形式儲存在資料庫，透過設定儲存格內容用 HTML 形式顯示就可以實現，不支援匯出和列印。

若需要列印和匯出圖片，需要使用絕對路徑，相對路徑無法支援匯出和列印。

也可參考文檔 TOIMAGE函式顯示儲存格圖片，但使用 TOIMAGE 函式只適用於顯示某一路徑下的圖片。

2.1 準備資料

選取工程路徑webapps\webroot\help\picture\store 下的 1.png、2.png、3.png 作為展示圖片。

建立內建資料集 Embedded1 存放圖片工程路徑資訊，如下圖所示：

注：此範例使用的是相對路徑，不支援匯出和列印。

2.2 報表樣式設計

在 A1~C1 儲存格輸入標題，將內建資料集中「圖片名稱」欄位拖入 A2 儲存格，「圖片路徑」欄位拖入 B2 儲存格，A2~C2 儲存格擴展方向為「縱向擴展」，如下圖所示：

2.3 插入公式

選中 C2 儲存格，按右鍵選擇「儲存格元素>插入公式」，公式如下：

"<img style='height:160px;width:240px' src='"   B2   "'/>"

公式說明：

height (圖片高度) 為 160 像素，width (圖片寬度)為 240 像素。

src 為圖片的工程路徑，即引用 B2 儲存格圖片路徑資訊。

2.4 儲存格顯示內容設定

選中 C2 儲存格，選擇「儲存格屬性>其他>進階>顯示內容」為「用HTML顯示內容」，如下圖所示：

2.5 效果預覽

1）PC 端

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

2）行動端

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

注：行動端預覽時圖片可能無法完整顯示，可以透過調大範本儲存格行高來匹配行動端圖片顯示高度。

3.1 準備資料

準備 Base64 編碼方式的圖片資料，搜尋線上圖片轉碼工具上傳圖片進行轉碼即可。

建立內建資料集 Embedded1 ，輸入透過工具轉碼得出的 Base64 形式的圖片資料，如下圖所示：

注：FineReport 內建資料集對欄位長度沒有限制，但是普通資料庫有長度限制。請確定圖片轉碼後的 Base64 字元長度滿足資料庫欄位長度限制，否則將導致顯示異常。

3.2 設計報表

A1 儲存格輸入標題「圖片名稱」，C1 儲存格輸入標題「image」，將內建資料集的欄位「圖片名稱」拖入 A2 儲存格，欄位「image」拖入 B2 儲存格，再將 B 列隱藏。如下圖所示：

3.3 插入公式

選中 C2 儲存格，按右鍵選擇「儲存格元素>插入公式」，公式如下：

"<img width='100%' height='100%' src='"   B2   "'>"

公式說明：將 B2 儲存格的圖片按照原始比例顯示出來。

3.4 儲存格顯示內容設定

選中 C2 儲存格，選擇「儲存格屬性>其他>進階>顯示內容」為「用HTML顯示內容」，如下圖所示：

3.5 效果預覽

1）PC 端

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

2）行動端

App端 及 H5 端均支援，效果如下圖所示：

注：行動端預覽時圖片可能無法完整顯示，可以透過調大範本儲存格行高來匹配行動端圖片顯示高度。

已完成範本可參見：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Primary\DetailReport\儲存格顯示工程下的圖片.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Primary\DetailReport\儲存格顯示Base64圖片.cpt

點選下載範本：

儲存格顯示工程下的圖片.cpt

儲存格顯示Base64圖片.cpt