← 返回所有博客文章

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