В моем приложении asp.net я пытаюсь открыть определенный отчет. У меня установлен ReportViewer Control с шириной 100% и высотой 100%. Теперь я ожидаю, что это будет означать, что отчет займет всю страницу. К моему удивлению, это не так. В IE7, хотя он занимает всю ширину страницы, он занимает лишь небольшую часть высоты. В Firefox перепутались и ширина, и высота. У меня браузер открывает новую страницу, которая занимает почти весь экран. Любые идеи?
Спасибо!
Задайте ему статическую высоту, достаточную для всей высоты отчета. Насколько я знаю, 100% работать не будет, потому что элемент управления ReportViewer по сути заключен в один большой тег div.
Так я исправил, посмотри
<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. Отчет будет отображаться в том виде, в котором он был разработан.
Там может быть дополнительный код, но посмотрите, сработает ли он для вас.
Надеюсь, поможет
<style type="text/css"> #ctl00_MainContent_ReportViewer1_ctl09{ width:900px; overflow:auto; } </style>
- person MOD; 15.02.2015
Так я исправил, установив высоту динамически с помощью 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"
Eg
<rsweb:ReportViewer ID="reportControl" runat="server" Width="750" Height="100%" AsyncRendering="true" SizeToReportContent="true">
Это фактически сгенерировало таблицу с высотой = "100%" для элемента управления.
Я знаю, что это старый вопрос, но я все еще боролся с этим в последнее время. Похоже, следующее хорошо работает во всех современных браузерах (протестированы только 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"/>
Или, если вы все еще боретесь, удалите его полностью.
Дэн, вот что мы в итоге сделали с помощью небольшой магии 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_ ‹report_id›). Высота в конечном итоге должна быть меньше 32 пикселей из-за заголовка в элементе управления ReportViewer (для разбиения по страницам, экспорта и т. Д.).
Следующие параметры устранят проблему с загрузкой отчета 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>
Недавно я сел и боролся с элементом управления 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>
Этот код немного длиннее, но он работает во всех протестированных мной браузерах с асинхронным рендерингом и без него. Самое приятное - это неасинхронный режим, он расширяется до размера содержимого отчета. В асинхронном режиме он увеличивается до размера страницы (за вычетом смещения сверху). Я должен отметить, что это характерно для версии Reportviewer для VS2010.
<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%" />
Что касается того, что я испытал, элемент управления средства просмотра отчетов по умолчанию отображается с высотой 400 пикселей, если для SizeToReportContent установлено значение false.
Если вам нужна динамическая высота, вам нужно добавить класс 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>
