← 返回所有博客文章

 

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

 

接下来我们需要添加报表切换按钮和导出按钮到 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;
            
                  }
            
               }
            
            }
          1. 在这个步骤中我们添加了Select元素到 WebViewer 的 ViewModel 下。Select 元素用户展示当前需要切换的报表并且用于发送选择指令。一旦用户切换了报表,将强制发送PostBack指令到服务端。同时,当前的报表名称会存储在 Hidden Field 中用于记录报表名称。

          2. 第二部分用户定制导出下拉框。这个功能在客户端实现即可:

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

       

      效果图:

      ViewerInAction

      示例下载:

      VS2010 + .NET 4.0 + C# + AR8.0