WebViewer 控件是ActiveReports报表控件专业版提供的功能，允许用户在 Web 项目中展示报表，并且提供了多种报表浏览器，如下：
- HtmlViewer
- RawHTML
- AcrobatReader
- FlashViewer
本篇博客将着重简述 HtmlViewer 使用方法，HTMLViewer 仅需要下载 HTML标签和 JavaScript 脚本到客户端。有些用户询问是否可以定制 HTMLViewer 的工具条，添加打印按钮、导出等按钮到工具条中。
本文中将展示以下功能：
- 添加打印按钮
- 添加子报表切换按钮
- 添加导出按钮
- 首先让我们来看下如何实现打印按钮的添加：
效果图如下：
后台导出代码如下：
protected void Page_Load(object sender, EventArgs e)
{
if (Request["Task"] != null)
{
if (Request["Task"].ToString().Contains("Print"))
{
rptCustHTML rpt = new rptCustHTML();
try
{
rpt.Run(false);
}
catch (Exception eRunReport)
{
//If the report fails to run, report the error to the user
Response.Clear();
Response.Write("<h1>Error running report:</h1>");
Response.Write(eRunReport.ToString());
return;
}
//Buffer this page's output until the report output is ready.
Response.Buffer = true;
//Clear any part of this page that might have already been buffered for output.
Response.ClearContent();
//Clear any headers that might have already been buffered (such as the content
//type for an HTML page)
Response.ClearHeaders();
//Tell the browser and the "network" that the resulting data of this page should
//be cached since this could be a dynamic report that changes upon each request.
Response.Cache.SetCacheability(HttpCacheability.NoCache);
//Tell the browser this is an HTML document so it will use an appropriate viewer.
Response.ContentType = "text/html";
//Create the HTML export object
GrapeCity.ActiveReports.Export.Html.Section.HtmlExport htmlExport1 = new GrapeCity.ActiveReports.Export.Html.Section.HtmlExport();
//Export the report to HTML in this session's webcache
MyCustomHtmlOutputter outputter = new MyCustomHtmlOutputter(this.Context);
htmlExport1.Export(rpt.Document, outputter, "");
Response.Redirect("ReportOutput" + "/" + System.IO.Path.GetFileName(outputter.mainPage));
}
}
}
前台代码:
$(document).ready(function fn() {
$(".arvToolBar").append("<span><input id='btnPrint' type='Button' value='Print' onclick='print()'/></span>");
});
function print() {
w = window.open("WebForm1.aspx?Task=Print");
w.focus();
$(w.document).ready(function () {
window.setTimeout("w.print()", 2000);
});
};
示例下载：
VS2010 + .NET 4.0 + C# + AR8.0
接下来我们需要添加报表切换按钮和导出按钮到 HTMLViewer 的工具条。展示如何添加在讲述具体实现方法之前，我们先查看下最终实现效果图：
实现方法:
客户端代码
-
在这个步骤中我们添加了Select元素到 WebViewer 的 ViewModel 下。Select 元素用户展示当前需要切换的报表并且用于发送选择指令。一旦用户切换了报表，将强制发送PostBack指令到服务端。同时，当前的报表名称会存储在 Hidden Field 中用于记录报表名称。
-
第二部分用户定制导出下拉框。这个功能在客户端实现即可:
<script language="javascript" type="text/javascript">
function ForcePostBack() {
form1.submit();
}
var reportSelect = '<select id="ReportSelect" style="width:150px"><option selected disabled>Choose Report</option><option value="SectionReport1">SectionReport1</option><option value="SectionReport2">SectionReport2</option></select>';
$(document).ready(function () {
var selectedValue = $("#fldReportName").val();
if (selectedValue !== "") {
setTimeout(function () {
$("#ReportSelect").val(selectedValue);
}, 100);
}
var toolbar = $('#WebViewer1').find('.arvToolBar');
toolbar.append(reportSelect);
//Force a postback upon report selection
$("#ReportSelect").change(function (e, args) {
var reportName = this.value;
$("#fldReportName").val(reportName);
ForcePostBack();
this.value = $("#fldReportName").val();
});
});
</script>protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
string reportName = this.fldReportName.Value.ToString();
switch (reportName)
{
case "SectionReport1":
SectionReport1 rpt1 = new SectionReport1();
WebViewer1.Report = rpt1;
break;
case "SectionReport2":
SectionReport2 rpt2 = new SectionReport2();
WebViewer1.Report = rpt2;
break;
}
}
}
<script language="javascript" type="text/javascript">
var exportSelect = '<select id="ExportSelect" style="width:80px"><option selected disabled>Export</option><option value="PDF" style="background: url(images/pdf.png) right no-repeat; width: 50px">PDF</option><option value="Excel" style="background: url(images/Excel.gif) right no-repeat; width: 50px">Excel</option></select>';
$(document).ready(function () {
var toolbar = $('#WebViewer1').find('.arvToolBar');
toolbar.append(exportSelect);
ar viewModel = GetViewModel("WebViewer1");
//Check the selected value in DropDown and Export
$("#ExportSelect").change(function (e, args) {
var valueSelected = this.value;
if (viewModel.PageLoaded()) {
switch (valueSelected) {
case "PDF":
viewModel.Export(ExportType.Pdf, function (uri) {
window.location = uri;
}, true);
break;
case "Excel":
viewModel.Export(ExportType.Xls, function (uri) {
window.location = uri;
}, true);
break;
}
}
});
});
</script>
效果图：
示例下载：
VS2010 + .NET 4.0 + C# + AR8.0
