在我的 asp.net 应用程序中，我试图打开一个特定的报告。我将 ReportViewer 控件设置为宽度为 100%，高度为 100%。现在我希望这意味着该报告将占据整个页面。令我惊讶的是，事实并非如此。在 IE7 中，虽然它占据了页面的整个宽度，但它只占据了高度的一小部分。在 Firefox 中，宽度和高度都搞砸了。我让浏览器打开一个几乎占据整个屏幕的新页面。有什么想法吗？
谢谢！
【问题讨论】：
标签： asp.net reporting-services reportviewer
这是我固定的方式，看看
<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。报告将按照设计的方式显示。
可能有一些额外的代码，但看看它是否适合你。
希望对你有帮助
【讨论】：
这是我修复它的方式，使用 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>
【讨论】：
我在使用 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">
这实际上为控件生成了一个 height="100%" 的表格。
【讨论】：
给它一个足以容纳整个报表高度的静态高度。据我所知，100% 不会起作用，因为 ReportViewer 控件本质上是由一个大的 div 标记包裹的。
【讨论】：
我知道这是一个老问题，但我最近仍在为这个问题苦苦挣扎。似乎以下内容在所有现代浏览器中运行良好（仅测试过 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>
【讨论】：
这是 XHTML 1.1 标准的问题。将您的页面文档类型更改为过渡，以获得 100% 的高度工作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
或者如果你还在挣扎，那就彻底移除它。
【讨论】：
Dan，这就是我们最终用一点 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 选择器抓取 ID 包含“_report_”的第一个 div（因为 ReportViewer 控件呈现客户端 ID 为 ctl_report_
【讨论】：
以下选项将解决您在 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>
【讨论】：
我最近坐下来与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>
【讨论】：
这段代码有点长，但它可以在我测试过的所有浏览器中使用和不使用异步渲染。最好的部分是在非异步模式下，它扩展到报告内容的大小。在异步模式下，它扩展到页面的大小（减去从顶部的偏移量）。我应该指出，这是特定于 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%" />
【讨论】：
根据我的经验，如果 SizeToReportContent 设置为 false，则报表查看器控件默认呈现高度为 400px。
如果你想要一个动态的高度，你需要在报表查看器中添加一个 css 类和以下 css：
#reportViewerContainer > span
{
display:block;
height:100% !important;
}
.reportViewer
{
height:100% !important;
}
“reportViewerContainer”是报表查看器的父容器（div、body 等）。查看器呈现为高度为 0 的跨度，内部是所有内容。如果你改变它，一切都应该正常。
【讨论】：
这就是我解决身高问题的方法......没有我希望的那么优雅，但它有效。
function ResizeReport() {
var htmlheight = document.documentElement.clientHeight - 110;
var reportViewer = $('div[id^=VisibleReportContent<%= this.bddr_report.ClientID %>]').parent();
reportViewer.css('height',htmlheight+'px');
}
【讨论】：
这是修复它的解决方案，使用javascript动态设置高度，它适用于IE和Firefox。
<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><asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="ReportViewerForMvc" Name="ReportViewerForMvc.Scripts.PostMessage.js" />
</Scripts>
</asp:ScriptManager>在这里，我们将 ReportViewerForMvc.Scripts.PostMessage.js 显式替换为我们自己的 resizeIframe 在其中我们指定 width
【讨论】：
对我来说最简单的方法是将报表控件的宽度和高度属性设置为 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>
【讨论】：
这是解决此问题的另一种方法，仅使用 CSS 并在需要时在 ReportViewer 控件上方留出额外空间：
在aspx文档中，我做了：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Your page title</title>
<style type="text/css">
[id^=reportViewer1][role=document] {
height: calc(100vh - 50px) !important;
}
</style>
</head>
<body style="height: 100vh; margin: 0;">
这里的魔力是强制计算控件的文档部分的高度。如果您在原始控件之上没有任何东西，则应该使用 50px。 将 body 设置为 100vh（查看者高度的 100%）也有助于确保它适合整个浏览器的文档区域而不显示滚动条。
在 ReportViewer 控件上我做了如下操作：
<rsweb:ReportViewer ID="reportViewer1" runat="server" Width="100%" Height="100%"
Font-Names="Verdana" Font-Size="8pt" AsyncRendering="True" SizeToReportContent="False">
</rsweb:ReportViewer>
请务必注意，CSS calc 可能不适用于旧版浏览器。在这里，它在当前的 Chrome 和 Edge 浏览器上表现良好。
【讨论】：