一、概述
1
問題描述。
使用 FineReport 設計報表時，需要顯示儲存在資料庫中的圖片，該如何實現呢？
2
解決思路。
若圖片以路徑形式或 Base64 編碼形式儲存在資料庫，透過設定儲存格內容用 HTML 形式顯示就可以實現，但無法列印和匯出圖片。
若需要列印和匯出圖片，可參考文檔 TOIMAGE，但使用 TOIMAGE 函式只適用於顯示某一路徑下的圖片。
二、工程路徑下的圖片
1
準備資料。
選取工程路徑【webapps\webroot\help\picture\store】下的 1.png、2.png、3.png 作為展示圖片。
建立內建資料集 Embedded1 存放圖片工程路徑資訊，如下圖所示。
2
報表樣式設計。
在 A1~C1 儲存格輸入標題，將內建資料集中【圖片名稱】欄位拖入 A2 儲存格，【圖片路徑】欄位拖入 B2 儲存格，A2~C2 儲存格擴展方向為【縱向擴展】，如下圖所示。
3
插入公式。
選中 C2 儲存格，按右鍵選擇【儲存格元素】→【插入公式】，公式如下：【"<img style='height:160px;width:240px' src='" + B2 + "'/>"】。
公式說明：height (圖片高度) 為 160 像素，width (圖片寬度)為 240 像素。src 為圖片的工程路徑，即引用 B2 儲存格圖片路徑資訊。
4
儲存格顯示內容設定。
選中 C2 儲存格，選擇【儲存格屬性】→【其他】→【進階】→【顯示內容】為【用HTML顯示內容】，如下圖所示。
5
效果預覽。
PC 端：儲存範本，點選【分頁預覽】，效果如下圖1所示。
行動端：App 端和 H5 端均支援，效果如下圖2所示。
注：行動端預覽時圖片可能無法完整顯示，可以透過調大範本儲存格行高來匹配行動端圖片顯示高度。
三、Base64形式的圖片
1
準備資料。
準備 Base64 編碼方式的圖片資料，搜尋線上圖片轉碼工具上傳圖片進行轉碼即可。
建立內建資料集 Embedded1 ，輸入透過工具轉碼得出的 Base64 形式的圖片資料，如下圖所示。
注：FineReport 內建資料集對欄位長度沒有限制，但是普通資料庫有長度限制。請確定圖片轉碼後的 Base64 字元長度滿足資料庫欄位長度限制，否則將導緻顯示異常。
2
設計報表。
A1 儲存格輸入標題【圖片名稱】，C1 儲存格輸入標題【image】，將內建資料集的欄位【圖片名稱】拖入 A2 儲存格，欄位【image】拖入 B2 儲存格，再將 B 列隱藏。如下圖所示。
3
插入公式。
選中 C2 儲存格，按右鍵選擇【儲存格元素】→【插入公式】，公式如下：【"<img width='100%' height='100%' src='" + B2 + "'>"】。
公式說明：將 B2 儲存格的圖片按照原始比例顯示出來。
4
儲存格顯示內容設定。
選中 C2 儲存格，選擇【儲存格屬性】→【其他】→【進階】→【顯示內容】為【用HTML顯示內容】，如下圖所示。
5
效果預覽。
PC 端：儲存範本，點選【分頁預覽】，效果如下圖1所示。
行動端：App端 及 H5 端均支援，效果如下圖2所示。
注：行動端預覽時圖片可能無法完整顯示，可以透過調大範本儲存格行高來匹配行動端圖片顯示高度。
四、範本下載
已完成範本可參見：
【%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Primary\DetailReport\儲存格顯示工程下的圖片.cpt】
【%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Primary\DetailReport\儲存格顯示Base64圖片.cpt】
點選下載範本：
