本章节主要介绍HTML渲染报表的原理、用途、编写方式及属性说明。
原理和用途:
用于在网页中展示预先设计好的报表。声明式渲染报表采用HTML标签属性驱动模式,在div元素上声明data-report-type="report"并配置相关属性。开发人员无需手动调用润乾报表API,由报表框架自动完成报表解析与运算,根据配置将渲染生成的报表HTML输出至客户端浏览器,实现报表展示。
声明式渲染写法:
在页面中编写如下div元素,即可发布报表:
<div id="reportContainer"
data-report-type="report"
data-report-name="report1"
data-report-reportFileName="网格报表.rpx"
data-report-funcBarLocation="no" >
</div>
属性说明:
报表渲染可用属性见下表:
(属性名大小写敏感,属性值必须放置在双引号内)
|
属性名 |
是否必填 |
属性含义 |
属性取值 |
缺省值 |
|
浏览式报表和单表参数报表的公共属性 |
||||
|
data-report-name |
是 |
报表在网页中的ID标识 |
符合变量命名规则的字符串,在本网页中应是唯一的 |
无 |
|
data-report-srcType |
否 |
报表源的类型 |
见注1 |
file |
|
data-report-reportFileName |
否 |
当报表源类型为file时,要发布的报表文件 |
报表文件名 |
无 |
|
data-report-beanName |
否 |
当报表源类型为defineBean或reportBean时,已保存到request中的bean的名称 |
符合变量命名规则的字符串,与保存报表源bean时的名称一致,且在整个web应用中应唯一 |
无 |
|
data-report-contextName |
否 |
用bean的方式发布报表时,计算出报表bean时用的Context对象,存在session中的名称 |
存储在session中的名称 |
无 |
|
data-report-scale |
否 |
报表缩放显示比例 |
实数 |
1.0 |
|
data-report-funcBarLocation |
否 |
功能条的位置 |
top, bottom, both |
top |
|
data-report-separator |
否 |
各功能钮间的分隔符 |
html元素或文字 |
空格 |
|
data-report-generateParamForm |
否 |
是否生成缺省报表参数输入表单 |
yes或no |
no |
|
data-report-params |
否 |
报表所需要的参数 |
用户提交的参数值 |
无 |
|
data-report-funcBarFontFace |
否 |
功能条的字体 |
字体名称 |
宋体 |
|
data-report-funcBarFontSize |
否 |
功能条的字体大小 |
与html文件中定义字体大小相同 |
13px |
|
funcBarFontColor |
否 |
功能条的字体颜色 |
html文件中使用的颜色 |
black |
|
data-report-functionBarColor |
否 |
功能条背景色 |
html文件中使用的颜色 |
无颜色 |
|
data-report-needSaveAsExcel |
否 |
需要显示将报表存为Excel的功能钮吗 |
yes或no |
no |
|
data-report-needSaveAsPdf |
否 |
需要显示将报表存为PDF的功能钮吗 |
yes或no |
no |
|
data-report-needSaveAsText |
否 |
需要显示将报表存为Text的功能钮吗 |
yes或no |
no |
|
data-report-needSaveAsWord |
否 |
需要显示将报表存为Word的功能钮吗 |
yes或no |
no |
|
data-report-needSaveAsPicture |
否 |
需要显示将报表存为图片的功能钮吗 |
yes或no |
no |
|
data-report-needSaveAsOfd |
否 |
需要显示将报表存为OFD的功能钮吗 |
yes或no |
no |
|
data-report-needPrint |
否 |
需要显示打印报表的功能钮吗 |
yes或no |
no |
|
data-report-needPdfPrint |
否 |
是否需要生成PDF打印的功能按钮 |
yes或no |
no |
|
data-report-pdfPrintLabel |
否 |
PDF打印按钮的内容 |
html元素或文字 |
PDF打印 |
|
data-report-printLabel |
否 |
打印按钮外观定义 |
html元素或文字 |
打印 |
|
data-report-needDirectPrint |
否 |
需要显示直接打印报表的Applet按钮吗 |
yes或no,当为yes时,如果定义了funcBarFontColor和functionBarColor, 那么应该用”#FFFFFF”之类的颜色值,printLabel应该只用文字 |
no |
|
data-report-directPrintLabel |
否 |
直接打印钮外观定义 |
html元素或文字 |
直接打印 |
|
data-report-needPrintPrompt |
否 |
直接打印报表前是否需要提示确认 |
yes或no |
no |
|
data-report-needSelectPrinter |
否 |
直接打印报表时可否选择打印机 |
yes或no |
no |
|
data-report-savePrintSetup |
否 |
是否将客户端电脑的打印设置发回服务器保存,以备下次打印这张报表时使用,该属性对直接打印也起作用 |
yes或no |
no |
|
data-report-printedRaq |
否 |
被导出/打印的报表文件名,用于导出/打印与显示的报表不是同一张时的情况 |
报表文件名(.rpx),相对于raqsoftConfig.xml文件下<Report>里的<home>属性所对应的路径 |
无 |
|
data-report-excelLabel |
否 |
存为Excel钮外观定义 |
html元素或文字 |
存为Excel |
|
data-report-pdfLabel |
否 |
存为PDF钮外观定义 |
html元素或文字 |
存为PDF |
|
data-report-textLabel |
否 |
存为Text钮外观定义 |
html元素或文字 |
存为Text |
|
data-report-wordLabel |
否 |
存为Word钮外观定义 |
html元素或文字 |
存为Word |
|
data-report-ofdLabel |
否 |
存为OFD钮外观定义 |
html元素或文字 |
存为OFD |
|
data-report-csvDataSeparator |
否 |
存为csv时,同行单元格数据间的分隔符 |
字符 |
逗号 |
|
data-report-textDataSeparator |
否 |
存为Text时,同行单元格数据间的分隔符 |
字符 |
TAB键(\t) |
|
data-report-textDataLineBreak |
否 |
存为Text时,自定义换行符 |
换行符 |
\n |
|
data-report-exportDisp4text |
否 |
导出Text文件时是否导出显示值 |
yes或no |
no |
|
data-report-excelUsePaperSize |
否 |
存为Excel时:yes按报表设计时的纸张尺寸,no采用本div元素中指定的width,height值 |
yes或no |
no |
|
data-report-excelFormat |
否 |
导出Excel的默认格式 |
导出Excel两种格式(xls,xlsx)中的一种 |
xls |
|
data-report-saveAsName |
否 |
报表另存为Excel、PDF、Word、Text的文件名(不用带扩展名) |
文本 |
与报表同名 |
|
data-report-excelPageStyle |
否 |
存为Excel时的分页方式,不指定此属性值,则系统弹出对话框让用户选 |
0(不分页)或1(分页) |
无
|
|
data-report-excelExpression |
否 |
存为Excel时是否默认导出公式 |
yes(导出公式)或no(不导出公式) |
no |
|
data-report-pdfExportStyle |
否 |
存为PDF时,导出的文件分页方式及导出类型,导出类型分为图形方式及Text方式。 |
属性值格式为: "文件类型,是否分页" 文件类型取值为: graph: 将文字导出为图形方式 Text:将文字导出为文本方式 1表示要分页,0表示不分页 |
无 |
|
data-report-ofdExportStyle |
否 |
存为OFD时,导出的文件分页方式及导出类型,导出类型目前仅支持图形方式。 |
属性值格式为: "文件类型,是否分页" 文件类型取值为: graph: 将文字导出为图形方式 1表示要分页,0表示不分页 |
无 |
|
data-report-userFuncBarElements |
否 |
用户自定义的功能条中的功能元素 |
html元素,可多个或多层组合,如<table><tr><td> <a href="…">xxx</a> </td></tr></table> |
无 |
|
data-report-needScroll |
否 |
是否固定上表头和左表头 固定表头后,页面报表不分页,分页方式设置无效 |
yes或no 见注4 |
no |
|
data-report-needPagedScroll |
否 |
固定表头后是否分页,data-report-needScroll为no时设置失效 |
yes或no |
no |
|
data-report-scrollWidth |
否 |
固定表头报表的显示宽度 |
整数,像素值 或者百分数,如80%,见注4 |
600 |
|
data-report-scrollHeight |
否 |
固定表头报表的显示高度 |
整数,像素值 或者百分数,如80%,见注4 |
400 |
|
data-report-scrollBorder |
否 |
固定表头报表的边框 |
html的边框表示法,如:“border:1px solid red”,“border-top: 1px solid blue; border-left: 1px solid green;……” |
无 |
|
data-report-appletJarName |
否 |
用于报表打印的applet文件名 |
*.jar或者dir/.../*.jar |
raqsoftReportApplet.jar |
|
data-report-exceptionPage |
否 |
显示报表异常信息的html页面 |
可以是绝对路径或相对路径名,相对于当前使用的html页面所在路径。如:/demo/error.html或myError.html |
无 |
|
data-report-needLinkStyle |
否 |
单元格有超链接属性时,是否用设计的字体属性显示 |
yes或no |
yes |
|
data-report-paperType |
否 |
纸张类型 |
纸张类型值,比如A4,B5 |
报表设计纸张类型 |
|
data-report-paperWidth |
否 |
纸张宽度 |
整数(毫米,像素,英寸) |
报表设计纸张宽度 |
|
data-report-paperHeight |
否 |
纸张高度 |
整数(毫米,像素,英寸) |
报表设计纸张高度 |
|
data-report-leftMargin |
否 |
左边距 |
整数(毫米,像素,英寸) |
报表设计左边距 |
|
data-report-rightMargin |
否 |
右边距 |
整数(毫米,像素,英寸) |
报表设计右边距 |
|
data-report-topMargin |
否 |
上边距 |
整数(毫米,像素,英寸) |
报表设计上边距 |
|
data-report-bottomMargin |
否 |
下边距 |
整数(毫米,像素,英寸) |
报表设计下边距 |
|
data-report-serverPagedPrint |
否 |
applet打印时是否采用服务器分页后再按页传输的方式。一般大数据量的报表采用此方式 |
yes或no |
yes |
|
data-report-mirrorPrint |
否 |
打印时是否使用镜像打印 |
取值为yes或no |
no |
|
data-report-reportEnterUrl |
否 |
访问此报表的url地址,当访问地址不是jsp时需要指定 |
访问报表的url地址 |
无 |
|
data-report-printerName |
否 |
默认打印机名称 |
操作系统中显示的打印机名称 |
无 |
|
data-report-generateCellId |
否 |
是否生成单元格ID |
yes或no |
no |
|
data-report-isOlap |
否 |
是否提供展开、收拢的功能,将该报表称为OLAP式折叠报表 |
yes 或 no |
no |
|
data-report-isTreeTable |
否 |
是否以树形报表展现,将该报表称为树形报表 |
yes 或 no |
no |
|
data-report-foldType |
否 |
设置折叠报表的行列折叠类型,适用于OLAP式折叠报表和树形报表 |
both(行列都折叠)、row(只有行向折叠)或col(只有列向折叠) |
both |
|
data-report-foldIcon |
否 |
折叠图标的类型,适用于OLAP式折叠报表和树形报表 |
plus(加减号)或arrow(箭头) |
plus |
|
data-report-foldOnBegin |
否 |
折叠报表初始展现时折叠到第几层,适用于OLAP式折叠报表和树形报表 |
yes(全折叠)、no(全展开)或整数(可以看见的层数) |
no |
|
data-report-base64Image |
否 |
是否将图片或背景图输出为base64格式 |
yes 或 no |
no |
|
data-report-modifiable |
否 |
是否可在web页面中修改单元格数据,此属性必须和报表中的“能否修改”属性同时使用,使用此属性时分页无效 |
yes 或 no |
no |
|
data-report-paramCheck |
否 |
是否对禁用参数值做校验。 禁用参数值可通过在WEB-INF\raqsoftConfig.xml中的disallowedParamWordList 属性中配置 |
yes 或 no |
yes |
|
data-report-reportAlign |
否 |
设置报表的横向显示位置,data-report-needScroll属性值为no时,本属性无效 |
left或center |
center |
|
data-report-matchScreen |
否 |
报表的自适应方式。 |
数值0-8 0 按设计尺寸展现,不用适应容器。 1 始终用报表宽度适应容器宽度,报表高度同比例缩放 2 始终用报表高度适应容器高度,报表宽度同比例缩放 3 竖屏时,相当于mode=2;横屏时,相当于mode=1 4 竖屏时,相当于mode=1;横屏时,相当于mode=2 5 竖屏时,报表高和宽均分别适应容器的高和宽;横屏时,不需适应容器 6 竖屏时,不需适应容器;横屏时,报表高和宽均分别适应容器的高和宽 7 报表高和宽均分别适应容器的高和宽 8 按宽适应容器,报表高度保持不变
横屏定义为容器宽度大于高度,竖屏定义为容器高度大于宽度。 |
1 |
|
data-report-pdfPrintPages |
否 |
PDF打印的页码编号 |
整数,比如"1,3"、"3-6,8,10-14"等 |
打印全部 |
|
data-report-tableLayout |
否 |
设置表格的布局 |
auto:自动表格布局,列宽度由没有折行的单元格最宽内容设定。 fixed:固定表格布局,列宽由表格宽度和列宽度设定,与单元格内容无关。 |
fixed |
|
data-report-directPrintCopies |
否 |
applet直接打印时,指定打印几份 |
整数 |
1 |
|
data-report-directPrintPages |
否 |
applet直接打印时,指定到打印的页码编号 |
整数,比如"1,3"、"3-6,8,10-14"等 |
打印全部 |
|
data-report-displayReport |
否 |
是否显示报表 |
yes或no |
yes |
|
data-report-needImportEasyui |
否 |
是否需要引入easyui的js和css文件 |
yes或no |
no |
|
data-report-theme |
否 |
编辑控件的外观主题风格 |
default,black,bootstrap,gray,metro |
default |
|
data-report-mobileMode |
否 |
指定报表是否使用手机模式渲染 |
yes或no,默认值为空。 yes:按照手机模式渲染。 no:按照电脑模式渲染。 |
无(不指定此参数时程序自动检测浏览器的user-agent来判断是手机浏览器还是电脑浏览器) |
|
data-report-echartsWaitMillis |
否 |
控制Echarts统计图导出延迟等待时间 |
整数(毫秒) 见注7 |
1000 |
|
浏览式报表的属性 |
||||
|
data-report-useCache |
否 |
显示此报表时是否从缓存系统中取已经计算好的报表 |
yes或no 如果是实时报表,应该设为no |
yes |
|
data-report-timeout |
否 |
从缓存系统中取多少分钟内产生的报表,如果没有此时间内的报表,则产生一个新报表 |
整数,表示分钟 负数表示不限时间 |
-1 |
|
data-report-width |
否 |
报表分页宽度 |
整数,单位为px,负数表示无穷大 |
报表设计页面宽度 |
|
data-report-height |
否 |
报表分页高度 |
整数,单位为px,负数表示无穷大 |
报表设计页面高度 |
|
data-report-columns |
否 |
报表分栏数 |
整数 |
报表设计分栏数 |
|
data-report-needPageMark |
否 |
是否显示报表页数及翻页功能 |
yes或no |
yes |
|
data-report-firstPageLabel |
否 |
翻到第一页的功能钮外观定义 |
html元素或文字 |
最前页 |
|
data-report-prevPageLabel |
否 |
翻到前一页的功能钮外观定义 |
html元素或文字 |
上一页 |
|
data-report-nextPageLabel |
否 |
翻到后一页的功能钮外观定义 |
html元素或文字 |
下一页 |
|
data-report-lastPageLabel |
否 |
翻到最后页的功能钮外观定义 |
html元素或文字 |
最后页 |
|
data-report-displayNoLinkPageMark |
否 |
是否显示无超链接的页码标识(如第一页时的“最前页”和“上一页”) |
yes或no |
no |
注1:
data-report-srcType取值说明:
(1) 待发布报表源为报表文件时,取值为file。
(2) 待发布报表源为经过API处理的com.raqsoft.report.model.ReportDefine对象时,取值为defineBean。
(3) 待发布报表源为经过API处理的com.raqsoft.report.usermodel.IReport对象时,取值为reportBean。
注2:
若报表通过API生成的Context对象执行运算,采用div声明式渲染时,需要将该Context对象存入会话,并通过div对应属性指定会话内Context对象的名称,示例如下:
……..
Context context = new Context();
…….
session.setAttribute( “myContext”, context );
<div id=reportContainer
…….
data-report-contextName="myContext" >
</div>
注3:
折叠报表相关标签属性: data-report-isTreeTable、data-report-isOlap、data-report-foldIcon、data-report-foldOnBegin
(1) OLAP折叠报表(data-report-isOlap)与树形报表(data-report-isTreeTable)两种展现方式互斥,data-report-isOlap和data-report-isTreeTable不可同时设为yes。
(2) 折叠报表同时支持固定表头。
(3) 折叠报表不支持分页。
(4) 折叠报表属于JS实现的功能,仅网页端生效;打印与导出效果和普通报表保持一致。
(5) 树形报表无浏览器版本限制;OLAP折叠报表要求IE浏览器版本≥IE,其它浏览器无限制。
(6) 树形报表格式要求:分组格与其子格不能位于同一行,不存在行方向上的全包含或半包含关系。
(7) OLAP折叠报表格式要求:必须满足全包含关系;且每个分组都需要配置统计行。若分组格为纵向扩展,统计行需与分组格同行;若为横向扩展,统计行需与分组格同列。
注4:
使用data-report-needScroll属性时,必须在报表所在div元素上显式指定width和height;若报表外层容器未设置宽高,会出现显示异常。
若data-report-scrollWidth和data-report-scrollHeight使用百分比取值,滚动区域实际宽高会根据报表外层父元素的宽高计算;如果外层元素未定义宽高,百分比取值无法生效,将引发显示异常。
示例:在自定义HTML中,先为报表外层div元素设置宽高,保证滚动区域正常渲染。
<div id="reportContainer" style="width:100%; height:100vh;"
data-report-type="report"
data-report-name="report1"
data-report-reportFileName="网格报表.rpx" >
data-report-needScroll="yes"
data-report-scrollWidth="80%"
data-report-scrollHeight="60%"
</div>
注5:
data-report-paramCheck是否对禁用参数值执行校验。默认值为yes,框架会使用内置检测器进行校验;若不需要对禁用参数值校验,可在报表div属性中配置data-report-paramCheck = "no" 。
注6:
data-report-base64Image 是否将图片或背景图输出为Base64格式。适用于包含少量图片的报表;图片数量较多时,页面输出大量Base64数据可能造成页面加载性能下降。
注7:
data-report-echartsWaitMillis用于控制ECharts统计图导出延迟。该参数能否生效的核心条件:ECharts统计图的JavaScript实现代码中包含wait2seconds关键字。只有检测到该关键字时,延时等待功能才会启用。