报表

阅读(10) 标签: html渲染报表, report,

本章节主要介绍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

当报表源类型为defineBeanreportBean时,已保存到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

是否生成缺省报表参数输入表单

yesno

no

data-report-params

报表所需要的参数

用户提交的参数值

data-report-funcBarFontFace

功能条的字体

字体名称

宋体

data-report-funcBarFontSize

功能条的字体大小

html文件中定义字体大小相同

13px

funcBarFontColor

功能条的字体颜色

html文件中使用的颜色

black

data-report-functionBarColor

功能条背景色

html文件中使用的颜色

无颜色

data-report-needSaveAsExcel

需要显示将报表存为Excel的功能钮吗

yesno

no

data-report-needSaveAsPdf

需要显示将报表存为PDF的功能钮吗

yesno

no

data-report-needSaveAsText

需要显示将报表存为Text的功能钮吗

yesno

no

data-report-needSaveAsWord

需要显示将报表存为Word的功能钮吗

yesno

no

data-report-needSaveAsPicture

需要显示将报表存为图片的功能钮吗

yesno

no

data-report-needSaveAsOfd

需要显示将报表存为OFD的功能钮吗

yesno

no

data-report-needPrint

需要显示打印报表的功能钮吗

yesno

no

data-report-needPdfPrint

是否需要生成PDF打印的功能按钮

yesno

no

data-report-pdfPrintLabel

PDF打印按钮的内容

html元素或文字

PDF打印

data-report-printLabel

打印按钮外观定义

html元素或文字

打印

data-report-needDirectPrint

需要显示直接打印报表的Applet按钮吗

yesno,当为yes时,如果定义了funcBarFontColorfunctionBarColor, 那么应该用”#FFFFFF”之类的颜色值,printLabel应该只用文字

no

data-report-directPrintLabel

直接打印钮外观定义

html元素或文字

直接打印

data-report-needPrintPrompt

直接打印报表前是否需要提示确认

yesno

no

data-report-needSelectPrinter

直接打印报表时可否选择打印机

yesno

no

data-report-savePrintSetup

是否将客户端电脑的打印设置发回服务器保存,以备下次打印这张报表时使用,该属性对直接打印也起作用

yesno

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文件时是否导出显示值

yesno

no

data-report-excelUsePaperSize

存为Excel时:yes按报表设计时的纸张尺寸,no采用本div元素中指定的widthheight

yesno

no

data-report-excelFormat

导出Excel的默认格式

导出Excel两种格式(xlsxlsx)中的一种

xls

data-report-saveAsName

报表另存为ExcelPDFWordText的文件名(不用带扩展名)

文本

与报表同名

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

是否固定上表头和左表头

固定表头后,页面报表不分页,分页方式设置无效

yesno

见注4

no

data-report-needPagedScroll

固定表头后是否分页,data-report-needScrollno时设置失效

yesno

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.htmlmyError.html

data-report-needLinkStyle

单元格有超链接属性时,是否用设计的字体属性显示

yesno

yes

data-report-paperType

纸张类型

纸张类型值,比如A4B5

报表设计纸张类型

data-report-paperWidth

纸张宽度

整数(毫米,像素,英寸)

报表设计纸张宽度

data-report-paperHeight

纸张高度

整数(毫米,像素,英寸)

报表设计纸张高度

data-report-leftMargin

左边距

整数(毫米,像素,英寸)

报表设计左边距

data-report-rightMargin

右边距

整数(毫米,像素,英寸)

报表设计右边距

data-report-topMargin

上边距

整数(毫米,像素,英寸)

报表设计上边距

data-report-bottomMargin

下边距

整数(毫米,像素,英寸)

报表设计下边距

data-report-serverPagedPrint

applet打印时是否采用服务器分页后再按页传输的方式。一般大数据量的报表采用此方式

yesno

yes

data-report-mirrorPrint

打印时是否使用镜像打印

取值为yesno

no

data-report-reportEnterUrl

访问此报表的url地址,当访问地址不是jsp时需要指定

