[]
报表主题可以统一定制报表的外观样式,该功能对于当系统中存在多张报表时候,可统一报表的外观样式设置,并完成报表样式的快速设置,如背景色,文本颜色,文本大小等。
报表主题文件本质上也是一个JSON 对象,包含报表调色板,字体属性,图像内容,文本外观值。当前,ActiveReportsJS 虽然没有提供报表主题编辑器,但可以通过以下步骤来实现主题文件并在报表中引用:
创建文件命名为 *.rdlx-json-theme
后缀。
复制以下内容到新创建的文件。可以先将图像文件使用在线的工具转换为 base64 字串 base64-image.
{
"Theme": {
"Colors": {
"Dark1": "#000000",
"Dark2": "#1a1a1a",
"Light1": "#40cddf",
"Light2": "#e6e6e6",
"Accent1": "MediumTurquoise",
"Accent2": "Gold",
"Accent3": "DeepPink",
"Accent4": "#557bd2",
"Accent5": "#8acc1f",
"Accent6": "#409dcc",
"Hyperlink": "#aaa",
"HyperlinkFollowed": "#3c3c3c"
},
"Fonts": {
"MajorFont": {
"Family": "Montserrat",
"Style": "Normal",
"Size": "20pt",
"Weight": "Medium"
},
"MinorFont": {
"Family": "Montserrat",
"Style": "Normal",
"Size": "9pt",
"Weight": "Normal"
}
},
"Images": [
{
"Name": "Logo",
"MIMEType": "image/png",
"ImageData": "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsSAAALEgHS3X78AAABD0lEQVRIie2UzW3CQBCFn1OB0wG3dyUVABUk6SDpIHRAB0AFoQPSAaEDru8UOmBLiFYao9F6gZXZW/Iky9q/93lnxoN/3VLj1yWdALTJmTnJ1dBIPiTj1Dzq+Z40pYDqKgGMa97gO7OnlTQYkgIOmT3BniqAfcZ8RvI4FNCkE5J+AIycee5WxcoleW3v9kLZ3g3YAOhCsqwOIBlDM7fhWNJnVYBBvgB07eHtEkTS6FYJ95KcGOwATG24Ifnu1qLxzvIUXInvSS5KAfHw1kEOFr7gzHsiefa9CnCgmOwPNxWuVZgHFDU7kvGrX111FZdvcTe1xD9ZiIr/7KIQ5STpBcDEuu3UbQkkH4f6/jUB+AWm0kmTmeXA3wAAAABJRU5ErkJggg=="
}
],
"Constants": [
{
"Key": "Title",
"Value": "Sales Report"
}
]
}
}
将主题文件保存为*.rdlx-json-theme
文件并放在报表的同一路径下,在报表中设置主题
属性,选择相关文件。
主题值 | 表达式 |
---|---|
Light1 color | {Theme.Colors!Light1} |
Light2 color | {Theme.Colors!Light2} |
Dark1 color | {Theme.Colors!Dark1} |
Dark2 color | {Theme.Colors!Dark2} |
Accent1 color | {Theme.Colors!Accent1} |
Accent2 color | {Theme.Colors!Accent2} |
Accent3 color | {Theme.Colors!Accent3} |
Accent4 color | {Theme.Colors!Accent4} |
Accent5 color | {Theme.Colors!Accent5} |
Accent6 color | {Theme.Colors!Accent6} |
Hyperlink color | {Theme.Colors!Hyperlink} |
HyperlinkFollowed color | {Theme.Colors!HyperlinkFollowed} |
Major font family | {Theme.Fonts!MajorFont.Family} |
Major font size | {Theme.Fonts!MajorFont.Size} |
Major font style | {Theme.Fonts!MajorFont.Style} |
Major font weight | {Theme.Fonts!MajorFont.Weight} |
Minor font family | {Theme.Fonts!MinorFont.Size} |
Minor font size | {Theme.Fonts!MinorFont.Size} |
Minor font style | {Theme.Fonts!MinorFont.Style} |
Minor font weight | {Theme.Fonts!MinorFont.Weight} |
Image Data * | {Theme.Images!<Image Name>.ImageData} |
Image Mime Type | {Theme.Images!<Image Name>.MIMEType} |
Constant value | {Theme.Constants("<Constant Key>")} |
* 注意,如果要在主题中引用图像资源,需要设置图像的来源
为 数据库
。
一些报表项目有样式
属性,可以基于主题快速设置控件,如 TextBox 的 文本框的样式
属性包含多个值,如 Light1 Accent1 Major
,文本框会使用第一个值设置为前景色,第二个值为背景色,第三个值为字体颜色。
应用程序运行或加载报表时候,需要在运行时加载主题,为了实现该功能,可以考虑试用
资源重定位功能。如可以将主题保存为*.rdlx-json-theme
文件,并放在静态资源文件夹下面,在资源重定位中返回具体的内容。具体参考示例 查看代码实现。