ActiveReports报表控件：定制 HTMLViewer 控件

WebViewer 控件是ActiveReports报表控件专业版提供的功能，允许用户在 Web 项目中展示报表，并且提供了多种报表浏览器，如下：

HtmlViewer
RawHTML
AcrobatReader
FlashViewer

本篇博客将着重简述 HtmlViewer 使用方法，HTMLViewer 仅需要下载 HTML标签和 JavaScript 脚本到客户端。有些用户询问是否可以定制 HTMLViewer 的工具条，添加打印按钮、导出等按钮到工具条中。

本文中将展示以下功能：

添加打印按钮
添加子报表切换按钮
添加导出按钮

首先让我们来看下如何实现打印按钮的添加：

效果图如下：

HtmlPrint

后台导出代码如下：

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

CustomHtml_Print.zip

接下来我们需要添加报表切换按钮和导出按钮到 HTMLViewer 的工具条。展示如何添加在讲述具体实现方法之前，我们先查看下最终实现效果图：

DropDowns

实现方法:
客户端代码

<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;
      }
   }
}

在这个步骤中我们添加了Select元素到 WebViewer 的 ViewModel 下。Select 元素用户展示当前需要切换的报表并且用于发送选择指令。一旦用户切换了报表，将强制发送PostBack指令到服务端。同时，当前的报表名称会存储在 Hidden Field 中用于记录报表名称。
第二部分用户定制导出下拉框。这个功能在客户端实现即可:

<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>