SSRS 2008 R2-SSRS 2012-ReportViewer: 在 Safari/Chrome 中报告，但在 Firefox/Internet Explorer 8中运行良好... ... 为什么？

我有一些简单的报告在 SSRS 2008 R2，但他们不会显示在所有的 Safari 或 Chrome。根据微软的在线图书，这些浏览器的支持是有限的。然而，在数据“加载”时钟完成之后，我看不到任何东西。页面顶部的参数 bar 和面包屑导航部分都在。此外，我可以保存/导出到 Safari 和 Chrome 上的任何格式。它只是不会显示报告部分本身，而报告部分是空白的。

我是否应该使用证书和安全连接(目前没有使用 HTTPS 设置，只有 HTTP) ？是否有需要调整的服务器端配置？是否有人在 Safari/Chrome 浏览器上使用之前的 SSRS 版本(2005)成功地显示了 任何报告？

我使用的是 Safari 5.0.4和 Chrome 10.0.648.151。我知道这两个浏览器的相似之处在于它们都是基于 WebKit的。

该报告在 Internet Explorer 8(当然)和火狐4.0上成功渲染。

如果有人能解释一下，我会很感激的。

93207 次浏览
小开

我从来没有在 Chrome 中显示过报告。大多数微软的文档甚至没有列出它，所以我认为 Chrome 肯定在解释 ASP 中的某些东西时遇到了麻烦。

参见 浏览器对 ReportingServices 和 Power View 的支持。

我正在运行 Chrome11，并且和你经历了同样的行为。

小开

这是 已知问题。问题是 div 标签的样式“ overflow: auto”显然没有很好地在 Safari 和 Chrome 使用的 WebKit 中实现(参见 Emanuele Greco 的 回答)。我不知道如何利用 Emanuele 的建议来使用 RS: ReportViewerHost 元素，但是我使用 JavaScript 解决了这个问题。

问题

enter image description here

解决方案

由于“ overflow: auto”是在 id 为“ ctl31 _ ctl10”的 div 元素的 style 属性中指定的，因此我们不能在样式表文件中覆盖它，所以我使用了 JavaScript。我将下面的代码附加到“ c: Program Files Microsoft SQL Server MSrs10 _ 50。MSSQLSERVER ReportServices ReportManager js ReportingServices.js”

function FixSafari()
{
var element = document.getElementById("ctl31_ctl10");
if (element)
{
element.style.overflow = "visible";  //default overflow value
}
}


// Code from https://stackoverflow.com/questions/9434/how-do-i-add-an-additional-window-onload-event-in-javascript
if (window.addEventListener) // W3C standard
{
window.addEventListener('load', FixSafari, false); // NB **not** 'onload'
}
else if (window.attachEvent) // Microsoft
{
window.attachEvent('onload', FixSafari);
}

注意

似乎有一个 2005年 SSRS 解决方案，我没有尝试，但我不认为它是适用于 SSRS 2008，因为我找不到“ DocMapAndReportFrame”类。

小开

终极解决方案(也可以在 SSRS 2012中使用!)

将以下脚本附加到“ C: 程序文件 Microsoft SQL Server MSRS10 _ 50. MSSQlSERVER ReportServices ReportManager js ReportingServices.js”(在 SSRS 服务器上) :

function pageLoad() {
var element = document.getElementById("ctl31_ctl10");
if (element)
{
element.style.overflow = "visible";
}
}

实际上，我不知道 div 的名字是否总是 ctl31_ctl10: 在我的例子中是这样的(相反，通过 SQL Server 2012 azzlak 找到了 ctl32_ctl09)。

如果这个解决方案不起作用，从浏览器中查看 HTML，看看脚本是否正确地将 溢出: 自动属性更改为 溢出: 可见。

ReportViewer 控件的解决方案

将此样式行插入到 .aspx页面(如果可用，则插入到链接的 .css文件中) :

#reportViewer_ctl09 {
overflow:visible !important;
}

原因

Chrome 和 Safari 以不同的方式呈现 Internet Explorer。

SSRS HTML 是 QuirksMode HTML，依赖于 IE 5.5 bug 浏览器没有 IE 怪模式，因此呈现 HTML 正确

由 SSRS 2008 R2报表生成的 HTML 页面包含一个 Div，该 Div具有 溢出: 自动样式，它将报表转换为一个不可见的报表。

<div id="ctl31_ctl10" style="height:100%;width:100%;overflow:auto;position:relative;">
...</div>

在 溢出: 可见中手动更改(使用 Chrome 的调试窗口)最终的 HTML 溢出: 自动我可以看到关于 Chrome 的报告。

我喜欢 Tim 的解决方案，它简单易用。

但是仍然存在一个问题: 任何时候用户改变参数(我的报告使用参数!)AJAX 刷新 div，重写 溢出: 自动标记，没有脚本更改它。 这个 Techte 细节 解释了问题所在。

