1. 概述
1.1 版本
| 报表服务器版本 | HTML5 移动端展现插件版本 |
|---|---|
| 11.0 | V11.0 |
1.2 功能描述
| 设置项 | 应用场景 | 功能简介 |
|---|---|---|
| 底部首页切换 | 用户在 HTML5 端访问报表系统时，希望通过按钮的方式实现首页和目录的切换。 | 用户可通过「底部首页切换」按钮，实现首页和目录的切换。 |
| H5集成登录 | 用户在 HTML5 端访问报表系统/单张模板时，希望实现单点登录。 | 用户可开启「H5集成登录」设置，通过填写自定义的登录认证类和身份识别参数名，即可实现 HTML5 端单点登录。 |
| 顶部导航栏 | HTML5 端访问报表工程时，不同用户有不同需求，有些用户希望使用设备自带的返回按钮，有些用户希望报表系统自带返回按钮。 | 用户可通过「顶部导航栏」，自定义设置 HTML5 端是否显示返回导航。 |
| H5快速返回 | 查看钻取后的模板，实现一键点击后快速返回目录 | 详情参见：［H5］HTML5快速返回目录按钮 |
| 使用 JSBridge | 有时 HTML5 端和帆软 App 端需要通信 | 用户可打开「使用 JSBridge」按钮，使得 HTML5 端和原生 App 通信。 |
| 设置资源地址 | HTML5 插件资源都放在报表服务器上，用户访问 HTML5 端模板请求资源时，速度受报表服务器宽带限制。 | 用户可在平台设置资源地址，那么访问 HTML5 端模板请求资源时，速度不再受报表服务器宽带限制。 |
| 引入 JS | 用户有时需要在 HTML5 端实现一些效果，比如改变元素控件和格子的样式、控件的显示或隐藏等。 | 用户可引入外部 JS 文件和 CSS 文件，在 HTML5 端实现一些特效或效果。 |
| 引入 CSS |
注：仅「底部首页切换」、「H5集成登录」、「顶部导航栏」支持 FVS 可视化看板，其余均不支持 FVS 可视化看板。
2. 插件简介
2.1 插件安装
注：如需在数据决策系统设置相关 HTML5 设置项，必须安装「HTML5 移动端展现」插件。
点击下载插件： HTML5移动端展现插件
设计器插件安装方法参照： 设计器插件管理
服务器安装插件方法参照： 服务器插件管理
2.2 界面简介
插件安装完成后，以管理员身份登录数据决策系统，点击「管理系统>移动平台>H5设置」，可看到具体设置项 ，如下图所示：
3. 底部首页切换
勾选「底部首页切换」，用户在 HTML5 端访问报表系统时，可通过底部工具栏按钮的方式实现首页和目录的切换。
3.1 开启底部首页切换
以管理员身份进入数据决策系统，点击「管理系统>移动平台>H5设置」， 勾选「底部首页切换」，如下图所示：
3.2 效果预览
HTML5 端点击链接：http://IP:端口号/webroot/decision，访问报表系统，用户可通过底部工具栏的按钮实现首页与目录的切换，效果如下图所示：
注1：HTML5 端访问报表系统的步骤可参考 HTML5 端访问报表系统 。
注2：设置首页的具体步骤请参见 管理首页 ，如未设置首页，则无法实现首页与目录之间的切换。
4. H5集成登录
勾选「H5集成登录」后，用户通过 HTML5 端访问报表工程或单张模板，若其中含有身份识别参数名，则自动拦截进行自定义登录验证。
注：插件更新后，需重启设计器，该功能方生效。
4.1 上传登录认证类
本文提供通过「用户名」进行后台单点认证的「自定义登录验证类」。
1）点击下载并解压自定义登录验证类Demo.class：Demo.rar 。
2）将Demo.class上传至报表工程%FR_HOME%\webapps\webroot\WEB-INF\classes目录下。如下图所示：
4.2 开启 H5 集成登录
管理员登录数据决策系统，点击「管理系统>移动平台>H5设置」，勾选「H5集成登录」，设置「身份识别参数名」和「自定义的登录认证类」。如下图所示：
具体设置项和说明如下表所示：
| 设置项 | 说明 |
|---|---|
| 身份识别参数名 |
|
| 自定义的登录认证类 |
|
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 端开启「顶部返回导航」，可自定义设置导航背景、修改标题默认设置、按钮颜色、终端设置。
5.1 开启顶部导航栏
管理员登录数据决策系统，点击「管理系统>移动平台>H5设置」，勾选「顶部导航栏」，可设置项如下图所示：
具体设置项及说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 导航背景 |
| |
修改标题默认设置 （默认不勾选） | 标题字号 |
注：若标题过长，显示不下，则结尾显示... |
| 标题颜色 |
| |
| 字体加粗 |
| |
| 对齐方式 |
| |
| 按钮颜色 |
| |
| 终端设置 |
| |
5.2 效果预览
HTML5 端点击链接：http://IP:端口号/webroot/decision，访问报表系统，用户可通过「顶部导航栏」返回上级目录。
注：HTML5 端访问报表系统的步骤可参考 HTML5 端访问报表系统 。
「返回按钮」生效范围如下表所示：
| 场景 | 返回按钮 |
|---|---|
| 登录页 | 无上级页面，不显示返回按钮 |
| 单张模板 | |
| 一级目录 | |
| 首页 | 返回按钮生效，返回一级目录 |
| 一级目录中的模板 | |
| 二级及以上目录 | 返回按钮生效，返回上级目录 |
| 模板中的超级链接 | 返回按钮生效，返回上级模板 |
以「首页」为例，点击「返回」按钮，返回一级目录，如下图所示：
6. HTML5快速返回
HTML5 端查看多级钻取模板后，只能通过点击多次返回主目录，操作较为繁琐。
通过「 HTML5 快速返回」按钮，无论查看几层钻取后的模板，一键点击后即可快速返回目录，如下图所示：
注：更多「 HTML5 快速返回」按钮设置，详情参见：HTML5快速返回目录 。
7. 使用 JSBridge
H5 通过 JSBridge 与原生 App 通信。
管理员登录数据决策系统，点击「管理系统>移动平台>H5设置」，勾选「使用 JSBridge」，如下图所示：
8. 设置资源地址
设置资源地址具体介绍请参见：设置资源地址 。
9. 引入 JS 和 CSS 文件
HTML5 端支持引入外部的 JS 和 CSS 文件。本章以引入外部的 JS 文件为例，说明该功能的用法。
注1：引入 CSS 文件和引入 JS 文件操作步骤相同。
注2：该功能仅支持在 HTML5 端使用，不支持 App 。
9.1 引入 JS 文件
1）将 test.js 文件放到报表工程目录%FR_HOME%\webapps\webroot下，如下图所示：
2）管理员登录数据决策系统，点击「管理系统>移动平台>H5设置」，在「引入 JS 」右侧文本框中输入 test.js ，如下图所示：
9.2 示例
1） 打开 FineReport 设计器，新建普通报表。
2）在 A1 单元格中输入文本：test，选中 A1 单元格。
3）点击右侧「超级链接」，点击「+」按钮，选择「JavaScript 脚本」，输入 JS 语句，如下图所示：
JS 语句如下：
warn();
9.3 效果预览
保存模板，点击「移动端预览」，HTML5 端预览效果如下图所示：
注：HTML5 端预览模板方法请参见：HTML5 端预览 。
