SSRS 2008 R2 – SSRS 2012 – ReportViewer: Rapports dans Safari / Chrome, mais fonctionne correctement dans Firefox / Internet Explorer 8… pourquoi?

J’ai des rapports simples dans SSRS 2008 R2 , mais ils ne s’affichent pas du tout dans Safari ou Chrome. Selon la documentation en ligne de Microsoft, ces navigateurs sont pris en charge de manière limitée. Cependant, je ne vois rien après la fin de l’horloge “Loading”. La barre de parameters et la section de navigation en haut de la page sont toutes présentes. De plus, je peux enregistrer / exporter vers n’importe quel format sur Safari et Chrome. Cela n’affiche tout simplement pas la section du rapport, qui est juste vide.

Suis-je censé utiliser des certificates et des connexions sécurisées (actuellement non configurées avec HTTPS, uniquement HTTP)? Existe-t-il des configurations côté serveur qui doivent être modifiées? Quelqu’un a-t-il réussi à afficher TOUS les rapports sur Safari / Chrome à l’aide des versions précédentes de SSRS (2005)?

J’utilise Safari 5.0.4 et Chrome 10.0.648.151 . Je connais la similitude pour ces deux navigateurs car ils sont tous deux basés sur WebKit .

Le rapport est rendu avec succès sur Internet Explorer 8 (bien sûr) et Firefox 4.0.

