儲存格用HTML顯示圖片

1

問題描述。

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

2

解決思路。

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

2. 若需要列印和匯出圖片，可參考文檔 TOIMAGE，但使用 TOIMAGE 函式只適用於顯示某一路徑下的圖片。

1

準備資料。

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

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

2

報表樣式設計。

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

3

插入公式。

1. 選中 C2 儲存格，按右鍵選擇【儲存格元素】→【插入公式】，公式如下：【"<img style='height:160px;width:240px' src='" + B2 + "'/>"】。

2. 公式說明：height (圖片高度) 為 160 像素，width (圖片寬度)為 240 像素。src 為圖片的工程路徑，即引用 B2 儲存格圖片路徑資訊。

4

儲存格顯示內容設定。

1. 選中 C2 儲存格，選擇【儲存格屬性】→【其他】→【進階】→【顯示內容】為【用HTML顯示內容】，如下圖所示。

5

效果預覽。

1. PC 端：儲存範本，點選【分頁預覽】，效果如下圖1所示。

2. 行動端：App 端和 H5 端均支援，效果如下圖2所示。

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

1

準備資料。

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

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

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

2

設計報表。

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

3

插入公式。

1. 選中 C2 儲存格，按右鍵選擇【儲存格元素】→【插入公式】，公式如下：【"<img width='100%' height='100%' src='" + B2 + "'>"】。

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

4

儲存格顯示內容設定。

1. 選中 C2 儲存格，選擇【儲存格屬性】→【其他】→【進階】→【顯示內容】為【用HTML顯示內容】，如下圖所示。

5

效果預覽。

1. PC 端：儲存範本，點選【分頁預覽】，效果如下圖1所示。

2. 行動端：App端 及 H5 端均支援，效果如下圖2所示。

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

1. 已完成範本可參見：

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

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

2. 點選下載範本：

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

   儲存格顯示Base64圖片.cpt