这是因为在使用 AJAX 面板构建的页面中，只有 AJAX 面板更改其状态，而不刷新整个页面。因此，应用于标记的 OnLoad 事件只触发一次: 第一次加载页面时。之后，更改任何 AJAX 面板都不会再触发这些事件。

Einarq 先生给我提供了解决方案 给你。

另一个选项是将函数重命名为 pageLoad。

如果该名称的任何函数存在于页面上，同样在每次部分更新之后，ASP.NET Ajax 都会自动调用该名称的函数。如果这样做，还可以从 body 标记中删除 onload 属性

因此，我编写了解决方案中显示的改进脚本。

小开

在我的情况下，违规的 DIV 是 “ ctl31 _ ctl09”，所以如果上述解决方案不工作，您可以尝试将 var element = document.getElementById("ctl31_ctl10");改为 var element = document.getElementById("ctl31_ctl09");

小开

这个问题在 Chrome 22.0.1229.79中仍然存在。

YMMV ，但是我发现从 ReportViewer 标记中删除 height 修复了这个问题。

我对战略科学军团的报告有疑问但战略科学军团的报告没有。直到我检查了页面中的差异(一位顾问已经完成了 SSAS 报告) ，我才弄清楚原因。他正在设置 ReportViewerHeight = 60% ，而 SSRS 报告没有指定高度。

一旦我删除了 Height，我的报告就会显示出来。

小开

对于 WindowsServer2008 R2 x64上的 SSRS 2012，一个工作脚本是:

function pageLoad()
{
var element = document.getElementById("ctl31_ctl09");
if (element)
{
element.style.overflow = "visible";
}


if (window.addEventListener) // W3C standard
{
window.addEventListener('load', FixSafari, false); // NB **not** 'onload'
}
else
if (window.attachEvent) // Microsoft
{
window.attachEvent('onload', FixSafari);
}
}


function FixSafari()
{
var element = document.getElementById("ctl31_ctl09");
if (element)
{
element.style.overflow = "visible";  // Default overflow value
}
}

以上所有建议的版本都不起作用。

小开

我的名字是“ Ctl32 _ ctl09”(来自 SQLServer2012 SP1，MSRS11的 SSRS)。

小开

为了避免硬编码元素 ID，我编辑了 RS 服务器@[驱动器] : 程序文件 Microsoft SQL Server [ Reportingservices 实例] ReportServices ReportManager js ReportingServices.js上的 ReportingServices.js 文件，以包含一些代码来获取 jQuery，将其加载到页面中，然后找到所有将 overflow 设置为 auto 的元素。

在 ReportingServices.js 文件的顶部插入以下代码

var loadjQuery = function (cb) {
if (typeof (jQuery) == 'undefined') {
var scr = document.createElement('script');
scr.setAttribute('type', 'text/javascript');
scr.setAttribute('src', 'http://code.jquery.com/jquery-latest.js');


if (scr.readyState) {
scr.onreadystatechange = function () {
if (scr.readyState === 'complete' || scr.readyState === 'loaded') {
scr.onreadystatechange = null;
if (typeof (cb) === 'function') {
args = [].slice.call(arguments, 1);
cb.apply(this, args);
}
}
};
}
else {
scr.onload = function () {
if (typeof (cb) === 'function') {
args = [].slice.call(arguments, 1);
cb.apply(this, args);
}
};
}


var head = document.getElementsByTagName('head')[0];
head.insertBefore(scr, head.firstChild);
}
}

之后的下一行是 JS 文件中的原始内容。

然后，添加以下代码

var _rmFixReady = false;
function pageLoad() {
loadjQuery(function () {
_rmFixReady = true;
});
if (_rmFixReady) {
var overflowElements = $('div').filter(function () { return $(this).css('overflow') == 'auto'; });
overflowElements.each(function () {
$(this).css('overflow', 'visible');
});
}
}

我刚刚在一个 RM2012实例上用 Chrome27和 IE10完成了测试，效果非常好。

小开

基于 CSS 的解决方案

我能够将以下内容添加到 ReportingServices 的样式表中，并且它在 Chrome 中为我修复了这个问题。

免责声明: 这不是彻底测试跨浏览器兼容性。

/**************CHROME BUG FIX*****************/
div#ctl31_ctl09,
div#ctl31_ctl10
{
overflow: visible !important;
}
/*********************************************/

将它添加到 ReportingServices.css文件的开头。

对我来说，这个文件位于:

C:\Program Files\Microsoft SQL Server\MSRS10_50.MSSQLSERVER\Reporting Services\ReportManager\Styles\ReportingServices.css

小开

我不得不使用 F12进入 Chrome，注意到我的 div 中有 Ctl32 _ ctl09，而不是 ctl31 _ ctl09。

这是为 WindowsServer2008 R264位与 SQLServer2012。追加脚本，然后重新启动 SSRS 和清除浏览器缓存。

//修正了允许 Chrome 显示 SSRS 报告的问题

    function pageLoad() {
var element = document.getElementById("**ctl32**_ctl09");
if (element)
{
element.style.overflow = "visible";
}
}
小开

