【ActiveReports】调整 Acrobat Viewer 控件大小以适应页面的大小

在ActiveReports 7.0专业版中，您可以使用WebViewer控件在ASP.NET应用程序中显示报表，WebViewer控件提供了以下几种查看类型：HtmlViewer, RawHtml, AcrobatReader, 和 FlashViewer。以下是这几种

产看类型的简单描述：

HtmlViewer（默认类型）：

RawHTML：

AcrobatReader：

FlashViewer：

通过WebViewer允许用户快速地创建并在Web中显示报表，在某些情况下我们希望WebViewer控件能够填充Web页面的整个区域，通常情况下用户需要设置WebViewer的height属性为 100%，不过height属性设置是不会生效的。一种常用解决方法就是通过CSS样式来控制，如下：

<style type="text/css">
html, body, #WebViewer1, #controlDiv
{
   width: 100%;
   height: 100%;
   margin: 0;
}
</style>

然而，AcrobatReader类型有些限制，所以，以上方法并不会很好的工作。另外一种解决方法就是在Page_Load中添加以下代码：

protected void Page_Load(object sender, EventArgs e)

{

   WebViewer1.Width = Unit.Percentage(100);

   WebViewer1.Height = Unit.Percentage(100);

   WebViewer1.Style["left"] = "0px";

   WebViewer1.Style["height"] = "100%";

}

不过，在我看来控制控件大小的最后方法是在客户端通过jQuery来完成。下面的jQuery代码可以用于设置AcrobatViewer控件的高度，而且在各种浏览器中均可正常工作：

<script type="text/javascript" language="javascript">
   $(document).ready(function () {
   // Get a reference to the first <DIV> inside
   // the <DIV> with ID="viewer-layout-main-panel"
   var d = $("#viewer-layout-main-panel:first");
 
   // Set d equal to the width of its parent <DIV> minus
   // an offset to accomodate padding or margin attribute
   d.width($("#viewer-layout-main-panel:first").width() - 10);
 
   // Get the top position of the Main Div
   var top = $("#mainDiv").position().top;
 
   // Set the height of the MainDiv to the
   // document height minus its Top position
   $("#mainDiv").height($(document).height() - top - 25);
 
   // Get the height and width of the mainDiv
   var h = $("#mainDiv").height();
   var w = $("#mainDiv").width();
 
   // Size the WebViewer Control
   $("#WebViewer1").height(h - 8);
   $("#WebViewer1").width(w - 8);
   });
</script>

运行截图：

 源码下载：VS2010 + ActiveReports 7.0 

Webviewer_Resize.zip (147.06 kb)