В моем приложении 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. Отчет будет отображаться так, как он был разработан.
Возможно, какой-то дополнительный код, но посмотрите, работает ли он для вас.
Надеюсь, что это поможет
так я исправил его, установив высоту динамически с помощью 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">
Это фактически создало таблицу с высотой = "100%" для элемента управления.
Это проблема с стандартом XHTML 1.1. Измените свою доктрину страницы на переходную, чтобы получить 100% -ную рабочую высоту:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
Или, если вы все еще боретесь, полностью удалите его.
Я знаю, что это старый вопрос, но я все еще боролся с этим недавно. Похоже, что все работает хорошо во всех современных браузерах (только для тестирования 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>
Дэн, вот что мы закончили с маленькой магией 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>
Этот код немного длиннее, но он работает во всех браузерах, которые я тестировал с и без async-рендеринга. Лучшая часть - в неасинхронном режиме, она расширяется до размера содержимого отчета. В асинхронном режиме он расширяется до размера страницы (минус смещение сверху). Следует отметить, что это относится к версии 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 и т.д.). Зритель отображает как span с высотой: 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>