ActiveReports 8 新特性（9）：HTML5报表浏览器JavaScript事件详解

可通过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>

在安装完AR8后，您可在C:\Program Files (x86)\ComponentOne\ActiveReports 8\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函数和属性接口

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();