ReportViewer控件 - 高度问题

时间：2009-04-22 19:04:47

标签： asp.net reporting-services reportviewer

在我的asp.net应用程序中，我正在尝试打开一个特定的报告。我有ReportViewer Control设置，宽度为100％，高度为100％。现在我希望这意味着报告将占据整个页面。令我惊讶的是，事实并非如此。在IE7中，它占据了页面的整个宽度，它只占用了一小部分高度。在Firefox中，宽度和高度都搞砸了。我让浏览器打开了一个占据几乎所有屏幕的新页面。有什么想法吗？

谢谢！

14 个答案:

答案 0 :(得分：66)

这是我修复的方式，看看

<div style="Width:auto;"> 
<form id="form1" runat="server" style="width:100%; height:100%;">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <rsweb:ReportViewer ID="rptViewer" runat="server" Width="100%" Height="100%" AsyncRendering="False" SizeToReportContent="True">
    </rsweb:ReportViewer>
</form></div>

做魔术的事情是 AsyncRendering =“False”SizeToReportContent =“True”其余的是基本的HTML。报告将按照设计显示。

可能会有一些额外的代码，但看看它是否适合你。

希望有所帮助

答案 1 :(得分：11)

这是我修复它的方式，使用javascript动态设置高度，它适用于IE和Firefox。也适用于大于最大窗口大小的报告。

<rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="100%" ShowBackButton="True" ProcessingMode="Remote" />

<script language="javascript" type="text/javascript">
    ResizeReport();

    function ResizeReport() {
        var viewer = document.getElementById("<%= ReportViewer1.ClientID %>");
        var htmlheight = document.documentElement.clientHeight;
        viewer.style.height = (htmlheight - 30) + "px";
    }

    window.onresize = function resize() { ResizeReport(); }
</script>

答案 2 :(得分：9)

我在使用ReportViewer 11.0时遇到了同样的问题，我的诀窍是设置

Height="100%" 
SizeToReportContent="true"

while keeping 

AsyncRendering="true"

例如

<rsweb:ReportViewer ID="reportControl" runat="server" Width="750" Height="100%" AsyncRendering="true" SizeToReportContent="true">

这实际上为控件生成了一个高度为“100％”的表。

答案 3 :(得分：8)

为它提供一个足以满足报告整个高度的静态高度。据我所知，100％将无法正常工作，因为ReportViewer控件基本上由一个大的div标记包装。

答案 4 :(得分：4)

我知道这是一个老问题，但我最近仍然在努力解决这个问题。看起来以下适用于所有现代浏览器（仅测试IE8 / 9，Firefox和Chrome）。我的踢球者是doctype和html元素高度。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html, body, form { width: 100%; height: 100%; margin: 0; padding: 0 }
    </style>
</head>
<body>
  <form runat="server">
    <asp:scriptmanager runat="server" />
    <rsweb:ReportViewer ID="ReportViewerControl" Width="100%" Height="100%" runat="server" />
  </form>
</body>
</html>

答案 5 :(得分：3)

这是XHTML 1.1标准的问题。将您的页面doctype更改为transitional以获得100％的高度工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

或者，如果您仍然挣扎，请将其彻底删除。

答案 6 :(得分：3)

丹，这就是我们最后用一点jQuery魔法做的事情。

所有报告都使用相同的Report.Master作为母版页：

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Report.master.vb" Inherits=".Report" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
     <style type="text/css">
        html, body
        {
            margin: 0;
            padding: 0;            
            border: none;
            background-color: #FFFFFF;     
            overflow: hidden;       
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            setWindowSize();
        });

        $(window).resize(function () {
            setWindowSize();
        });

        function setWindowSize() {
            // http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
            var myWidth = 0, myHeight = 0;
            if (typeof (window.innerWidth) == 'number') {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
            } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
            } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }

            var r = $('div[id*="_report_"]:first');
            r.width(myWidth);
            r.height(myHeight - 32);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">    
        <asp:ScriptManager ID="rptScriptManager1" runat="server" />
        <asp:ContentPlaceHolder ID="report" runat="server"/>                
    </form>
