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

Question

我有一些简单的报告SSRS 2008 R2，但它们根本不会在 Safari 或 Chrome 中显示。根据 Microsoft 的联机丛书，这些浏览器的支持方式有限。但是，在数据“加载”时钟完成后，我什么也看不到。页面顶部的参数栏和面包屑导航部分都在那里。此外，我可以在 Safari 和 Chrome 上保存/导出为任何格式。它只是不会显示报告部分本身，它只是空白。

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

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

该报告在 Internet Explorer 8（当然）和 Firefox 4.0 上成功呈现。

如果有人能对此有所了解，我将不胜感激。

score 94 · Accepted Answer

终极解决方案（也适用于 SSRS 2012！）

将以下脚本附加到“ C:\Program Files\Microsoft SQL Server\MSRS10_50.MSSQLSERVER\Reporting Services\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 found ctl32_ctl09）。

如果此解决方案不起作用，请在浏览器中查看 HTML 以查看脚本是否正常工作，将overflow:auto属性更改为overflow:visible。

ReportViewer控件解决方案

将此样式行插入.aspx页面（或链接.css文件，如果可用）：

#reportViewer_ctl09 {
  overflow:visible !important;
}

原因

Chrome 和 Safari 以不同的方式呈现溢出：自动相对于 Internet Explorer。

SSRS HTML 是 QuirksMode HTML 并且依赖于 IE 5.5 错误。非 IE 浏览器没有 IE quirksmode，因此可以正确呈现 HTML

SSRS 2008 R2 报表生成的 HTML 页面包含一个具有overflow:auto样式的div，它将报表变成一个不可见的报表。

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

手动更改（使用 Chrome 的调试窗口）最终 HTML溢出：溢出中的自动：可见我可以在 Chrome 上看到报告。

我喜欢蒂姆的解决方案；它既简单又有效。

但是还有一个问题：任何时候用户更改参数（我的报告使用参数！）AJAX 刷新 div，overflow:auto标记被重写，并且没有脚本更改它。此技术说明详细说明了问题所在。

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

Mr.einarq 在这里向我建议了解决方案。

另一种选择是将您的函数重命名为 pageLoad。

如果页面上存在具有此名称的任何函数，ASP.NET Ajax 将自动调用它，每次部分更新后也是如此。如果这样做，您还可以从 body 标记中删除 onload 属性

所以我编写了解决方案中显示的改进脚本。

score 43 · Accepted Answer

基于 CSS 的解决方案

我能够将以下内容添加到 Reporting Services 的样式表中，并在 Chrome 中为我修复了它。

免责声明：这没有针对跨浏览器兼容性进行彻底测试。

/******************铬错误修复**********************/
div#ctl31_ctl09,
div#ctl31_ctl10
{
    溢出：可见！重要；
}
/************************************************/

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

对我来说，该文件位于：

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

score 18 · Accepted Answer

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

问题

在此处输入图像描述

解决方案

由于在 id 为“ctl31_ctl10”的 div 元素的样式属性中指定了“overflow: auto”，因此我们无法在样式表文件中覆盖它，所以我求助于 JavaScript。我将以下代码附加到“C:\Program Files\Microsoft SQL Server\MSRS10_50.MSSQLSERVER\Reporting Services\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);
}

笔记

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

score 7 · Accepted Answer

基于 CSS 的全系统解决方案

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

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

首先，导航到安装报告服务的目录，在我的例子中（SQL Server 2012 SP1）是：

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

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

请参阅自定义 HTML 查看器和报告管理器的样式表。

在该文件中插入一个 XML 行，例如（来自上述文档）：

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

保存那个。

他们在上面的链接中没有告诉你的是这个条目完全覆盖了默认样式表。我第一次尝试通过添加 div 样式表来渲染报告，但其他一切都被破坏了。一旦我发现对 reporserver.config 文件的编辑没有增加，而是实际上替换了默认样式表，我复制了默认样式表，一切都开始工作了。

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

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

编辑 SafariChromeFix.css 并将以下行添加到顶部：

div {
    overflow: visible !important;
}

保存。

保存后，此 Reporting Services 实例上的所有现有报表都将呈现在所有浏览器上，包括 Chrome 和 Safari。

