1. 概述
1.1 問題描述
使用 FineReport 設計報表時,需要顯示存儲在數據庫中的圖片,該如何實現呢?
1.2 解決思路
若圖片以路徑形式或 Base64 編碼形式存儲在數據庫,通過設置單元格内容用 HTML 形式顯示就可以實現,但無法打印和導出圖片。
若需要打印和導出圖片,可參考文檔 TOIMAGE函數顯示單元格圖片,但使用 TOIMAGE 函數只适用於顯示某一路徑下的圖片。
2. 工程路徑下的圖片
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. Base64形式的圖片
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 端均支持,效果如下圖所示:
注:移動端預覽時圖片可能無法完整顯示,可以通過調大模板單元格行高來匹配移動端圖片顯示高度。
4. 模板下載
已完成模板可參見:
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\單元格顯示工程下的圖片.cpt
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\單元格顯示Base64圖片.cpt
點擊下載模板: