HTML 渲染报表

阅读（15）点赞（0）标签: html渲染框架,

概述

润乾报表配套提供纯HTML渲染框架，可渲染发布报表、参数表单、大报表、报表组、填报表、统计表、Dashboard等各类报表。与传统JSP标签方式不同，纯HTML渲染框架采用声明式渲染。用户无需编写JSP页面，只需在HTML页面引入框架所需JS文件，配置data-base-url，再定义一个带属性的div元素；框架即可完成报表解析与运算，并按照配置属性的要求，将报表HTML输出至客户端浏览器。

本章主要介绍声明式渲染报表的使用方法，包含总体介绍、通用使用流程、通用属性规则，以及发布报表、参数表单、大报表、报表组、填报表、统计表、Dashboard各类报表的详细说明。

原理和用途

传统方案需要在JSP文件中通过taglib标签发布报表，该方式依赖JSP与标签库解析。若不希望使用JSP，可在自有页面引入框架JS文件、配置data-base-url，编写div元素即可展示报表。声明式渲染原理如下：页面加载完成后，框架扫描页面中带有报表类型标识（data-report-type属性）的div，根据div上声明的属性完成报表解析与运算，并按照用户配置的属性要求，将报表HTML输出到该div所在位置，在客户端呈现报表。

使用准备

（1）引入必要的JS文件，并配置data-base-url

在HTML页面的head标签内引入HTML渲染框架所需JS文件。data-base-url为HTML动态加载源地址。

jquery-3.6.0.min.js：jQuery基础库，提供DOM操作、事件处理、AJAX等框架运行所需基础能力。

easyui：报表大量交互组件依赖该库。

report-framework.js：报表渲染核心js文件。

i18n.js：用于页面静态文本的国际化语言转换。

（2）编写声明式div

在HTML页面的body标签内编写带有data-report-type属性及对应报表类型属性的div元素，即可通过声明式方式渲染报表。下面以发布报表为例：

<html>

<head>

</head>

<body>

<div id="reportContainer"

data-report-type="report"

data-report-name="report1"

data-report-reportFileName="网格报表.rpx"

data-report-funcBarLocation="no" >

</div>

</body>

</html>

HTML渲染框架的公共属性，适用于各种报表类型

HTML渲染框架提供一组公共属性，适用于全部报表类型（report、paramform、big、group、input、aggr、dashboard），用于声明报表的基本渲染行为。各公共属性说明如下：

属性名	是否必填	属性含义	属性取值	缺省值
data-report-type	是	声明当前div需要渲染的报表类型，框架根据该值选择对应的渲染逻辑与属性集合	常量：report、paramform、big、group、input、aggr、dashboard	无
data-report-scanParamform	否	是否自动扫描并加载对应的参数模板	布尔值：true、false	false
data-report-paramformcontainerid	否	参数模板的容器id	符合变量命名规则的字符串，在当前页面内唯一	无
data-report-paramformconfig	否	参数模板配置	json字符串	无
data-report-includehtml	否	将url响应正文直接加载到容器内	url字符串	无
data-report-udfreportrequest	否	自定义报表加载请求地址	url字符串	无

属性使用说明：

（1）所有公共属性均以data-report-作为前缀，声明在div标签上；属性值采用字符串形式，多个属性之间以空格分隔。

（2）data-report-type为必填属性，用于声明报表类型，框架依据该属性选择对应的渲染逻辑与属性集合。

（3）data-report-paramformconfig的属性值为json字符串，必须严格遵循JSON语法规范编写。

（4）其余可选属性可根据实际需求配置，未配置时采用框架默认行为。

注意事项：

属性名大小写敏感，必须严格按照文档书写；data-base-url配置在report-framework.js对应的script标签上，不属于div标签属性。