l HTML5报表浏览器使用功能解析
本文以安装AR9自带的源码HTML5 Viewer为例，介绍一下HTML5报表浏览器的使用功能，并一一说明如何使用。
C:\Users\用户名\Documents\GrapeCity Samples\ActiveReports 9\HTML5 Viewer
系统运行环境为：IE11 + Visual Studio 2013
启动系统自带的HTML5 Viewer示例demo后，选择Basic，FPL，Desktop，即可渲染如上截图所示的HTML5风格的报表类型，下面就工具栏的按钮功能，一一简介：
HTML5 Viewer(报表浏览器)Desktop风格工具栏功能简介
|
工具栏 |
名称 |
描述 |
|
|
Sidebar(侧边栏) |
用于呈现报表目录、搜索结果、参数输入面板信息。 |
|
|
Search(搜索) |
呈现搜索结果信息。 |
|
|
First(第一页) |
导航到该报表的第一页 |
|
|
Prev（上一页) |
导航到该报表的上一页 |
|
2/124 |
Current page(当前页) |
呈现总页数和当前页数。输入指定页数，可导航。 |
|
|
Next(下一页) |
导航到该报表的下一页 |
|
|
Last(最后一页) |
导航到该报表的最后一页 |
|
|
Back to Parent(回到上级) |
返回到跳转报表的上一个报表页面。 |
|
|
Print(打印) |
启动打印对话框 |
|
|
Save As(另存为) |
当前报表另存为按钮。 目前支持的另存为类型有：PDF Document,Word Document, Image File, MHTML Web Archives, 和 Excel Workbook. |
HTML5 Viewer(报表浏览器)Mobile风格工具栏功能简介
|
工具栏 |
名称 |
描述 |
|
|
Sidebar(侧边栏) |
用于呈现报表目录、搜索结果、参数输入面板信息。 |
|
|
Parameters(参数) |
呈现参数面板. |
|
|
Search(搜索) |
呈现搜索结果信息。 |
|
|
Save As(另存为) |
当前报表另存为按钮。 目前支持的另存为类型有：PDF Document,Word Document, Image File, MHTML Web Archives, 和 Excel Workbook. |
|
|
Prev（上一页) |
导航到该报表的上一页Navigates to?the previous page of the displayed report. |
|
|
Next(下一页) |
导航到该报表的 下一页 |
|
2/124 |
Current page(当前页) |
呈现总页数和当前页数。输入指定页数，可导航。 |
|
|
Back to Parent(回到上级) |
返回到跳转报表的上一个报表页面。 |
l HTML5报表浏览器JavaScript事件详解
下面有分3个步骤来详解HTML5报表浏览器的JavaScript事件方法：
初始化HTML5报表浏览器
HTML5报表浏览器的依赖JQuery等开源框架
jQuery 1.9.0 or higher
Bootstrap 3.0
Knockout.js 2.3.0 or higher
可通过CDN添加
|
<link rel="stylesheet" href="GrapeCity.ActiveReports.Viewer.Html.css" > <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js" type="text/javascript"></script> <script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script> <script type="text/javascript"> </script> |
在安装完AR9后，您可在C:\Program Files (x86)\GrapeCity\ActiveReports 9\Deployment\Html文件夹下找到3个文件：
GrapeCity.ActiveReports.Viewer.Html.css
GrapeCity.ActiveReports.Viewer.Html.js
GrapeCity.ActiveReports.Viewer.Html.min.js
拷贝这3个文件到您的web项目下。
在目标HTML页面，添加DIV元素，为了渲染HTML5报表浏览器：
|
<div id="viewer" style="width:600px;height:480px;"></div> |
这段代码用来初始化HTML5报表浏览器，即DIV元素”viewer” ：
|
$(function () { var viewer = GrapeCity.ActiveReports.Viewer( { element: '#viewer', report: { id: "Report.rdlx"
}, selectedReportIndex: 0,
reportService: { url: '/ActiveReports.ReportService.asmx' }, uitype: 'desktop', documentLoaded: function reportLoaded() { console.log(viewer.pageCount); }, reportLoaded: function (reportInfo) { console.log(reportInfo.parameters); },
error: function (error) { console.log("error"); }
}); }); |
初始化选项 下面的11个选项(4个回调函数)可在初始化或运行时设置，JavaScript代码分别一一列举如下：
uiType ：用于设置HTML5报表浏览器的UI Mode(类型)
数据类型: String
可选值: 'Custom', 'Mobile' , 'Desktop'
例子:
|
viewer.option('uiType', 'Mobile'); |
element：指定承载HTML5的浏览器控件的元素的jQuery选择器。
备注:该选项仅适用于初始化阶段。
数据类型: String
例子:
|
var viewer = GrapeCity.ActiveReports.Viewer( { element: '#viewerContainer2', reportService: { url: '/ActiveReports.ReportService.asmx' }, }); |
reportService： 报表服务器地址(ActiveReports Server、ActiveReports Web Report Service )
数据类型: Object(url、securityToken[可选]、resourceHandler[可选])
例子:
|
reportService: { url: 'http://remote-ar-server.com', securityToken: '42A9CD80A4F3445A9BB60A221D042FCC', --登陆AR8 server用 resourceHandler: 'http://remote-ar-server.com/resourceHandler.aspx' --AR8 Server 资源处理 }; |
report ：加载报表的信息(ActiveReports Server、ActiveReports Web Report Service )。
数据类型: object(id、parameters).
例子:
|
report: { id: 'CustomersList', parameters: [ { name: 'CustomerID', value: 'ALFKI' }] }; |
{name, value} 键值对参数值用于返回报表.
reportLoaded:HTML5报表浏览器收到请求后，返回reportInfo对象，包含(TOC信息、参数信息、渲染链接信息)
数据类型: function(reportInfo) 回调函数
Example:
|
reportLoaded: function (reportInfo) { console.log(reportInfo.parameters); }; |
action :当HTML5报表浏览器点击超链接(hyperlink)、书签链接(bookmark link)、跳转(drill down )、报表控件是否可见(toggles )操作触发该回调函数.
数据类型: function(actionType, actionParams) 回调函数
例子:
|
function onAction(actionType, actionParams) { if (actionType === 0) { window.open(params.url, "Linked from report", "height=200,width=200"); } } viewer.option('action', onAction); |
availableExports:用于指定导出的类型。默认PDF、Word、Image、Mht、Excel均可导出。
数据类型: Array
例子:
|
viewer.option("availableExports", ['Pdf']); |
maxSearchResults ：一次搜索最多返回的结果个数.
数据类型: Number
例子:
|
maxSearchResults: 10 |
error ：当报表呈现过程出错，则触发该回调函数。
数据类型: function(error) ，回调函数
例子:
|
function onError(errorInfo) { console.log(errorInfo); return true; }; |
documentLoaded ：当文档完全被加载后，触发该回调函数。
数据类型: function() ，回调函数
例子:
|
documentLoaded: function () { setPaginator(); }; |
localeUri :本地化字符链接文件。
备注:该选项仅适用于初始化阶段。
数据类型: String
例子:
|
var viewer = GrapeCity.ActiveReports.Viewer( { localeUri: 'Scripts/i18n/ru.txt' }); |
API函数和属性接口
在HTML5报表浏览器经过初始化后，可使用如下的API函数和属性接口进行操作。
Methods
option: 通过名称Gets 或 sets 选项的值.
语法: option(name,[value]) Object
参数:
name: option 名称.
value: [可选] 设置的值。如不输入Value，则返回当前已经设置的值.
例子:
|
viewer.option('uiType', 'mobile'); viewer.option('report', { id: 'my report' }); |
返回值: 当前设置的值.
refresh：当前预览报表进行刷新
语法: option(name,[value])Object
例子:
|
viewer.refresh() |
返回值: Void
print:打印当前报表
语法: print()Void
例子:
|
viewer.print() |
返回值: Void
goToPage：跳转到指定页面报表(可选的进行offset，如果执行则返回回调CallBack)
语法: goToPage(number, offset, callback)Void
参数:
number: 跳转指定页面号码.
offset object: {left:12.2, top:15}.
callback: 跳转成功后的回调函数.
例子:
|
viewer.goToPage(1, { 2, 3 }, function onPageOpened() {}); |
返回值: Void
backToParent：回到向下钻取的报表的上一级报表页面
语法: backToParent()Void
例子:
|
viewer.backToParent() |
返回值: Void
destroy：删除报表所有元素
语法: destroy()Void
例子:
|
viewer.destroy() |
返回值: Void
export：导出当前报表
语法: export(exportType,callback,saveAsDialog,settings) Void
参数:
exportType: 导出格式.
callback: 导出成功后回调函数 (含Url).
saveAsDialog: 导出对话框是否出现.
settings: 导出设置.
例子:
|
viewer.export('Word', function () { console.log('export callback'); }, true, { FileName: 'Document.doc' }) |
返回值: Void
search：报表内容搜索
语法: search(searchTerm, searchOptions, callback)Void
参数:
searchTerm: 搜索字符串.
searchOptions: 搜索的选项:
matchCase: 大小写匹配.
wholePhrase: 全字匹配.
callback: 搜索结果回调函数.
例子:
|
viewer.search('a', { matchCase: true, wholePhrase: false }, function (results) { console.log(results); }); |
返回值: Void
getToc：报表目录点击回调函数
语法: getToc(callback) Void
参数:
callback: 目录点击事件回调.
例子:
|
viewer.getToc(function (toc) { console.log(toc); }) |
返回值: Void
Properties
pageCount：获得当前报表的总页数
语法: viewer.pageCount
例子:
|
console.log(viewer.pageCount) |
返回值: 数值.
currentPage：获得报表当前呈现的页面号码
语法: viewer.currentPage
例子:
|
console.log(viewer.currentPage) |
返回值: 数值.
Toolbar：获得工具栏的HTML元素
语法: viewer.Toolbar
例子:
|
// Toolbar, MobileToolbarTop, MobileToolbarBottom $(viewer.toolbar).hide(); $(viewer.toolbarTop).hide(); $(viewer.toolbarBottom).hide(); |
