1.1 版本

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

注：以上功能不支持 FVS 可视化看板。

2.1 插件安装

如需在数据决策系统设置相关 HTML5 设置项，必须安装「HTML5 移动端展现」插件。

点击下载插件： HTML5移动端展现插件 

设计器插件安装方法参照 设计器插件管理 

服务器安装插件方法参照 服务器插件管理

2.2 界面简介

插件安装完成后，以管理员身份登录数据决策系统，点击「管理系统>移动平台>其它」，新增「H5设置」。如下图所示：

开启「底部首页切换」按钮，用户在 HTML5 端访问报表系统时，可通过按钮的方式实现首页和目录的切换。

3.1 开启底部首页切换按钮

以管理员身份进入数据决策系统，点击「管理系统>移动平台>其它」， 开启「底部首页切换」按钮，点击「保存」。如下图所示：

3.2 效果预览

HTML5 端输入http://IP:端口号/webroot/decision，访问报表系统，用户可通过底部实现首页与目录间的切换，效果如下图所示：

注1：HTML5 端访问报表系统的步骤可参考 HTML5 端访问报表系统

注2：如未设置首页，无法实现首页与目录之间的切换。具体步骤请参见 管理首页

当开启「H5集成登录」后，用户通过 HTML5 端访问报表工程或单张模板，若其中含有身份识别参数名，则自动拦截进行自定义登录验证。

注：插件更新后，需重启设计器，该功能方生效。

4.1 上传登录认证类

本文提供通过「用户名」进行后台单点认证的「自定义登录验证类」。

1）点击下载并解压自定义登录验证类Demo.class：Demo.rar

2）将Demo.class上传至报表工程%FR_HOME%\webapps\webroot\WEB-INF\classes目录下。如下图所示：

4.2 开启 H5 集成登录

管理员登录数据决策系统，点击「管理系统>移动平台>其它」， 开启「H5集成登录」按钮，设置「身份识别参数名」和「自定义的登录认证类」。如下图所示：

具体设置内容和注意事项如下：

4.3 效果预览

4.3.1 登录验证

HTML5 端访问报表工程/模板，若访问请求中含有「身份识别参数名」，验证通过即可免登录访问，验证不通过则返回报错界面

如下图所示：

验证逻辑如下表所示：

注：该验证仅对 HTML5 端访问数据决策系统/单张模板生效，App 端、微信集成、钉钉集成、PC 端等不受影响。

4.3.2 登录超时

若根据认证类验证通过，访问模板后，触发登录超时，提示「当前会话已超时，请重新登录」，关闭后将停留在页面，不跳转至内置登录页。如下图所示：

由于在不同设备、不同环境下，不确定终端是否有物理返回键，因此新增「顶部导航栏」按钮，支持用户在 HTML5 端开启「顶部返回导航」，可自定义设置导航背景、导航标题、返回按钮、生效终端等。

5.1 开启顶部导航栏按钮

管理员登录数据决策系统，点击「管理系统>移动平台>其它」， 开启「顶部导航栏」按钮，可设置项如下图所示：

具体设置内容如下表所示：

5.2 效果预览

HTML5 端输入http://IP:端口号/webroot/decision，访问报表系统，「顶部返回导航栏」效果如下图所示：

注：HTML5 端访问报表系统的步骤可参考 HTML5 端访问报表系统 。

「返回按钮」生效范围如下表所示：

HTML5 查看多级钻取模板后，只能通过点击多次返回主目录，操作较为繁琐。通过「 HTML5 快速返回目录按钮」，无论查看几层钻取后的模板，一键点击后快速返回目录。

管理员进入「管理系统>移动平台>其他」中，打开按钮「H5快速返回」，并「保存」即可生效。详情参见：［H5］HTML5快速返回目录按钮

H5 通过 JSBridge 与原生 App 通信，用户若需要和原生 App 通信，可打开「使用 JSBridge」按钮，点击「保存」。如下图所示：

设置资源地址具体介绍请参见：设置资源地址

HTML5 端支持引入外部的 JS 和 CSS 文件。本章以引入外部的 JS 文件为例，说明该功能的用法。

注1：引入 CSS 文件和引入 JS 文件操作步骤相同。

注2：该功能仅支持在 HTML5 端使用，不支持 App 端。

9.1 引入 JS 文件

1）将 test.js 文件放到报表工程目录%FR_HOME%\webapps\webroot下，如下图所示：

2）在「引入 JS 」右侧文本框中输入 /test.js ，点击「保存」，如下图所示：

注：H5 引用 JS 的相对路径和 PC 端有差异，H5 要在路径前面多加个「/」。

9.2 模板准备

1）在 FineReport 设计器中，新建普通报表。

2）在 A1 单元格中输入test，选中「A1单元格」，点击「超级链接>添加链接>JavaScript 脚本」，输入 JavaScript 代码，如下图所示：

JavaScript 代码如下：

warn();

9.3 效果预览

保存模板，点击「移动端预览」，HTML5 预览效果如下图所示：

注：HTML5 端预览模板方法请参见：HTML5 端预览