内容渲染

教学视频

目录

• 概述
• 渲染类型总览
• 各渲染类型详解
  • 以HTML格式渲染内容
  • 以图片渲染
  • 数据映射
  • 以链接形式下载单元格对应内容
  • 条码
  • 二维码
• 操作示例
  • 前置准备
  • 设置单元格数据绑定
  • 逐一设置渲染
  • 预览

概述

内容渲染是报表内置的一些渲染处理方式，便于你快速调整单元格内容的显示。在单元格的属性面板中切换到 渲染 标签，即可选择需要的渲染类型并配置其参数。

渲染类型总览

目前提供的渲染类型及其用途如下：

各渲染类型详解

以HTML格式渲染内容

将单元格的值作为 HTML 解析并展示。适合在单元格中存放一段 HTML 片段（如带超链接的网页地址），预览时单击即可跳转到对应网页。

注意：以 HTML 格式渲染内容仅在 浏览器打印 时才能正确生效，无法支持 PDF、Excel、Word、CSV 的导出（以及服务端导出），这些导出格式会忽略 HTML 渲染效果（按原始文本值输出）。

配置项：无额外参数，仅需保证单元格内容为合法的 HTML 字符串。

以图片渲染

将单元格的值解析为图片数据进行展示。单元格内容需为图片地址或可解析为图片的数据。

配置项：

• 图片大小：填充单元格（拉伸铺满）或 等比例拉伸（保持宽高比）。

数据映射

将单元格的值（实际值）映射为另一种显示值，适用于字典值、枚举值等需要友好展示的场景。支持两种映射方式：

• 自定义：手工添加显示值与实际值的对应关系，如下图所示，添加两条配置 true→男、false→女；
• 数据集：选择一个映射数据集，并指定实际值字段和显示值字段，用单元格的值（实际值）在所选数据集中查找对应的显示值。

配置项：

• 映射类型：自定义 / 数据集；
• 映射关系（自定义）：显示值、实际值逐条配置；
• 实际值字段 / 显示值字段（数据集）：在映射数据集中对应的字段；
• 映射值不存在时显示原值：勾选后，当映射值不存在时显示单元格的原值，否则显示空白。

以链接形式下载单元格对应内容

将单元格的值以文件的形式提供下载。

配置项：

• 文件名表达式：用于生成下载文件名，支持引用其它单元格的值，例如 "file-"+B2+".txt"。

条码

将单元格的值以条码图片的形式展示。

配置项：无额外参数，单元格内容即为条码数据。

二维码

将单元格的值以二维码图片的形式展示。

配置项：

• 纠错级别、版本、白边边框、Logo 等二维码参数（详见属性面板相关选项）。

操作示例

下面通过一个完整示例演示各渲染类型的设置效果。

前置准备

新建报表，参考数据库数据集添加 EMPLOYEE 数据库数据集。EMPLOYEE 的 sql 为：

select *, CONCAT("<a href='http://",web,"'>", web , "</a>") as HTTPWEB from employee limit 0,1

设置单元格数据绑定

报表设置如下：

其中单元格数据绑定关系如下：

逐一设置渲染

选中目标单元格，切换到属性编辑器的 渲染 标签，按需要设置类型：

• B3（数据映射）：类型选择 数据映射，映射类型 自定义，添加 true→男、false→女；
• B4（链接下载）：类型选择 以链接形式下载单元格对应内容，文件名表达式设为 "file-"+B2+".txt"；
• B5（条码）：类型选择 条码；
• B6（二维码）：类型选择 二维码；
• B7（HTML渲染）：类型选择 以HTML格式渲染内容。

预览

保存报表，并预览查看效果：

可以清楚的看到其中渲染的处理效果：

• 数据映射中的 true 映射为男
• 下载中的 filename 会自动拼接 file- 和 employee_id 字段的值，同时单击下载时，下载文件名为 file-ANLIN.txt，内容就是我们配置的字段的值
• 其中二维码和条码中的内容也是我们配置好的字段的值
• HTML 渲染单击会自动跳转到对应的网页上