1. 概述
1.1 版本
| 报表服务器 | JAR 包 | HTML5 移动端展现插件 | 新增功能 |
|---|---|---|---|
| 10.0 | 2019-12-05 | V10.4.49 | 新增「使用 JSBridge」设置 新增「引入 JS」设置 新增「引入 CSS」设置 |
| - | V10.4.66 | 新增「底部首页切换」按钮 | |
| - | V10.4.76 | 新增「设置资源地址」设置 | |
| - | V10.4.90 | 新增「H5集成登录」设置 新增「顶部导航栏」设置 |
1.2 功能描述
| 设置项 | 应用场景 | 功能简介 |
|---|---|---|
| 底部首页切换 | 用户在 HTML5 端访问报表系统时，希望通过按钮的方式实现首页和目录的切换。 | 用户可通过「底部首页切换」按钮，实现首页和目录的切换。 |
| H5集成登录 | 用户在 HTML5 端访问报表系统/单张模板时，希望实现单点登录。 | 用户可开启「H5集成登录」设置，通过填写自定义的登录认证类和身份识别参数名，即可实现 HTML5 端单点登录。 |
| 顶部导航栏 | HTML5 端访问报表工程时，不同用户有不同需求，有些用户希望使用设备自带的返回按钮，有些用户希望报表系统自带返回按钮。 | 用户可通过「顶部导航栏」，自定义设置 HTML5 端是否显示返回导航。 |
| 使用 JSBridge | 有时 HTML5 端和帆软 App 端需要通信 | 用户可打开「使用 JSBridge」按钮，使得 HTML5 端和原生 App 通信。 |
| 设置资源地址 | HTML5 插件资源都放在报表服务器上，用户访问 HTML5 端模板请求资源时，速度受报表服务器宽带限制。 | 用户可在平台设置资源地址，那么访问 HTML5 端模板请求资源时，速度不再受报表服务器宽带限制。 |
| 引入 JS | 用户有时需要在 HTML5 端实现一些效果，比如改变元素控件和格子的样式、控件的显示或隐藏等。 | 用户可引入外部 JS 文件和 CSS 文件，在 HTML5 端实现一些特效或效果。 |
| 引入 CSS |
2. 插件简介
2.1 插件安装
如需在数据决策系统设置相关 HTML5 设置项，必须安装「HTML5 移动端展现」插件。
点击下载插件： HTML5移动端展现插件
设计器插件安装方法参照 设计器插件管理
服务器安装插件方法参照 服务器插件管理
2.2 界面简介
插件安装完成后，以管理员身份登录数据决策系统，点击「管理系统>移动平台>其它」，新增「H5 设置」，如下图所示：
3. 底部首页切换
「HTML5 移动端展现插件」版本为 V10.4.66 时，支持「底部首页切换」功能。
开启「底部首页切换」按钮，用户在 HTML5 端访问报表系统时，可通过按钮的方式实现首页和目录的切换。
3.1 开启底部首页切换按钮
以管理员身份进入数据决策系统，点击「管理系统>移动平台>其它」， 开启「底部首页切换」按钮，点击「保存」。如下图所示：
3.2 效果预览
HTML5 端输入http://IP:端口号/webroot/decision，访问报表系统，用户可通过底部实现首页与目录间的切换，效果如下图所示：
注1：HTML5 端访问报表系统的步骤可参考 HTML5 端访问报表系统
注2：如未设置首页，无法实现首页与目录之间的切换。具体步骤请参见 管理首页
4. H5集成登录
「HTML5 移动端展现插件」版本为 V10.4.90 时，支持「H5集成登录」功能。
当开启「H5集成登录」后，用户通过 HTML5 端访问报表工程或单张模板，若其中含有身份识别参数名，则自动拦截进行自定义登录验证。
注：插件更新后，需重启设计器，该功能方生效。
4.1 上传登录认证类
本文提供通过「用户名」进行后台单点认证的「自定义登录验证类」。
点击下载并解压自定义登录验证类Demo.class：Demo.rar
将Demo.class上传至报表工程%FR_HOME%\webapps\webroot\WEB-INF\classes目录下，如下图所示：
4.2 开启 H5 集成登录
以管理员身份进入数据决策系统，点击「管理系统>移动平台>其它」， 开启「H5集成登录」按钮，设置「身份识别参数名」和「自定义的登录认证类」。如下图所示：
具体设置内容和注意事项如下：
| 设置项 | 简介 |
|---|---|
| 身份识别参数名 | 用户在 HTML5 端访问「报表工程/模板」时，若访问请求中带有该「身份识别参数名」，则会被拦截进行自定义登录验证 开启「H5集成登录」后，「身份识别参数名」不可为空，否则无法保存 该示例中设置为aaa |
| 自定义的登录认证类 | 可选项为报表工程%FR_HOME%\webapps\webroot\WEB-INF\classes文件夹下所有类 开启「H5集成登录」后，「自定义的登录认证类」不可为空，否则无法保存 该示例中设置为Demo.class |
4.3 效果预览
4.3.1 登录验证
HTML5 端访问报表工程/模板，若访问请求中含有「身份识别参数名」，验证通过即可免登录访问，验证不通过则返回报错界面，如下图所示：
验证逻辑如下表所示：
注：该验证仅对 HTML5 端访问决策报表系统/单张模板生效，App 端、微信集成、钉钉集成、PC 端等不受影响。
| 场景 | 访问链接 | 结果 | |
|---|---|---|---|
| 不含参数访问 | http://IP:端口号/webroot/decision | 跳出登录页，正常输入用户名密码登录 | |
| 含参数访问 | 用户名正常 | http://IP:端口号/webroot/decision?aaa=正常的报表用户名 | 根据认证类验证用户，验证通过，免登录访问系统/模板 |
| 用户名禁用 | http://IP:端口号/webroot/decision?aaa=禁用的报表用户名 | 根据认证类验证用户，验证不通过，跳转报错页面 | |
| 用户名不存在 | http://IP:端口号/webroot/decision?aaa=不存在的报表用户名 | ||
| 用户名为空 | http://IP:端口号/webroot/decision?aaa= | ||
4.3.2 登录超时
若根据认证类验证通过，访问模板后，触发登录超时，提示「当前会话已超时，请重新登录」，关闭后将停留在页面，不跳转至内置登录页。如下图所示：
5. 顶部导航栏
「HTML5 移动端展现插件」版本为 V10.4.90 时，支持「顶部导航栏」功能。
由于在不同设备、不同环境下，不确定终端是否有物理返回键，因此新增「顶部导航栏」按钮，支持用户在 HTML5 端开启「顶部返回导航」，可自定义设置导航背景、导航标题、返回按钮、生效终端等。
5.1 开启顶部导航栏按钮
以管理员身份进入数据决策系统，点击「管理系统>移动平台>其它」， 开启「顶部导航栏」按钮，可设置项如下图所示：
具体设置内容如下表所示：
| 设置项 | 简介 |
|---|---|
| 导航背景 | 用户可自定义设置顶部返回导航栏的背景色 默认蓝色 |
| 标题字号 | 用户可设置导航栏标题字体大小 设置范围为12~20号，默认17号 注：若标题过长，显示不下，则结尾显示... |
| 标题颜色 | 用户可自定义设置导航栏标题字体颜色 默认白色 |
| 字体加粗 | 用户可自行选择导航栏标题字体是否加粗 默认加粗 |
| 对齐方式 | 用户可自行选择导航栏标题文字对齐方式 可设置居左、居中、居右，默认居中 |
| 按钮颜色 | 用户可自定义设置导航栏返回按钮颜色 默认白色 |
| 终端设置 | 用户可自行选择导航栏生效终端 可选择iOS、Android，默认全选 |
5.2 效果预览
HTML5 端输入http://IP:端口号/webroot/decision，访问报表系统，「顶部返回导航栏」效果如下图所示：
注：HTML5 端访问报表系统的步骤可参考 HTML5 端访问报表系统 。
「返回按钮」生效范围如下表所示：
| 场景 | 返回按钮 |
|---|---|
| 登录页 | 无上级页面，不显示返回按钮 |
| 首页 | 无上级页面，不显示返回按钮 |
| 首页超链 | 无上级页面，不显示返回按钮 |
| 单张模板 | 无上级页面，不显示返回按钮 |
| 一级目录 | 无上级页面，不显示返回按钮 |
| 二级及以上目录 | 返回按钮生效，返回上级目录 |
| 目录中的模板 | 返回按钮生效，返回目录 |
| 模板中的超级链接 | 返回按钮生效，返回上级模板 |
6. 使用 JSBridge
「HTML5 移动端展现插件」版本为 V10.4.49 时，支持「使用 JSBridge」功能。
H5 通过 JSBridge 与原生 App 通信，用户若需要和原生 App 通信，可打开使用 JSBridge按钮，点击保存。如下图所示：
7. 设置资源地址
设置资源地址具体介绍请参见：设置资源地址
8. 引入 JS 和 CSS 文件
「HTML5 移动端展现插件」版本为 V10.4.49 时，支持「引入JS」和「引入CSS」功能。
HTML5 端支持引入外部的 JS 和 CSS 文件。本章以引入外部的 JS 文件为例，说明该功能的用法。
注1：引入 CSS 文件和引入 JS 文件操作步骤相同。
注2：该功能仅支持在 HTML5 端使用，不支持 App 端。
8.1 引入 JS 文件
1）将 test.js 文件放到报表工程目录%FR_HOME%\webapps\webroot下，如下图所示：
2）在「引入 JS 」右侧文本框中输入 /test.js ，点击「保存」，如下图所示：
注：H5 引用 JS 的相对路径和 PC 端有差异，H5 要在路径前面多加个「/」。
8.2 模板准备
1）在 FineReport 设计器中，新建普通报表。
2）在 A1 单元格中输入test，选中「A1单元格」，点击「超级链接>添加链接>JavaScript 脚本」，输入 JavaScript 代码，如下图所示：
JavaScript 代码如下：
warn();
8.3 效果预览
保存模板，点击移动端预览，HTML5 预览效果如下图所示：
注：HTML5 端预览模板方法请参见：HTML5 端预览