J’apprécierais vraiment que quelqu’un puisse nous éclairer.

    Solution ultime (fonctionne également dans SSRS 2012!)

    Ajoutez le script suivant à ” C: \ Program Files \ Microsoft SQL Server \ MSRS10_50.MSSQLSERVER \ Reporting Services \ ReportManager \ js \ ReportingServices.js ” (sur le serveur SSRS):

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

    En fait, je ne sais pas si le nom du div est toujours ctl31_ctl10 : dans mon cas, c’est (au lieu de cela, SQL Server 2012 azzlak a trouvé ctl32_ctl09 ).

    Si cette solution ne fonctionne pas, examinez le code HTML de votre navigateur pour voir si le script a fonctionné correctement en modifiant le débordement: propriété auto à déborder: visible .


    Solution pour le contrôle ReportViewer

    Insérez cette ligne de style dans la page .aspx (ou dans un fichier .css lié, si disponible):

     #reportViewer_ctl09 { overflow:visible !important; } 

    Raison

    Chrome et Safari rendent le débordement: auto de manière différente par rapport à Internet Explorer.

    SSRS HTML est QuirksMode HTML et dépend des bogues d’IE 5.5. Les navigateurs non-IE ne possèdent pas le mode quirksmode IE et rendent donc le code HTML correctement

    La page HTML produite par les rapports SSRS 2008 R2 contient un div qui a un débordement: style automatique et il transforme le rapport en un rapport invisible.

     
    ...

    Modification manuelle (à l’aide de la fenêtre de débogage de Chrome) débordement HTML final : dépassement automatique : visible, je peux voir des rapports sur Chrome.

    J’aime la solution de Tim c’est facile et fonctionnel.

    Mais il y a toujours un problème: chaque fois que l’utilisateur modifie les parameters (mes rapports utilisent des parameters!), AJAX rafraîchit le div, le débordement: la balise auto est réécrite et aucun script ne le modifie. Ce détail technique explique quel est le problème.

    Cela se produit car dans une page créée avec des panneaux AJAX, seuls les panneaux AJAX changent d’état, sans rafraîchir la page entière. Par conséquent, les événements OnLoad que vous avez appliqués sur la balise ne sont déclenchés qu’une seule fois: la première fois que votre page est chargée. Après cela, le changement des panneaux AJAX ne déclenchera plus ces événements.

    M.einarq m’a suggéré la solution ici .

    Une autre option consiste à renommer votre fonction en pageLoad.

    Toute fonction portant ce nom sera appelée automatiquement par ASP.NET Ajax si elle existe sur la page, également après chaque mise à jour partielle. Si vous faites cela, vous pouvez également supprimer l’atsortingbut onload de la balise body

    J’ai donc écrit le script amélioré qui apparaît dans la solution.

    Solution basée sur CSS

    J’ai été en mesure d’append les éléments suivants à la feuille de style de Reporting Services et cela a été corrigé pour moi dans Chrome.

    Clause de non-responsabilité: cette fonctionnalité n’est pas entièrement testée pour la compatibilité entre navigateurs.

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

    Ajoutez cela au début du fichier ReportingServices.css .

    Pour moi, ce fichier est situé à:

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

    C’est un problème connu . Le problème est qu’une balise div a le style “overflow: auto” qui n’est apparemment pas bien implémenté avec WebKit utilisé par Safari et Chrome (voir la réponse de Emanuele Greco). Je ne savais pas comment tirer parti de la suggestion d’Emanuele d’utiliser l’élément RS: ReportViewerHost, mais je l’ai résolu en utilisant JavaScript.

    Problème

    entrer la description de l'image ici

    Solution

    Comme “overflow: auto” est spécifié dans l’atsortingbut style de l’élément div avec l’ID “ctl31_ctl10”, nous ne pouvons pas le remplacer dans un fichier de feuille de style. J’ai donc eu recours à JavaScript. J’ai ajouté le code suivant à “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); } 

    Remarque

    Il semble y avoir une solution pour SSRS 2005 que je n’ai pas essayée, mais je ne pense pas qu’elle soit applicable à SSRS 2008 car je ne trouve pas la classe “DocMapAndReportFrame”.

    Solution à l’échelle du système basée sur CSS

    Cela ne nécessite aucun cadre JavaScript ou Ajax ni aucun autre wrapper. Il a été testé sur Internet Explorer, Firefox, Safari et Chrome.

    Cela peut être résolu au niveau de la feuille de style dans Report Server.

    Tout d’abord, accédez au répertoire dans lequel Reporting Services est installé, dans mon cas ( SQL Server 2012 SP1):

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

    Dans ce répertoire, vous trouverez un fichier nommé reportserver.config.

    Voir Personnaliser les feuilles de style pour la visionneuse HTML et le Gestionnaire de rapports .

    Dans ce fichier, insérez une seule ligne XML comme (à partir du document ci-dessus):

      ... SafariChromeFix ...  

    Sauf que.

    Ce qu’ils ne vous disent pas dans le lien ci-dessus est que cette entrée remplace complètement la feuille de style par défaut. Mes premières tentatives pour obtenir un rendu des rapports ont fonctionné en ajoutant une feuille de style div, tout le rest était cassé. Une fois que j’ai compris que cette édition du fichier reporserver.config n’augmentait pas, mais remplaçait en fait la feuille de style par défaut, j’ai copié dans la feuille de style par défaut et tout a commencé à fonctionner.

    Ensuite, descendez dans le répertoire Styles ( C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportServer\Styles ).

    Faites une copie du fichier nommé SP_Full.css et nommez la copie SafariChromeFix.css. À ce stade, SafariChromeFix.css devrait être identique à SP_Full.css.

    Modifiez SafariChromeFix.css et ajoutez les lignes suivantes au début:

     div { overflow: visible !important; } 

    Sauvegarde le.

    Une fois celui-ci enregistré, tous les rapports existants sur cette instance de Reporting Services seront affichés sur tous les navigateurs, y compris Chrome et Safari.

    Notez s’il vous plaît:

    Il est non seulement possible, mais extrêmement probable, que reportserver.config soit remplacé par les mises à jour des services de génération de rapports. Il est donc possible que vous deviez append la SafariChrome au fil du temps.

    Cela nous permet également de pénétrer dans la feuille de style par défaut et d’effectuer beaucoup d’autres modifications personnalisées à partir de quelque chose qui fonctionne déjà. Et comme ce n’est pas la feuille de style par défaut, votre nouveau fichier CSS personnalisé n’est pas écrasé lors des mises à niveau et des correctifs.

    Dans mon cas, la DIV est “ctl31_ctl09”, donc si la solution ci-dessus ne fonctionne pas, essayez de changer var element = document.getElementById("ctl31_ctl10"); à var element = document.getElementById("ctl31_ctl09");

    Ma solution a été d’append le à:

    Reporting Services \ ReportManager \ Pages \ Report.aspx

    Le script cible le parent 1 du contenu du rapport visible et définit le style. overflow : visible style. overflow : visible chaque fois que le rapport est chargé 2, y compris la pagination via un rapport multipage.

     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"; } } }); }); 

    1 Cela signifie que nous ne devons pas cibler les identifiants générés qui ont tendance à changer, ctl31_ctl09 , ctl31_ctl10 , ctl32_ctl09 , etc.
    2 Voir Sys.Application. add_load() Sys.Application. add_load()

    La version SQL Server 2014 de Reporting Services ajoute la prise en charge du navigateur Google Chrome, mais il n’y a pas encore de support pour iOS. Voir les détails ici .

    Pour moi, le nom était ” ctl32_ctl09 ” (SSRS de SQL Server 2012 SP1, MSRS11).

    Je devais aller dans Chrome avec F12 et remarqué que j’avais ctl32 _ctl09, pas ctl31_ctl09 dans ma div.

    Ceci est pour Windows Server 2008 R2 64 bits avec SQL Server 2012 . Ajoutez le script, puis redémarrez SSRS et effacez le cache du navigateur.

    // Correction pour permettre à Chrome d’afficher les rapports SSRS

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

    Malheureusement, la réponse principale interrompt les colonnes flottantes (position absolue) dans les rapports Internet Explorer. Par conséquent, je l’ai légèrement modifié, ce que je n’aime pas, car il recherche spécifiquement WebKit, mais cela fonctionne:

     //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"; } } 

    Pour contourner le code de l’élément, j’ai édité le fichier ReportingServices.js sur le serveur RS @ [Lecteur]: \ Program Files \ Microsoft SQL Server \ [Instance Reporting Services] \ Reporting Services \ ReportManager \ js \ ReportingServices.js pour inclure du code pour récupérer jQuery, chargez-le dans la page, puis recherchez tous les éléments dont le dépassement est défini sur auto.

    Insérer le code suivant en haut du fichier ReportingServices.js

     var loadjQuery = function (cb) { if (typeof (jQuery) == 'undefined') { var scr = document.createElement('script'); scr.setAtsortingbute('type', 'text/javascript'); scr.setAtsortingbute('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); } } 

    Ensuite, la ligne suivante est ce qui était à l’origine dans le fichier JS.

    Après cela, ajoutez le code suivant

     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'); }); } } 

    Je viens de terminer le test avec Chrome 27 et IE 10 sur une instance RM2012 et cela a bien fonctionné.

    Le problème existe toujours dans Chrome 22.0.1229.79.

    YMMV , mais j’ai constaté que la suppression de la hauteur de la balise ReportViewer résout ce problème.

    J’avais ce problème avec les rapports SSAS, mais pas ceux de SSRS. Je ne pouvais pas comprendre pourquoi jusqu’à ce que je vérifie les différences dans les pages (un consultant avait fait les rapports SSAS). Il configurait ReportViewer Height = 60% et les rapports SSRS ne spécifiaient pas la hauteur.

    Une fois la hauteur supprimée, mes rapports sont affichés.

    Pour SSRS 2012 sur Windows Server 2008 R2 x64, un script de travail est le suivant:

     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 } } 

    Toutes les versions suggérées ci-dessus ne fonctionnaient pas du tout.

    Un problème avec le overflow:visible correctif overflow:visible est que les en-têtes flottants sont brisés sur tous les navigateurs. Le script suivant laissera Internet Explorer seul et appliquera le correctif uniquement aux navigateurs non Internet Explorer. Avec cela, toutes les fonctionnalités sont conservées pour les utilisateurs d’Internet Explorer et les autres navigateurs peuvent toujours afficher les rapports.

     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; } 

    J’ai essayé les approches et cela a fonctionné pour moi, mais nos administrateurs système étaient sceptiques quant à ces changements.

    Au lieu de définir la hauteur à 100% sur ReportViewer , j’ai utilisé une hauteur fixe et j’ai réussi à travailler dans mon application pour Internet Explorer et Chrome.

    Je n’ai jamais eu de chance d’afficher des rapports dans Chrome. La plupart de la documentation de Microsoft ne la mentionne même pas, donc je suppose que Chrome doit avoir du mal à interpréter quelque chose dans l’ASP.

    Voir Prise en charge du navigateur pour Reporting Services et Power View .

    J’utilise Chrome 11 et je ressens le même comportement que vous.

    J’ai eu le même problème avec l’affichage de repports sur Chrome. Je l’ai corrigé en ajoutant l’extension “SSRS Report Fix” à Google Chrome. https://chrome.google.com/webstore/detail/ssrs-report-fix/fjbdfjiheheafbioiejbdpalmojkeobk