[]
产品官网 帮助文档 API 文档 视频教程 技术社区
v9.0
在线Demo 免费试用
(Showing Draft Content)

富文本

1. 概述

1.1 功能概述

普通文本框中，框内所有内容都是同样的格式或样式。富文本框则允许在一个边界范围内，针对不同的文本内容设置不同的格式。富文本框控件接受 HTML 输入，并支持邮件合并功能。您可以通过 html 编码自由拓展报表的内容。

2. 操作步骤

2.1 前提条件

  1. 数据要求： 已完成数据连接与数据准备，本文将以本地Excel文件及直连数据集为例演示操作流程。

  2. 界面要求： 已进入报表设计界面，且报表至少已绑定一个数据集（如“Excel数据-直连数据集”）。

2.2 操作步骤

2.2.1 添加组件

  1. 在报表设计器界面，单击左侧组件工具箱，选择富文本组件，按住鼠标左键将其拖拽至报表设计区域，成功添加一个富文本组件。

    PixPin_2025-06-30_13-32-20

2.2.2 属性设置

  1. 选中整个富文本，进行富文本选项设置，如下图所示。

    PixPin_2025-06-30_13-33-02

  2. 富文本组件常用属性说明：

    选项组

    选项名称

    说明

    常规选项

    名称

    设置当前富文本的名称，如“富文本1”

    内容

    Html

    设置Html内容，单击image2018-6-19_11-23-39.png添加表达式，注意必须包括<body>标签

    例如：="<body><span>" + Fields!类别名称.Value.ToString() + "</span></body>"

    支持的html标签详细介绍，请见本页下方关于HTML标签的介绍

    编码邮件合并字段

    设置是否编码邮件合并字段

    邮件合并字段

    设置邮件合并字段

    背景&边框

    背景色和边框

    设置富文本的背景色、边框、边框宽度、边框样式和边框颜色

    位置&大小

    左

    设置富文本左上角的横向位置

    上

    设置富文本左上角的竖向位置

    宽度

    设置富文本的总宽度

    高度

    设置富文本的总高度

2.3 邮件合并功能

所谓“邮件合并”，是指一种模板性质的 HTML 文本，其中使用 <%Field1/%> 这样的格式，定义邮件合并字段。这种字段是准备使用数据集或者其他外部数据替换的占位符，可以实现类似宏替换的效果。

2.3.1 邮件合并字段示例一

  1. 添加一个富文本组件，将其 Html 内容设置为下面的表达式，其中的 <% Field1 /%> 就是一个邮件合并字段，请注意：FieldName 并不是数据集中的字段名。

    <body><span style="width:300px;font:微软雅黑;">{产品名称.ToString()}</span><br><div style="width:300px;font:微软雅黑;"><% FieldName /%></div></body>

    PixPin_2025-06-30_13-43-06

  2. 选中富文本组件，在右侧属性面板开启编码邮件合并字段，并添加一个邮件合并字段。字段名称为 Html 内容中引用的名称（即“FieldName”）；数值则可设置为表达式引用或者绑定数据集的字段，如下图，绑定订单金额。

    PixPin_2025-06-30_13-49-17

  3. 预览效果如下图，可见，预览时富文本中的占位符 FieldName 显示了实际绑定的数值，这也就是邮件合并字段的意义。

    PixPin_2025-06-30_13-49-32

2.3.2 邮件合并字段示例二

由示例一可以想到，如果经常需要对某一个数据或内容进行统一的批量管理或更新的话，就可以在 html 中多次使用同一邮件合并字段符。进行批量更新时，只需要修改占位符绑定的数值即可。

下面举一个简单的示例。

  1. 添加一个富文本组件，将其 Html 内容设置为下面的表达式，其中的 <% 班主任 /%> 是邮件合并字段。

    <body style="width:300px;font:微软雅黑;"><% 班主任 /%>  <% 班主任 /%>  <% 班主任 /%>  <% 班主任 /%> </body>

    PixPin_2025-06-30_13-52-49

  2. 选中富文本组件，在右侧属性面板开启编码邮件合并字段，并添加一个邮件合并字段。字段名称为 Html 内容中引用的名称（即“班主任”）；数值设置为班主任的名字（自定义为张三），如下图：

    PixPin_2025-06-30_13-52-37

  3. 预览可查看效果。

    PixPin_2025-06-30_13-52-17

  4. 此时，如果我们想把班主任换成李四，那么就不用一个个的单独更改了。直接将邮件合并字段绑定的数值修改即可。

    PixPin_2025-06-30_13-53-50

  5. 预览，可见已经进行了批量的替换。

    PixPin_2025-06-30_13-54-01

3. HTML标签

type=info

注意: 所有的 html 内容都必须包含在<body></body>标签中才可以生效。

  1. 富文本组件支持如下HTML标签：

    标签

    说明

    <%MergeFieldName%>

    插入邮件合并字段

    <!-- -->

    注释

    <!DOCTYPE>

    定义文档类型

    <a>

    定义定位点

    <abbr>

    定义缩写

    <acronym>

    定义缩略词

    <address>

    定义地址元素

    <b>

    定义粗体文本

    <base />

    为页面中的所有链接定义一个基本URL

    <bdo>

    定义文本显示的方向

    <big>

    定义大文本

    <blockquote>

    定义长引号

    <body>

    定义body元素（必需）

    <br />

    插入一个换行符

    <caption>

    定义表格标题

    <center>

    定义居中文本

    <cite>

    定义引用

    <code>

    定义计算机代码文本

    <col>

    定义表列的属性

    <dd>

    定义描述

    <del>

    定义带删除线的文本

    <dir>

    定义目录列表

    <div>

    定义文档中的节

    <dfn>

    定义一个定义项目

    <dl>

    定义一个定义列表

    <dt>

    定义项目/名字

    <em>

    定义强调文字

    <h1> to <h6>

    定义标题1到标题6

    <head>

    定义有关文档的信息

    <hr />

    定义一条水平线

    <html>

    定义html文档

    <i>

    定义斜体文本

    <img />

    定义图像

    <ins>

    定义插入的文本

    <kbd>

    定义键盘文本

    <li>

    定义列表项

    <link>

    定义链接

    <map>

    定义图像映射

    <menu>

    定义菜单列表

    <ol>

    定义有序列表

    <p>

    定义段落

    <pre>

    定义预格式化文本

    <q>

    定义短引号

    <s>

    定义删除线文本

    <samp>

    定义示例计算机代码

    <small>

    定义小文本

    <span>

    在文档中定义节

    <strike>

    定义删除线文本

    <strong>

    定义加粗文本

    <style>

    定义 HTML 文档的样式信息

    <sub>

    定义下标文本

    <sup>

    定义上标文本

    <table>

    定义表

    <tbody>

    定义一个表体

    <td>

    定义表格单元格

    <tfoot>

    定义表页脚

    <th>

    定义表标题

    <thead>

    定义表标题

    <tr>

    定义表行

    <tt>

    定义电传打字机文本

    <u>

    定义带下划线的文本