在我的 asp.net 应用程序中，我试图打开一个特定的报告。我将 ReportViewer 控件设置为宽度为 100%，高度为 100%。现在我希望这意味着该报告将占据整个页面。令我惊讶的是，事实并非如此。在 IE7 中，虽然它占据了页面的整个宽度，但它只占据了高度的一小部分。在 Firefox 中，宽度和高度都搞砸了。我让浏览器打开一个几乎占据整个屏幕的新页面。有任何想法吗？
谢谢！
问问题
82949 次
15 回答
72
这是我固定的方式，看看
<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。报告将按照设计的方式显示。
可能有一些额外的代码，但看看它是否适合你。
希望能帮助到你
于 2010-07-09T03:26:31.350 回答
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>
于 2011-01-21T14:24:20.013 回答
11
I had the same problem with ReportViewer 11.0 and what did the trick for me was to set
Height="100%"
SizeToReportContent="true"
while keeping
AsyncRendering="true"
Eg
<rsweb:ReportViewer ID="reportControl" runat="server" Width="750" Height="100%" AsyncRendering="true" SizeToReportContent="true">
This actually generated a table with height="100%" for the control.
于 2013-09-13T15:47:08.483 回答
8
给它一个足以满足整个报告高度的静态高度。据我所知，100% 不会起作用，因为 ReportViewer 控件本质上是由一个大div标签包裹的。
于 2009-04-22T19:10:42.400 回答
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>
于 2012-03-18T18:54:12.943 回答
3
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 选择器使用包含“_report_”的 ID 获取第一个 div（因为 ReportViewer 控件使用ctl_report_<report_id>的客户端 ID 呈现）。由于 ReportViewer 控件中的标题（用于分页、导出等），高度最终必须小于 32 像素。
于 2012-03-19T18:05:43.280 回答
3
这是 XHTML 1.1 标准的问题。将您的页面文档类型更改为过渡，以获得 100% 的高度工作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
或者，如果您仍然挣扎，请将其完全移除。
于 2009-04-22T19:09:44.307 回答
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>
于 2014-07-23T09:53:43.940 回答
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%" />
于 2012-10-04T17:29:07.267 回答
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>
于 2011-02-28T04:38:37.390 回答
0
这就是我解决身高问题的方法......没有我希望的那么优雅，但它有效。
function ResizeReport() {
var htmlheight = document.documentElement.clientHeight - 110;
var reportViewer = $('div[id^=VisibleReportContent<%= this.bddr_report.ClientID %>]').parent();
reportViewer.css('height',htmlheight+'px');
}
于 2013-11-22T19:13:05.467 回答
0
至于我所经历的，如果 SizeToReportContent 设置为 false，则报表查看器控件默认以 400px 的高度呈现。
如果你想要一个动态的高度，你需要在报表查看器中添加一个 css 类和以下 css：
#reportViewerContainer > span
{
display:block;
height:100% !important;
}
.reportViewer
{
height:100% !important;
}
“reportViewerContainer”是报表查看器的父容器（div、body 等）。查看器呈现为高度为 0 的跨度，内部是所有内容。如果你改变它，一切都应该正常。
于 2013-11-20T12:15:37.030 回答
0
这是修复它的解决方案，使用 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>- 请不要更改“.aspx”的以下代码
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="ReportViewerForMvc" Name="ReportViewerForMvc.Scripts.PostMessage.js" />
</Scripts>
</asp:ScriptManager>在这里，我们将ReportViewerForMvc.Scripts.PostMessage.js显式替换为我们自己的resizeIframe，我们在其中指定宽度
于 2015-07-16T15:35:24.797 回答
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>
于 2021-02-05T02:13:14.230 回答
0
这是解决此问题的另一种方法，仅使用 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。将主体设置为 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 浏览器上表现良好。
于 2021-12-23T17:47:12.943 回答