Lenka.Guo 发表于 2021-4-27 15:03:06

ActiveReportsJS V2.1新特性 1-富文本控件使用

本帖最后由 Lenka.Guo 于 2021-4-27 15:07 编辑

富文本控件 在报表中显示静态或动态混合格式文本。您可以使用它来展示包含HTML代码的数据字段,或者静态标签或显示来自数据源的预格式化内容。添加富文本您可以通过在工具箱中双击相应的项目,将添加富文本添加到报表中。并将其拖放到报表页面区域或其他容器中,例如带装列表。常规富文本格式配置常规配置包括基本报表项属性,公共样式属性,文本属性的子集和可见性内容标记类型属性设置混合格式内容的语言。 当前,唯一受支持的语言是HTML。 您可以在Value属性中使用以下HTML标记。
[*]<p> -定义段落
[*]<span> - 在文档中定义节
[*]<h1> - <h6> - 定义标题1到标题6
[*]<ul> - 定义无序列表
[*]<ol> - 定义有序列表
[*]<li> - 定义列表项
[*]<a> -定义超链接
[*]<strong> 或<b> - 定义加粗字体
[*]<em> 或<i> - 定义强调文字
[*]<sup> - 定义上标文本
[*]<sub> - 定义下标文本
上述标记支持以下CSS样式。
[*]font-family
[*]font-size
[*]font-style
[*]font-weight
[*]color
[*]background-color
[*]background-image
[*]text-align
[*]text-indent
[*]list-style-type <ol> <ul>
值支持]表达式 使用上述标记和样式设置混合格式的内容。 使用表达式语法,您可以为富文本控件的值设置动态内容,例如:<p>Thank you for your purchase {name}!</p>
<p>Your order number is: #{orderID}</p>
<p>If you require any changes to your order or delivery address you must <a href="https://tradecompany/changeorder/{orderID}">contact us</a>
<span style="color:red;font-weight:bold">as soon as possible</span> and it might not be possible if your order has already gone through to fulfilment.</p>
在运行时,带有此Value属性的富文本将生成以下输出。vscode-webview-resource://6ef526e5-137b-4f71-9c3d-73f76d3ec119/file///e%3A/AR/ARJS/ARJSV2-1DocAndOnboarding/20210416%E9%9C%80%E8%A6%81%E7%BF%BB%E8%AF%91%E7%9A%84/20210413%E9%9C%80%E8%A6%81%E7%BF%BB%E8%AF%91%E7%9A%84/20210413%E9%9C%80%E8%A6%81%E7%BF%BB%E8%AF%91%E7%9A%84/Report-Items/Data-Visualizers/RichText/@assets/reportauthor-guide/RichTextOutput.png如果Value属性是绑定字段 ,且字段的值就是HTML内容,然后将相应地识别并渲染支持的标签和样式。布局
[*]显示在一起标志可确保在适合的情况下,富文本格式始终显示在单个页面上
[*]自动变大 标志表示富文本是否可以增加其高度以适应不断增长的内容。

页: [1]
查看完整版本: ActiveReportsJS V2.1新特性 1-富文本控件使用