Cell display image by HTML-FineReport Help Document

Last update： 2021-04-16

I. Overview

1. Problem description

When using FineReport to design a report, it is necessary to display the pictures stored in the database. How to achieve this?

2. Solutions

If the picture is stored in the database in the form of path or Base64 encoding, it can be realized by setting the cell content to be displayed in HTML form, but the picture cannot be printed and exported.

If you need to print and export pictures, you can refer to the document Display image in cell (Toimage), but the TOIMAGE function is only suitable for displaying pictures in a certain path.

II. Picture under the project path

1. Prepare data

Select icon_top1-18.png, icon_top2-19.png, and icon_top3-20.png under the project path webapps\webroot\help\picture as display pictures.

Create a new built-in dataset Embedded1 to store the path information of the picture project, as shown in the following figure:

2. Design report style

Enter a title in cells A1~C1, drag the "ImageName" field in the built-in data set into cell A2, and drag the "ImagePath" field into cell B2, and the expansion direction of A2~C2 cells is "Vertical Expansion", as shown below Shown:

3. Insert formula

Select cell C2, right-click and select "Cell Element> Insert Formula", the formula is as follows:

"<img style='height:160px;width:240px' src='" + B2 + "'/>"

Formula description:

The height (image height) is 160 pixels, and the width (image width) is 240 pixels.

src is the project path of the picture, which refers to the path information of the picture in cell B2.

4. Cell display content

Select cell C2, select "Cell Attributes>Other>Advanced>Display Content" to "Display by HTML", as shown in the following figure:

5. Effect preview

Save the template, click "Pagination Preview", the effect is as shown in the figure below:

Note: Both App and H5 are supported. The picture may not be displayed completely when previewing on the mobile terminal. You can adjust the height of the template cell row to match the display height of the picture on the mobile terminal.

III. Picture in Base64 format

1. Prepare data

Prepare picture data in Base64 encoding, search for online picture transcoding tools and upload pictures for transcoding.

Create a new built-in dataset Embedded1 and enter the image data in Base64 format obtained by tool transcoding, as shown in the following figure:

Note: The built-in dataset of FineReport has no limitation on the length of the field, but there is a limitation on the length of ordinary databases. Please make sure that the Base64 character length after the image is transcoded meets the database field length limit, otherwise it will cause an abnormal display.

2. Design report

Enter the title "ImageName" in cell A1, enter the title "Image" in cell C1, drag the field "ImageName" of the built-in dataset into cell A2, drag the field "Image" into cell B2, and hide column B . As shown below:

3. Insert formula

Select cell C2, right-click and select "Cell Element> Insert Formula", the formula is as follows:

"<img width='100%' height='100%' src='" + B2 + "'>"

Formula description: Display the picture of cell B2 according to the original ratio.

4. Cell display content

Select cell C2, select "Cell Attributes>Other>Advanced>Display Content" to "Display by HTML", as shown in the following figure:

5. Effect preview

Save the template, click "Pagination Preview", the effect is as shown in the figure below:

Note: App and H5 are both supported. The picture may not be displayed completely when previewing on the mobile terminal. You can adjust the height of the template cell row to match the display height of the mobile terminal picture.