</body>
</html>

然后，每个报告页面都包含ReportViewer及其属性。

<%@ Page Title="This Cool Report" MasterPageFile="~/masterpages/Report.Master" Language="vb" AutoEventWireup="false" CodeBehind="viewmycoolreport.aspx.vb" Inherits=".viewmycoolreport" %>
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

<asp:Content ID="reportContent" ContentPlaceHolderID="report" runat="server">    
    <rsweb:ReportViewer ID="rptCoolReport" runat="server" Width="100%" ProcessingMode="Remote" SizeToReportContent="True" />
</asp:Content>

现在，当报告加载时，ReportViewer控件最终会在准备好窗口和调整窗口大小时将其自身大小调整为内容窗口的大小。 jQuery选择器使用包含“_report_”的ID抓取第一个div（因为ReportViewer控件呈现的客户端ID为 ctl_report_＆lt; report_id＆gt; ）。由于ReportViewer控件中的标题（用于分页，导出等），高度最终必须小于32像素。

答案 7 :(得分：3)

以下选项将修复ASP.NET页面中的SSRS报告加载问题。

还有一个很棒的属性叫做 ZoomMode =“PageWidth”，可以将报告修复为整页。您还可以使用 ZoomMode =“FullPage”或 ZoomMode =“Percent”。所有这些属性都将修复ASP.NET页面中的页面加载问题。

<rsweb:ReportViewer ID="ReportViewer1" runat="server" Height="100%" Width="100%" ZoomMode="Percent"></rsweb:ReportViewer>

答案 8 :(得分：2)

我最近坐下来与ReportViewer控件进行了对抗，以扩展到报告内容的高度，同时仍允许.AsyncRendering = true。这就是我所做的，它需要jQuery，并且只使用Report Viewer 2008（9.0.0.0）进行了测试。

<script type="text/javascript">

    $(function() {

        $('#<%= uxReportViewer.ClientID %> > iframe:eq(0)').bind('load', function() {
            ReportViewerResize(this);
        });

    });

    function ReportViewerResize(frame) {
        var container = $('#<%= uxReportViewer.ClientID %>');
        try {
            var reportFrame = $(frame).contents().find('html')[0].document.frames["report"].document;
            var reportHeight = $('div#oReportDiv > table > tbody > tr > td#oReportCell', reportFrame).height();
            $(container).css({ height: '' + (reportHeight + 10) + 'px' });
        } catch (e) { }
    }

</script>

答案 9 :(得分：2)

这段代码有点长，但它可以在我测试过的所有浏览器中使用和不使用异步渲染。最好的部分是非异步模式，它扩展到报告内容的大小。在异步模式下，它会扩展到页面的大小（减去顶部的偏移量）。我应该指出，这是VS2010版本的reportviewer特有的。

