报表

阅读(122) 标签: 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

否

当报表源类型为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关键字。只有检测到该关键字时,延时等待功能才会启用。