历史版本17 :图片在下文字在上 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

一个图表字段跟一个普通字段希望有层次的显示在一个单元格中。如 A 单元格中为文字内容,B单元格中为背景图片,C 单元格中要显示文字内容加背景图片,即下层图片为背景、上层显示文字内容。如下图所示:

image.png

2. 原理编辑

FineReport 可以通过自定义函数来实现。自定义函数 String(Imagename、 image), 函数有两个参数 name、 image 分别对应要重叠显示的内容和图片来源,返回一个带 name 的图片,实现把文字和图片叠加显示。

示例:A1 单元格 name 字段,B1 单元格 picture 字段,C21单元格输入公式 StringImage(A1,B1)显示叠加图片。

3. 示例编辑

3.1 准备编译环境

编译程序前,需先创建一个Java工程环境,并且需要一个Java 编辑器,如 Eclipse 或 idea 。

在编辑器下打开工程,选择 Properties>Java Build Path>Libraries,导入 FineReport 工程 JAR 包,详细操作可参考:Eclipse中启动设计器

3.2 编写自定义函数

在编译器中编写 StringImage 自定义函数,Java 代码如下:

https://code.fanruan.com/demo/example/src/branch/persist/10.0/src/main/java/com/fr/function/StringImage.java

3.3 编译自定义函数

编写完成后,在编译器中编译 StringImage .java 文件,编译通过后,将会在对应工程下生成 StringImage .class  类文件。

3.4 导入 class 文件

将编译后的 StringImage.class 文件和 StringImage .java 文件放到 %FR _HOME%\webapps\webroot\WEB-INF\classes下,因为 StringImage.java 属于包 com.fr.function,所以需要将文件放到%FR _HOME%\webapps\webroot\WEB-INF\classes\com\fr\function目录下。如下图所示:

image.png

3.5 注册自定义函数

生成该函数的类后需要在设计器中进行注册,才可以使用该函数。打开设计器「服务器>函数管理器」,添加一个函数,选择刚刚定义好了 StringImage 类,如下图所示:

2020-12-30_15-08-44.png

函数名称可以自定义,同时可以添加该函数的使用说明。

image.png

3.6 使用自定义函数

注册好自定义函数后,制作报表时便可直接使用。

1)首先数据库中需要新建一张表,存放图片和文字的内容。如 SQL Seriver 数据库中新建表:FR_FR_PICTURE 。如下图所示:

图片存放数据格式需为图片格式。详细内容可参考: 上传图片
image.png

注:内置的 Sqlite 不支持显示图片。
2)制作模板。新建模板,新建数据 ds1, SQL语句为:SELECT  * FROM FR_FR_PICTURE。表中存储了要展示的内容和图片。将 ds1的 name 字段拖入 A1 单元格,picture 字段拖入 B1 单元格 ,C1单元格输入公式 =StringImage(A1,B1),如下图所示:

image.png

3)保存模板,点击预览,就可以实现图片和文字叠加,图片在下,文字在上的效果了,如下图所示:

image.png