您可以使用JQuery方法来自定义HTMLViewer界面。 WebViewer控件可以在页面的脚本中添加jQuery库。在本示例中使用代码，可以用来从HTMLViewer工具栏中删除按钮，并添加一个客户端PDF导出的执行程序。
本示例分为以下几个步骤：
•将ActiveReport报表控件加载到Visual Studio的ASP.NET Web应用程序。
•访问WebViewer的视图模型。
•删除一个现有的工具栏按钮。
•添加一个导出为PDF格式的功能。
•将自定义用户界面绑定到WebViewer的视图模型。
当您完成本示例时，您可以获得一个运行时类似于以下样式的HTMLViewer。
如何将ActiveReport报表控件加载到Web应用程序
1. 创建一个新的Visual Studio的ASP.NET Web应用程序。
2. 在被创建的Default.aspx上，跳转到Visual Studio工具箱的ActiveReports 9页面报表选项卡，并将一个WebViewer控件拖放到报表设计器视图。
3. 加载在“单个布局报表”示例结束时生成的报表。
注意：您可以加载HTMLViewer中的任何报表，区域或页面。要想了解有关如何加载报表的更多详细信息，请您参阅“Web浏览器入门指南”这一章节。
如何访问WebViewer视图模型
HTMLWeb浏览器是通过使用MVVM模式来创建的，该模式可以提供一个不依赖于用户界面的视图模型。该代码可以通过使用有据可查的属性和方法，来访问报表浏览器的视图模型，并将自定义用户界面与其绑定。对于MVVM支持，代码可以使用knockout.js，这是JavaScript标准的MVVM库。 Knockout.js可以提供声明式绑定，可观察的对象，和HTML标记的集合。要想了解更多详细信息，请您参阅“如何使用JavaScript来操作HTML浏览器”这一章节。
请按照以下的步骤来访问ViewModel。
1. 在Default.aspx文件的源视图中，添加一个<script>标签。
在正文标记之前，按照如下所示来添加一个脚本标签
<scriptlanguage="javascript"type="text/javascript">
</script>
2. 将以下的Javascript代码添加到文档的Onload事件处理程序和WebViewer的Loaded事件处理程序上。当在HTML页面上渲染该用户界面时，这两个事件处理程序会被触发。
将以下代码粘贴到.aspx源
<scriptlanguage="javascript"type="text/javascript">functionviewer_loaded()
{
};
functiondocument_onload()
{
};
</script>
...
<bodyonload="returndocument_onload()">
3. 将以下的Javascript代码添加到在viewer_loaded事件处理程序内部，以便访问WebViewer的视图模型：
将以下代码粘贴到.aspx源
varviewModel=GetViewModel('WebViewer1');
4. 将以下的Javascript代码添加到document_load事件处理程序内部，以便将WebViewer的Loaded事件绑定到客户端的viewer_loaded事件：
将以下代码粘贴到.aspx源
$('#WebViewer1').bind('loaded',viewer_loaded);
如何从WebViewer工具栏上删除按钮
在Default.aspx文件的源视图上，将以下的Javascript代码添加到viewer_loaded事件处理程序中，以便访问WebViewer工具栏，然后从工具栏中删除“后一页”按钮：
将以下代码粘贴到.aspx源
vartoolbar=('#WebViewer1').find('.arvToolBar');toolbar.find('.btnNext').remove();
注意：为了访问WebViewer工具栏的子元素，您需要他们的CSS类名称。以下是一个引用的列表：
工具栏子元素
切换侧边栏按钮：btnToggleSidebar
查找按钮：btnFind
第一页按钮：btnFirst
前一页按钮：btnPrev
页面标签：toolbarLabel
页码输入框：toolbarInput
翻页键：btnNext
最后一页按钮：btnLast
返回父报表按钮：btnBack
如何添加一个导出为PDF格式的功能
以下的步骤说明了应该如何建立一个自定义的用户界面。
1. 在Default.aspx文件的源视图中，添加以下的Javascript代码到<script>标签内部，以创建一个函数。 此函数可以访问视图模型，并将报表导出为PDF格式：
将以下代码粘贴到.aspx源
functionexportPDF()
{
varviewModel=GetViewModel('WebViewer1');if(viewModel.PageLoaded())
{
viewModel.Export(ExportType.Pdf,function(uri)
{
window.location=uri;
},true);
}
}
2. 在Default.aspx文件的源视图中，添加以下的Javascript代码到<form>标签内部，以便在自定义工具栏上添加一个按钮。一旦报表被加载，并在运行时调用exportPDF（）函数，此按钮就会被启用：
将以下代码粘贴到.aspx源
<divid="customToolbar"style="display:inline">
<buttondata-bind='enable:PageLoaded,click:exportPDF'style="width:105px;font-size:medium;height:22px;">Export</button>
</div>
3. 在Default.aspx文件的源视图中，添加以下的Javascript代码到viewer_loaded事件处理程序内部，以便将自定义工具栏与内置工具栏安装在一起：
将以下代码粘贴到.aspx源
$('#customToolbar').appendTo(toolbar);
如何将自定义的用户界面绑定到WebViewer的视图模型，并运行该应用程序
1. 添加以下的Javascript代码到viewer_loaded事件处理程序内部，以便将自定义的用户界面绑定到WebViewer的视图模型：
将以下代码粘贴到.aspx源
ko.applyBindings(viewModel, document.getElementById("customToolbar"));
2. 按下F5键以运行该应用程序。
注意：请使用您应用程序中WebViewer控件的实际ID来替换上面的代码段中的'WebViewer1'。