HTML 模板在 .html
文件(无 BOM
的 UTF-8
编码)中定义。可以使用 Flying Saucer 库的 HTML/CSS 功能;其主要指南参考 http://flyingsaucerproject.github.io/flyingsaucer/r8/guide/users-guide-R8.html 。
要控制页面尺寸、页眉和页脚,请使用特殊的 CSS 规则和属性。可以在示例报表中找到每页都显示页面/页脚的报表示例。
有两种方法可以在模板中放入数据:
-
使用 FreeMarker 标签。
-
使用 Groovy 模板引擎。
默认情况下,报表向导会生成带有 FreeMarker 标签的 HTML 模板。
在模板编辑器中使用 Template type 单选按钮切换这两种方法。
- Groovy 模板引擎
-
可以将 HTML 报表模板作为 Groovy 模板进行预处理,将使用 GStringTemplateEngine 来处理模板。
模板引擎使用 JSP 格式的
<% %>
脚本和<%= %>
表达式语法或者GString
格式的表达式。out
变量用来绑定模板将要被写入的 writer。因此,如果定义没有问题的话,模板可以使用任何 Groovy 代码。GStringTemplateEngine
能访问:-
外部参数:
BandName.fields.ParamName
; -
区域:
BandName.bands.ChildBandName
; -
字段:
BandName.fields.FieldName
。
方便起见,也可以使用变量,例如:
<% def headerRow = Root.bands.HeaderRow %> <p>Date: ${headerRow.fields.reportDate}</p>
下面是一个模板的示例,输出单一用户的报表。
link:../../../../source/examples_grooveEngine1.html[role=include]
可以在报表示例部分找到使用 Groovy 模板的示例。
-
- FreeMarker
-
FreeMarker 文档可以参阅 https://freemarker.apache.org/docs/ 。
FreeMarker 文档模型的结构如下:
Band { bands [ bandName : [ band, .. ], .. ] fields [ fieldName : fieldValue, .. ] }
例如,应该使用以下表达式访问
band
带区中第一行数据的name
字段:Root.bands.band[0].fields.name
为方便起见,可以使用变量,例如:
<#assign headerRow = Root.bands.Header[0]> <p>Date: ${headerRow.fields.reportDate}</p>
下面是一个模板示例,它输出一个由两个带区(
Book
和Authors
)组成的报表。第一个区输出书名和分类,第二个区输出本书的作者列表。link:../../../../source/examples_html_6.html[role=include]
下面是一个更复杂的例子。假设我们有以下报表带区结构:
Root { HeaderBand { query = return [[ "name" : "Column1" ],[ "name" : "Column2" ]] } Band1 { query = return [ ["field1" : "Value 11", "field2" : "Value 12"], ["field1" : "Value 21" , "field2" : "Value 22"] ] } Band2 { query = return [[ "header" : "Header1" ], [ "header" : "Header2" ]] SubBand1 { query = return [["header" : 'SubHeader1'] , [ "header" : 'SubHeader2' ]] } } }
-
插入字段:
link:../../../../source/examples_html_8.html[role=include]
-
插入列表:
link:../../../../source/examples_html_9.html[role=include]
-
插入表格:
link:../../../../source/examples_html_10.html[role=include]
-
插入多级列表:
link:../../../../source/examples_html_11.html[role=include]
-
- 嵌入图片
-
目前,CUBA 报表扩展不提供类似于 DOCX/XLSX 报表将图片插入 HTML 报表的方法。图片仍然可以使用
img
标签并在src
属性中指定图片链接的方式嵌入。使用下面的任一种方法都能为 HTML 报表添加图片。-
通过 URL
图片可以托管在 Tomcat 服务或者其它地方,以便用做本地文件引用。例如,托管在
deploy\tomcat\webapps\ROOT\images
文件夹中的图片可以被插入:
<img src="http://localhost:8080/images/SomeImage.jpg" height="68" width="199" border="0" align="right"/>
-
通过 Bitmap
图片在
src
属性中以字节数组形式添加。此方法可以使用实体的FileDescriptor
属性变量。甚至可以将字节数组直接添加到模板中,虽然不建议使用此方法:
<img alt="SomePicture.png" src="data:image/png;base64,iVBORw0K ..... AcEP9PwxD0hNKK1FCAAAAAElFTkSuQmCC"/>
-
通过自定义的前缀:
-
可以使用
core://
和web://
前缀引用位于 web 或 core 模块的图片资源,不需要在模板中硬编码 {main_man_url}/app_properties_reference.html#cuba.webPort[webPort] 和 {main_man_url}/app_properties_reference.html#cuba.webContextName[webContextName] 。比如,如果图片在deploy\tomcat\webapps\app\VAADIN\images
目录,可以通过这种方式插入:<img src="web://VAADIN/images/SomeImage.jpg" height="68" width="199" border="0" align="right"/>
-
fs://
前缀可以使用特定的FileDescriptor
ID 插入图片,示例:<img src="fs://fede432a-4f5d-3bab-71a0-b98133759b0f" height="68" width="199" border="0" align="right"/>
-
-
- 内联编辑器