Элемент управления ReportViewer - проблема с высотой - PullRequest
30 голосов
/ 22 апреля 2009

В моем приложении asp.net я пытаюсь открыть определенный отчет. У меня есть элемент управления ReportViewer с шириной 100% и высотой 100%. Теперь я ожидаю, что это будет означать, что отчет займет всю страницу. Ну, к моему удивлению, это не так. В IE7, хотя он занимает всю ширину страницы, он занимает лишь небольшую часть высоты. В Firefox и ширина, и высота перепутаны. У меня есть браузер, открывающий новую страницу, которая занимает почти весь экран. Есть идеи?

Спасибо!

Ответы [ 13 ]

66 голосов
/ 09 июля 2010

Это то, как я исправил, посмотрите

<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 Отчет будет отображаться так, как он был спроектирован.

Там может быть какой-то дополнительный код, но посмотрите, работает ли он для вас.

Надеюсь, это поможет

11 голосов
/ 21 января 2011

это то, как я это исправил, динамически устанавливая высоту с помощью 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>
9 голосов
/ 13 сентября 2013

У меня была такая же проблема с 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%" для элемента управления.

8 голосов
/ 22 апреля 2009

Задайте статическую высоту, достаточную для всей высоты отчета. Насколько я знаю, 100% не будет работать, потому что элемент управления ReportViewer по существу обернут одним большим тегом div.

4 голосов
/ 18 марта 2012

Я знаю, что это старый вопрос, но я все еще боролся с этим недавно. Похоже, что следующее работает хорошо во всех современных браузерах (только проверенные IE8 / 9, Firefox и Chrome). Для меня кикерами были высота документа и высота элемента 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>
3 голосов
/ 23 июля 2014

Следующие параметры позволят решить проблему загрузки отчетов SSRS на странице ASP.NET.

И есть фантастическое свойство, называемое ZoomMode = "PageWidth" , которое фиксирует ваш отчет на всю страницу. Вы также можете использовать ZoomMode = "FullPage" или ZoomMode = "Percent" . Все эти свойства решат проблему с загрузкой вашей страницы на странице ASP.NET.

<rsweb:ReportViewer ID="ReportViewer1" runat="server" Height="100%" Width="100%" ZoomMode="Percent"></rsweb:ReportViewer>
3 голосов
/ 19 марта 2012

Дэн, вот что мы закончили с небольшой магией 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 получает первый div с идентификатором, который содержит «_report_» (поскольку элемент управления ReportViewer визуализируется с идентификатором клиента ctl_report_ ). Высота в итоге должна быть меньше 32 пикселей из-за заголовка в элементе управления ReportViewer (для подкачки, экспорта и т. Д.).

3 голосов
/ 22 апреля 2009

Это проблема со стандартом XHTML 1.1. Измените тип страницы на переходный, чтобы получить 100% работоспособность по высоте:

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

Или, если вы все еще боретесь, удалите его полностью.

2 голосов
/ 04 октября 2012

Этот код немного длиннее, но он работает во всех браузерах, которые я тестировал с и без асинхронного рендеринга. Лучшая часть находится в не асинхронном режиме, она расширяется до размера содержимого отчета. В асинхронном режиме он увеличивается до размера страницы (за вычетом смещения сверху). Я должен отметить, что это характерно для 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%" />
2 голосов
/ 28 февраля 2011

Недавно я сел и боролся с элементом управления 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>
...