历史版本2 :点击文字展示对应图片 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1.概述编辑

在报表设计时有时会遇到如下需求:图片与文字说明分开并形成目录的形式,且点击文字能展示对应的图片。

B3C2BA3F-489E-4C8C-AE44-F17B144FCB6A.GIF

2.思路编辑

可使用报表中的过滤以及 Toimage() 函数进行设置。

3.数据准备编辑

3.1创建数据集

新建两个内置数据集,分别为【问题】、【回答】

注:此处ID为唯一标识,Q表示问题,A表示回答

image.png

image.png

3.2 图片准备

将每个问题对应的图片按照回答的ID进行重命名,例如第一个回答对应的图片则以“1”来命名。将所有准备好的图片放置本地路径,或者是服务器路径(请注意区分服务器为 Windows 还是 Linux ),因为在 toimage() 函数中,Windows 路径表示为 D:/1.png,在 Linux 中路径表示为 /u01/.../.../1.png

本案例将图片放置在了本地的报表工作目录下:C:\FineReport_10.0\webapps\webroot\WEB-INF\reportlets\doc\picture

注:picture为自己创建的文件夹。

4.制作步骤编辑

1)新建决策报表,并在其中拉入两个报表块。本案例为了美观,两个报表块的宽度比大概为1:2。

image.png

2)打开第一个报表块,将内置数据集【问题】中的 ID 字段放入单元格 B2,缩小 C2 单元格列宽,然后输入“.”,合并 D2 至 G2 单元格,并将【问题】数据集中的 Q 字段放入。

注:第一行的文字与图片仅为装饰,可自行设计,小图片下载可参考此网站:阿里巴巴矢量图库 

image.png

3)打开第二个报表块,合并 B3 至 O3 单元格,以及 A5 至 O36 单元格,将内置数据集【回答】中的 A 字段放入 B3 单元格中,在 A3 单元格中输入文本“答:”,并设置居中。

image.png

4)在B3单元格设置过滤,使得【回答】数据集中的 ID 字段等于参数 $ID(此处的 $ID 即是对应每个图片名字的 ID)

image.png

5)在A5单元格输入以下公式,注意放置图片文件夹的路径复制进去后,需要将“\”都改为“/”,并且在路径的最后位置(picture)、参数($ID)之前再加一个“/”补全路径,例如:C:/FineReport_10.0/webapps/webroot/WEB-INF/reportlets/doc/picture/1.png,否则图片不显示。

image.png

注:因为图片的名称($ID)需要与【回答】中的 ID 字段一一对应,所以只能放置一张图片。

5.预览及模板编辑

最终预览参考本章1.概述

点击下载模板:点击文字跳转不同图片.rar

注:案例中对应的图片已经放入模板的压缩包中,自行测试时,需要提前拿出来并自行放入本地、服务器文件夹中。