请注意：

报告服务的更新不仅可能而且极有可能会覆盖reportserver.config，因此您可能必须<HTMLViewerStyleSheet>SafariChrome</HTMLViewerStyleSheet>随着时间的推移将标签添加到其中。

这也为我们提供了一个进入默认样式表并从已经工作的东西开始进行许多其他自定义更改的地方。由于它不是默认样式表，因此您的新自定义 CSS 文件不会在升级和修补期间被覆盖。

score 4 · Accepted Answer

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

报告服务\ReportManager\Pages\ Report.aspx

该脚本以可见报表内容的父¹为目标，并在每次报表加载时设置² - 包括通过多页报表进行分页。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_ctl10ctl32_ctl09

Sys.Application.add_load()}

score 4 · Accepted Answer

在我的情况下，有问题的 DIV 是“ctl31_ctl09”，所以如果上述解决方案对您不起作用，请尝试更改var element = document.getElementById("ctl31_ctl10");为var element = document.getElementById("ctl31_ctl09");

score 2 · Accepted Answer

对我来说，这个名字是“ ctl32_ctl09 ”（来自SQL Server 2012 SP1 的 SSRS，MSRS11）。

score 2 · Accepted Answer

Reporting Services 的 SQL Server 2014 版本增加了对 Google Chrome 浏览器的支持，但尚不支持 iOS。在此处查看详细信息。

score 2 · Accepted Answer

我不得不进入 ChromeF12并注意到我的 div 中有ctl32 _ctl09，而不是 ctl31_ctl09。

这适用于带有SQL Server 2012的 Windows Server 2008 R2 64Bit 。附加脚本，然后重新启动 SSRS 并清除浏览器缓存。

//修复允许Chrome显示SSRS报告

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

score 2 · Accepted Answer

不幸的是，主要答案打破了 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";
    }
}

score 1 · Accepted Answer

对于Windows Server 2008 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
    }
}

上述所有建议的版本根本不起作用。

score 1 · Accepted Answer

Chrome 22.0.1229.79 中仍然存在该问题。

YMMV，但我发现从 ReportViewer 标记中删除高度可以解决此问题。

我对 SSAS 报告有这个问题，但不是 SSRS 报告。直到我检查了页面中的差异（一位顾问完成了 SSAS 报告），我才弄清楚为什么。他将 ReportViewer Height=60% 设置为 SSRS 报告未指定高度。

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

score 1 · Accepted Answer

为了避免对元素 ID 进行硬编码，我在 RS 服务器 @ [Drive]:\Program Files\Microsoft SQL Server\[Reporting Services Instance]\Reporting Services\ReportManager\js\ReportingServices.js上编辑了 ReportingServices.js 文件包含一些代码来获取 jQuery，将其加载到页面中，然后找到溢出设置为 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 实例上使用 Chrome 27 和 IE 10 完成了测试，效果很好。

score 1 · Accepted Answer

我从来没有在 Chrome 中显示报告的运气。大多数 Microsoft 的文档甚至都没有列出它，所以我认为 Chrome 必须在解释 ASP 中的某些内容时遇到问题。

请参阅Reporting Services 和 Power View 的浏览器支持。

我正在运行 Chrome 11 并遇到与您相同的行为。

score 1 · Accepted Answer

修复的一个问题overflow:visible是浮动标题在所有浏览器中都被破坏了。以下脚本将单独保留 Internet Explorer，并将修复仅应用于非 Internet Explorer 浏览器。这样，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;
}

score 1 · Accepted Answer

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

我没有在上将高度设置为 100% ReportViewer，而是使用了固定高度，它成功地在我的 Internet Explorer 和 Chrome 应用程序中工作。

score 1 · Accepted Answer

我在 Chrome 上查看报告时遇到了同样的问题。我通过将扩展“SSRS Report Fix”添加到 Google Chrome 来修复它。 https://chrome.google.com/webstore/detail/ssrs-report-fix/fjbdfjiheheafbioiejbdpalmojkeobk

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

17 回答 17

终极解决方案（也适用于 SSRS 2012！）

ReportViewer控件解决方案

原因

基于 CSS 的解决方案

基于 CSS 的全系统解决方案

Related

Reference