<script type="text/javascript">
function ResizeReport(reportId){
        var rep = document.getElementById(reportId);
        var j = 0;

        for (var i = 0; i < rep.childNodes.length; i++) {
            var child = rep.childNodes[i];
            if (child.nodeName == "DIV") {
                j++;
                if (j == 2) {
                    child.firstChild.style.overflow = "";
                    while (child.nodeName == "DIV") {
                        child = child.firstChild;
                    }
                    child.style.width = "1px";
                    rep.style.width = (child.clientWidth) + "px";
                    rep.style.height = "";
                    return;
                }
            }
        }

        if (rep.style.height != '400px') // default value //
            return;
        ResizeReportHeight(reportId);
        window.onresize = function () { ResizeReportHeight(reportId); }
    }

    // Used to resize an async-report. Hand edit as needed.
    function ResizeReportHeight(reportId, offsetFromBot) {
        var rep = document.getElementById(reportId);
        var iFrame = rep.getElementsByTagName('iframe')[0];
        var htmlHeight = document.documentElement.clientHeight;
        var offTop = 0;
        var obj = iFrame;
        while (obj) {
            offTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        var newHeight = (htmlHeight - offTop)
        if (offsetFromBot)
            newHeight -= offsetFromBot;
        if (newHeight < 1)
            newHeight = 1;
        rep.style.height = "";
        iFrame.style.height =  newHeight + "px";
    }
</script>
<script type="text/javascript">
    window.onload = function () { ResizeReport("<%= reportviewer1.ClientID %>"); }
</script>
<rsweb:reportviewer ID="reportviewer1" runat="server" ProcessingMode="Remote" Width="100%" />

答案 10 :(得分：0)

至于我所经历的，如果SizeToReportContent设置为false，则报表查看器控件默认呈现高度为400px。
如果需要动态高度，则需要将css类添加到报表查看器和以下css：

#reportViewerContainer > span
{
    display:block;
    height:100% !important;
}

.reportViewer
{
    height:100% !important;
}

“reportViewerContainer”是报表查看器的父容器（div，body等）。查看器呈现为高度为0的跨度，内部为所有内容。如果你改变这一点，一切都应该正常。

答案 11 :(得分：0)

这就是我为高度解决问题的方法......不像我希望的那样优雅但是有效。

function ResizeReport() {
    var htmlheight = document.documentElement.clientHeight - 110;
    var reportViewer = $('div[id^=VisibleReportContent<%= this.bddr_report.ClientID %>]').parent();
    reportViewer.css('height',htmlheight+'px');
}

答案 12 :(得分：0)

这是修复它的解决方案，使用javascript动态设置高度，它适用于IE和Firefox。

＆＃13;
＆＃13; 
<script type="text/javascript">
var ReportViewerForMvc = ReportViewerForMvc || (new function () {

    var _iframeId = {};

    var resizeIframe = function (msg) {
        var height = 360;//here you specify the height if you want to put in 
                        // percent specify value in string like "100%"
        var width = 1255;// follow above

        $(ReportViewerForMvc.getIframeId()).height(height);
        $(ReportViewerForMvc.getIframeId()).width(width);
    }

    var addEvent = function (element, eventName, eventHandler) {
        if (element.addEventListener) {
            element.addEventListener(eventName, eventHandler);
        } else if (element.attachEvent) {
            element.attachEvent('on' + eventName, eventHandler);
        }
    }

    this.setIframeId = function (value) {
        _iframeId = '#' + value;
    };

    this.getIframeId = function () {
        return _iframeId;
    };

    this.setAutoSize = function () {
        addEvent(window, 'message', resizeIframe);
    }

}());

ReportViewerForMvc.setAutoSize();
</script>
＆＃13;
＆＃13;
＆＃13;

  • 请勿更改＆＃34; .aspx＆＃34;
    • 的以下代码

＆＃13;
＆＃13; 
<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
  <asp:ScriptReference  Assembly="ReportViewerForMvc"          Name="ReportViewerForMvc.Scripts.PostMessage.js" />
   </Scripts>
</asp:ScriptManager>
＆＃13;
＆＃13;
＆＃13;

此处我们将使用我们自己的 resizeIframe 明确替换 ReportViewerForMvc.Scripts.PostMessage.js ，我们指定 width

答案 13 :(得分：0)

对我来说最简单的方法是将报告控件的宽度和高度属性设置为 100%，诀窍是用 div 包围控件并为该包装器提供高度设置为 100vh 的样式！

<div id="ssrsReportViewerWrapper" style="width: 100%; height: 100vh;">

        <rsweb:ReportViewer 
            ID="ssrsReportViewer" 
            runat="server" 
            Width="100%"
            Height="100%"
            EnableViewState="true"
            SizeToReportContent="false"
            ZoomMode="Percent" 
            ZoomPercent="100"
            ProcessingMode="Remote" 
            ShowExportControls="true" 
            ShowParameterPrompts="true" >

          <ServerReport ReportPath="" ReportServerUrl=""  />

        </rsweb:ReportViewer>

    </div>
相关问题
最新问题