访问报表的url地址

data-report-printerName

默认打印机名称

操作系统中显示的打印机名称

data-report-generateCellId

是否生成单元格ID

yesno

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时,本属性无效

leftcenter

center

data-report-matchScreen

报表的自适应方式。

数值0-8

按设计尺寸展现,不用适应容器。

始终用报表宽度适应容器宽度,报表高度同比例缩放

始终用报表高度适应容器高度,报表宽度同比例缩放

竖屏时,相当于mode=2;横屏时,相当于mode=1

竖屏时,相当于mode=1;横屏时,相当于mode=2

竖屏时,报表高和宽均分别适应容器的高和宽;横屏时,不需适应容器

竖屏时,不需适应容器;横屏时,报表高和宽均分别适应容器的高和宽

报表高和宽均分别适应容器的高和宽

按宽适应容器,报表高度保持不变

 

横屏定义为容器宽度大于高度,竖屏定义为容器高度大于宽度。

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

是否显示报表

yesno

yes

data-report-needImportEasyui

是否需要引入easyuijscss文件

yesno

no

data-report-theme

编辑控件的外观主题风格

default,black,bootstrap,gray,metro

default

data-report-mobileMode

指定报表是否使用手机模式渲染

yesno,默认值为空。

yes:按照手机模式渲染。

no:按照电脑模式渲染。

(不指定此参数时程序自动检测浏览器的user-agent来判断是手机浏览器还是电脑浏览器)

data-report-echartsWaitMillis

控制Echarts统计图导出延迟等待时间

整数(毫秒)

见注7

1000

浏览式报表的属性

data-report-useCache

显示此报表时是否从缓存系统中取已经计算好的报表

yesno

如果是实时报表,应该设为no

yes

data-report-timeout

从缓存系统中取多少分钟内产生的报表,如果没有此时间内的报表,则产生一个新报表

整数,表示分钟

负数表示不限时间

-1

data-report-width

报表分页宽度

整数,单位为px,负数表示无穷大

报表设计页面宽度

data-report-height

报表分页高度

整数,单位为px,负数表示无穷大

报表设计页面高度

data-report-columns

报表分栏数

整数

报表设计分栏数

data-report-needPageMark

是否显示报表页数及翻页功能

yesno

yes

data-report-firstPageLabel

翻到第一页的功能钮外观定义

html元素或文字

最前页

data-report-prevPageLabel

翻到前一页的功能钮外观定义

html元素或文字

上一页

data-report-nextPageLabel

翻到后一页的功能钮外观定义

html元素或文字

下一页

data-report-lastPageLabel

翻到最后页的功能钮外观定义

html元素或文字

最后页

data-report-displayNoLinkPageMark

是否显示无超链接的页码标识(如第一页时的“最前页”和“上一页”)

yesno

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-isTreeTabledata-report-isOlapdata-report-foldIcondata-report-foldOnBegin

(1) OLAP折叠报表(data-report-isOlap)与树形报表(data-report-isTreeTable)两种展现方式互斥,data-report-isOlapdata-report-isTreeTable不可同时设为yes

(2) 折叠报表同时支持固定表头。

(3) 折叠报表不支持分页。

(4) 折叠报表属于JS实现的功能,仅网页端生效;打印与导出效果和普通报表保持一致。

(5) 树形报表无浏览器版本限制;OLAP折叠报表要求IE浏览器版本≥IE,其它浏览器无限制。

(6) 树形报表格式要求:分组格与其子格不能位于同一行,不存在行方向上的全包含或半包含关系。

(7) OLAP折叠报表格式要求:必须满足全包含关系;且每个分组都需要配置统计行。若分组格为纵向扩展,统计行需与分组格同行;若为横向扩展,统计行需与分组格同列。

4

使用data-report-needScroll属性时,必须在报表所在div元素上显式指定widthheight;若报表外层容器未设置宽高,会出现显示异常。

data-report-scrollWidthdata-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关键字。只有检测到该关键字时,延时等待功能才会启用。