基于 CSS 的全系统解决方案

这不需要任何 JavaScript 或 Ajax 框架或任何其他包装器。它在 Internet Explorer、火狐、 Safari 和 Chrome 上进行了测试。

这可以在报表服务器的样式表级别上修复。

首先，导航到安装报表服务的目录，在我的示例中(SQLServer2012 SP1)是:

C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportServer

在该目录中，您将找到一个名为 reportserver.config 的文件。

参见 为 HTML 查看器和报表管理器自定义样式表。

在该文件中插入一行 XML 代码，如(来自上述文档) :

<Configuration>
...
<HTMLViewerStyleSheet>SafariChromeFix</HTMLViewerStyleSheet>
...
</Configuration>

省省吧。

不要在上面的链接中告诉您，这个条目完全覆盖了默认样式表。我第一次尝试通过添加一个 div 样式表来使报表呈现工作，但其他所有尝试都失败了。一旦我发现对 reperver.config 文件的这个编辑没有增加，而是实际替换了默认的样式表，我就复制了默认的样式表，一切就开始工作了。

接下来，下降到 Styles 目录(C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportServer\Styles)。

复制名为 SP _ Full 的文件。并将副本命名为 SafariChromeFix.css。此时，SafariChromeFix.css 应该与 SP _ Full 相同。CSS.

编辑 SafariChromeFix.css 并在顶部添加以下代码行:

div {
overflow: visible !important;
}

省省吧。

一旦保存完成，这个 ReportingServices 实例的所有现有报告将在所有浏览器上呈现，包括 Chrome 和 Safari。

请注意:

这不仅是可能的，而且极有可能 reportserver.config 将被报表服务的更新覆盖，因此随着时间的推移，您可能不得不在其中添加 <HTMLViewerStyleSheet>SafariChrome</HTMLViewerStyleSheet>标记。

这也为我们提供了一个突破到默认样式表的位置，并从已经工作的内容开始进行许多其他自定义更改。由于它不是默认样式表，所以在升级和补丁过程中不会覆盖新的自定义 CSS 文件。

小开

overflow:visible修复程序的一个问题是，所有浏览器的浮动头都被破坏了。下面的脚本将不会对 Internet Explorer 进行修复，而只会对非 IE 浏览器进行修复。这样，所有的功能都保留给 Internet Explorer 用户，其他浏览器仍然可以查看这些报告。

function pageLoad() {
var eval = getInternetExplorerVersion();
if (eval == -1)
{
var element = document.getElementById("ctl31_ctl09");
if (element)
{
element.style.overflow = "visible";
}
}
}


function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
小开

我尝试了这些方法，它对我很有效，但是我们的系统管理员对这些变化持怀疑态度。

我没有在 ReportViewer上设置100% 的高度，而是使用了固定的高度，这样就可以在我的 Internet Explorer 和 Chrome 应用中使用。

小开

ReportingServices 的 SQLServer2014版本增加了对 GoogleChrome 浏览器的支持，但是还没有对 iOS 的支持。详见 给你。

小开

我的解决方案是将以下 <script>添加到:

ReportServices ReportManager 页面

该脚本以 可见报告内容 Parent1为目标，并在每次报表加载 2时设置 style.overflow:visible-包括对多页报表进行分页。

if (window.addEventListener && document.querySelector) window.addEventListener("load", function () {


// drop out if Sys.Application.add_load is undefined
if (!window.Sys || !Sys.Application || !Sys.Application.add_load) return;


// register a function for when report data is loaded
Sys.Application.add_load(function () {


// get the report content control
var n = document.querySelector("[id^=VisibleReportContent]");


if (n) {


// get the report content control's parent
n = n.parentNode;


if (n) {


// revert overflow:hidden to "visible"
n.style.overflow = "visible";


}
}


});
});

这意味着我们不需要针对具有变化趋势的 id，例如: ctl31_ctl09，ctl31_ctl10，ctl32_ctl09等。
参见 Sys.Application.add_load()

小开

不幸的是，主要答案打破了 Internet Explorer 报告中的浮动(位置绝对)列。因此，我稍微修改了一下它，虽然我并不喜欢它，因为它是专门为 WebKit 设计的，但是它确实起作用了:

//SSRS 2012 Chrome fix
function pageLoad() {
var element = document.getElementById("ctl32_ctl09");
var isWebKit = !!window.webkitURL;    // Chrome or safari really (WebKit browsers).
// We don't want to do this fix in Internet Explorer, because it breaks floating columns
if (element && isWebKit)
{
element.style.overflow = "visible";
}
}

小开

我在浏览 Chrome 上的报告时也遇到了同样的问题。我通过在谷歌浏览器中添加扩展“ SSRS 报告修复”来修复它。 Https://chrome.google.com/webstore/detail/ssrs-report-fix/fjbdfjiheheafbioiejbdpalmojkeobk


提交答案