SSRS Report Viewer Control Browser Compatibility - reporting-services

Question

How compatible is the MS Report Viewer Control with browsers like Firefox and Safari?
Please also post if you know any 3rd party report viewers for SSRS.

Answer 1

Edit - 2016/2017 Update
SSRS 2016+ can be said to be cross-browser compatible.
Table borders aren't displaying right in IE10, but IE10 is dying out anyway.
In the rest of the browsers, it's fine.
You still need to register add_pageLoaded to translate the parameter prompts.
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () { fixReportingServices('rpt-container'); });
Also, like in versions < 2016, you need to add PageCountMode="Actual" to RS:ReportViewerHost control.
<RS:ReportViewerHost ID="ReportViewerControl" PageCountMode="Actual" runat="server" />
if you want to have meaningful paging numbers.
Also, there's a problem when you set the language in the query string with datepickers (with SSRS < 2016 as well). You need to set context.Request.UserLanguages[i] to the language specified in the query-string in context.BeginRequest in a HTTP-Module, if you want datepicker to work with a non-browser language.
Also, you need to add the X-Frame-Options and Content-Security-Policy HTTP-headers in each HTTP-response, if you want to use SSRS in an iframe in the internet securely. See my github-repository for details.
</EndEdit>
Pre-2016:
I can tell you, I have 9 years experience with the damn thing (SSRS 2005, SSRS 2008 R1 & R2, 2012, and SSRS 2014).
Let me assure you that because SSRS HTML reports depend on IE5-Quirksmode, there is no chance in hell they will ever render correctly in any browser other than Internet Explorer (IE < 10 I might be inclined to add).
IF you have admin access to the reportserver, and I stress the IF, you can add jQuery routines and CSS on the ReportViewer page to correct the most basic problems (like that you don't see more than 1cm of the report), but otherwise, the HTML rendering will still look absolutely horrible (margins, table borders, picture paddings, column size, textfield-size, title and/or pagenumber-alignment, etc., in short - just about anything)
Of course, the ActiveX printer control can only ever work in InternetExplorer (on Windows), because only there ActiveX are supported.
Let me also assure you, there is absolutely no way in hell to get ReportManager working in any other browser than IE.
As for Internet Explorer support, it should be mentioned, that starting as of IE version 10, IE defaults to webkit-quirksmode (for compatibility reasons) instead of IE5 quirksmode, so the HTML rendered will look equally horrible as in Chrome/Firefox/Safari for IE 10+, unless you added meta xua-compatible IE5 in the ReportViewer.aspx page.
The latter might not apply for Intranet, as IE automatically falls back to IE 7 compatibility mode when it's on an intranet site (but only in any Windows version < 8).
In Windows 8, localhost links and computername links (can't add the http:// in stackoverflow posts) are not assigned to the local intranet zone (probably as quick hack so IE doesn't fall back to IE7 compatibility mode), and therefore, Windows authentication will FAIL.
It should also be mentioned that it's not possible to add meta xua-compatible IE5 for ReportManager, because there is no page you can edit (compiled non-updateable ASP.NET website-project... ).
And that short of using the dev-tools to switch reportmanager in quirksmode, it's not possible to use ReportManager in IE 10+.
Then, another thing to mention is, that starting as of IE9, IE inherits the doctype of iframe elements from the parent page, and there is no way in hell to change that either (without changing the parent page to the desired child-page doc-mode).
So if you were clever enough to use iframes for the reports, because there is no way in hell any sane person wants popups in the age of popup-blockers, the report page will inherit the parent page's doctype. If that isn't IE5-QuirksMode, it will render the reports equally horrible as on Safari/Chrome/Firefox/Opera for any IE > 8, irrespecive of any possible meta xua-compatible ie5 tag in ReportViewer.aspx.
As for alternatives, for free and with a similar feature-set, there is only Eclipse BIRT (fortunately, the HTML rendering isn't similar).
It should be mentioned that BIRT, although licensed under the Eclipse Public License, uses SUN Java and therefore you are using Oracle technology, which is subject to its respective licensing terms.
Also, you are using non-Microsoft technology, and the Excel-Sheets BIRT renders are actually XML files, which will produce (who would have guessed) a rather alarming warning when opening in Office 2010+.
Then, for a rather large fee, there is http://www.stimulsoft.com reports, and Telerik reports.
From the technical looks of it, I'd recommend stimulsoft reports, but: disclaimer, i haven't used either of these, because they aren't free.
As for alternative SSRS rendering engines (not viewers btw), there is only www.fyireporting.com/‎, which has a fork here http://www.codeproject.com/Articles/138271/An-Open-Source-RDL-Engine.
But fyiReporting is incomplete and work in progress (if not abandoned), so I would refrain from using it.
Bottom line, if your product is IE & windows only, with windows version < 8 (and no - not <= just in case you haven't been paying attention), in intranet, called from pop-ups and not iframes, then go with SSRS.
For anything else, use stimulsoft reports (the problem is, you have to redo all your reports, as there is no automated migration - not even a non-working one).
PS:
And by adding "a little javascript", i mean the below thing(2008 R1 Edition, won't work on 2008R2+, may work on 2005, and note that you need to embed jQuery and jQuery Migrate in an inline-script tag, if the client PC's don't have access to http(s)://ajax.aspnetcdn.com [note: putting the scripts into the Pages folder and adding a relative or absolute link won't work...]):
<%# Register TagPrefix="RS" Namespace="Microsoft.ReportingServices.WebServer" Assembly="ReportingServicesWebServer" %>
<%# Page Language="C#" AutoEventWireup="true" Inherits="Microsoft.ReportingServices.WebServer.ReportViewerPage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<%= System.Web.HttpContext.Current.Request.Browser.Browser == "IE" && System.Globalization.CultureInfo.InvariantCulture.CompareInfo.IndexOf(System.Convert.ToString(System.Web.HttpContext.Current.Request.QueryString), "stylesheet", System.Globalization.CompareOptions.IgnoreCase) == -1 ? (System.Web.HttpContext.Current.Request.Browser.Browser != "IE" ? "": "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=5\">") : "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">" %>
<head id="headID" runat="server">
<title>Report Viewer</title>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.migrate/jquery-migrate-1.1.0.min.js"></script>
<script type="text/javascript">
var bInFrameOrIframe = false;
var iLanguageIndex = 0;
var language = "DE_LOL";
var UpdateLock = false;
if (window.self === window.top) {
// alert("true");
// not in a frame
// Use IE5 quirksmode
//document.writeln('<meta http-equiv="X-UA-Compatible" content="IE=5" />');
bInFrameOrIframe = false
}
else {
// in a frame, FMS
bInFrameOrIframe = true;
}
function TranslateParameterPrompts() {
//mTo = false;
$("table[id^='ParametersGridReportViewerControl'] span").each(function(index) {
var strText = $(this).text();
if (strText != null && strText.indexOf('/') != -1) {
strText = strText.split('/');
if (iLanguageIndex < strText.length)
strText = strText[iLanguageIndex];
else {
if (strText.length > 0)
strText = strText[0];
}
$(this).text(strText);
}
});
//setTimeout(function(){mTo = true}, 5000);
}
function setTableSize() {
//$("[id$='ReportViewerControl']")
$(
$(
$("#ReportFrameReportViewerControl")[0].contentWindow.document
)
.find("[id$='report']")[0].contentWindow.document.body
).find('*')
.each(function() {
//console.log("Processing an element");
//var cls = $(this).attr("class");
try {
// Don't add a border to sort-arrow
if ($(this).is('img')) {
return;
}
var anywidth = $(this).css('width');
var anywidth = parseFloat(anywidth);
//console.log("anywidth: " + anywidth);
//var lol = $(this).css('borderLeftWidth');
var blw = $(this).css('border-left-width');
var brw = $(this).css('border-right-width');
var btw = $(this).css('border-top-width');
var bbw = $(this).css('border-bottom-width');
var borls = $(this).css('border-left-style') == "solid";
var borrs = $(this).css('border-right-style') == "solid";
var borts = $(this).css('border-top-style') == "solid";
var borbs = $(this).css('border-bottom-style') == "solid";
var blw = parseFloat(blw);
var brw = parseFloat(brw);
var btw = parseFloat(btw);
var bbw = parseFloat(bbw);
//parseInt($(this).css("borderRightWidth"))
//console.log(parseInt($(this).css("borderLeftWidth")));
UpdateLock = true;
// Set width to 1px where 0px
if (anywidth == 0)
$(this).css('width', '1px');
if (borls && blw == 0.0 || (blw > 0.0 && blw < 1.0)) {
//console.log("setting border width");
$(this).css('border-left-width', '1px');
}
if (borrs && brw == 0.0 || (brw > 0.0 && brw < 1.0)) {
$(this).css('border-right-width', '1px');
}
if (borts && btw == 0.0 || (btw > 0.0 && btw < 1.0)) {
$(this).css('border-top-width', '1px');
}
if (borbs && bbw == 0.0 || (bbw > 0.0 && bbw < 1.0)) {
$(this).css('border-bottom-width', '1px');
}
UpdateLock = false;
}
catch (ex) {
UpdateLock = false;
//console.log(ex);
}
}); // End $('*').each
// console.log("loop");
var $img = $("img[onload^='this.fitproportional=true']");
if ($img == null) {
// console.log("img is null");
return;
}
var $div = $img.parent();
if ($div == null) {
// console.log("div is null");
return;
}
UpdateLock = true;
{
$img.removeAttr("height");
$img.css('max-width', '100%')
$img.css('max-height', '100%')
$div.css('text-align', 'right');
var divMinWidth = parseFloat($div.css('min-width'));
var divWidth = parseFloat($div.css('width'));
var divMinHeight = parseFloat($div.css('min-height'));
var divHeight = parseFloat($div.css('height'));
// console.log("width: " + divWidth);
// console.log("height: " + divHeight);
// console.log("min-width: " + divMinWidth);
// console.log("min-height: " + divMinHeight);
if (divMinWidth != 0)
$div.css('width', $div.css('min-width'));
if (divMinHeight != 0)
$div.css('height', $div.css('min-height'));
}
UpdateLock = false;
}
$(document).ready(function() {
switch (language) {
case "fr":
iLanguageIndex = 1;
break;
case "it":
iLanguageIndex = 2;
break;
case "en":
iLanguageIndex = 3;
break;
default: // "DE"
iLanguageIndex = 0;
}
TranslateParameterPrompts();
// setInterval(function() { TranslateParameterPrompts() }, 100);
if ($.browser.msie && !bInFrameOrIframe)
return;
// if ($.browser.webkit)
//setTableSize();
$("[id$='ReportFrameReportViewerControl']").load(function() {
//setNewHeight();
//alert("Loading");
setTableSize();
$(
$("[id$='ReportFrameReportViewerControl']")[0].contentWindow.document
)
.find("[id$='report']").load(function() {
//alert("load report");
setTableSize();
}
); // End load #report
}); // End Function load #ReportFrameReportViewerControl
}); // End Function document.ready
</script>
</head>
<body style="margin: 0px; overflow: auto">
<form style="width:100%;height:100%" runat="server" ID="ReportViewerForm">
<RS:ReportViewerHost ID="ReportViewerControl" runat="server" />
</form>
</body>
</html>
Note: UpdateLock stems from 2012 backport and is not really used here, and language stems from backport too, setInterval on TranslateParameterPrompts is necessary in 2012
and function
for 2012 has only the little addition of "label" in the jQuery selector...
function TranslateParameterPrompts() {
//mTo = false;
$("table[id^='ParametersGridReportViewerControl'] label span").each(function(index) {
var strText = $(this).text();
if (strText != null && strText.indexOf('/') != -1) {
strText = strText.split('/');
if (iLanguageIndex < strText.length)
strText = strText[iLanguageIndex];
else
{
if(strText.length > 0)
strText = strText[0];
}
$(this).text(strText);
}
});
//setTimeout(function(){mTo = true}, 5000);
}
Infering the language from the browser language goes like this, btw:
<script type="text/javascript">
language = <%= System.Web.HttpContext.Current.Request.UserLanguages != null ? "\"" + System.Convert.ToString(System.Web.HttpContext.Current.Request.UserLanguages[0]) + "\"" : "null" %>;
if(language == null)
language = window.navigator.userLanguage || window.navigator.language;
if(language != null)
language = language.substr(0,2).toLowerCase();
</script>
And in 2012 you need to Dispose of the session cookies, otherwise you get "HTTP 400: Header too long" after opening about 120 reports:
<script type="text/C#" runat="server">
protected string ClearSessionKeepAliveCookiesToPreventHttp400HeaderTooLong()
{
if(Request == null || Request.Cookies == null)
return "";
if(Request.Cookies.Count < 60)
return "";
// System.Web.HttpContext.Current.Response.Write("<h1>"+Request.Cookies.Count.ToString()+"</h1>");
for(int i = 0; i < System.Web.HttpContext.Current.Request.Cookies.Count; ++i)
{
if(StringComparer.OrdinalIgnoreCase.Equals(Request.Cookies[i].Name, System.Web.Security.FormsAuthentication.FormsCookieName))
continue;
if(!Request.Cookies[i].Name.EndsWith("_SKA", System.StringComparison.OrdinalIgnoreCase))
continue;
if(i > 60)
break;
//System.Web.HttpContext.Current.Response.Write("<h1>"+Request.Cookies[i].Name+"</h1>");
System.Web.HttpCookie c = new System.Web.HttpCookie( Request.Cookies[i].Name );
//c.Expires = System.DateTime.Now.AddDays( -1 );
c.Expires = new System.DateTime(1970, 1 ,1);
c.Path = Request.ApplicationPath + "/Pages";
c.Secure = false;
c.HttpOnly = true;
// http://stackoverflow.com/questions/5517273/httpcookiecollection-add-vs-httpcookiecollection-set-does-the-request-cookies
//Response.Cookies[Request.Cookies[i].Name] = c;
//Response.Cookies.Add(c);
Response.Cookies.Set(c);
}
return "";
}
</script>
And on 2012, you need to listen to content update, because it uses Microsoft Ajax controls
function cbOnContentUpdate() {
//console.log("content update");
alterTableBorderWidth();
// TranslateParameterPrompts();
} // End Callback cbOnContentUpdate
var hLastTimeout = null;
function queueUpdate() {
if (UpdateLock)
return;
if (hLastTimeout != null)
clearTimeout(hLastTimeout);
hLastTimeout = window.setTimeout(function() { cbOnContentUpdate(); }, 50);
//window.setTimeout(function() { cbOnContentUpdate(); }, 3000);
} // End Function queueUpdate
$(document).ready(function() {
switch (language) {
case "fr":
iLanguageIndex = 1;
break;
case "it":
iLanguageIndex = 2;
break;
case "en":
iLanguageIndex = 3;
break;
default: // "DE"
iLanguageIndex = 0;
}
setInterval(function() { TranslateParameterPrompts() }, 100);
// opt-out for non-framed IE, because that crook supports IE5-Quirks (framed takes parent-doctype in IE >= 9)
if ($.browser.msie && !areWeInFrame())
return;
// if ($.browser.webkit)
// console.log('Setting event listener!');
// http://stackoverflow.com/questions/4979738/fire-jquery-event-on-div-change
//$("[id$='ReportViewerControl']").bind('DOMNodeInserted DOMNodeRemoved', function(event) {
//$("[id$='ReportArea']")
$("body")
.bind('DOMNodeInserted DOMNodeRemoved DOMSubtreeModified', function(event) {
if (event.type == 'DOMNodeInserted') {
//console.log('Content added! Current content:' + '\n\n' + this.innerHTML);
//console.log('Content added!');
queueUpdate();
}
else {
//console.log('Content removed! Current content:' + '\n\n' + this.innerHTML);
//console.log('Content removed!');
queueUpdate();
}
}); // End Bind IRM
}); // End Function $(document).ready
And note that for 2012, setTableSize is alterTableBorderWidth, and the selector goes like this:
function alterTableBorderWidth()
{
//$('*')
$("[id$='ReportViewerControl']").find('*')
.each(function() {
Btw, if you want to remove the PRINT icon, because it's only a source of sorrow, that goes like this (for German, English, French and Italian [the languages spoken in Switzerland + English]).
This CSS is for 2008 R1, don't know and care if it's the same in 2012.
input[type="image"][title="Drucken"], input[type="image"][title="Print"], input[type="image"][title="Imprimer"], input[type="image"][title="Stampa"]
{
display: none !important;
}
And if that still doesn't deter you, then go right ahead and use forms authentication in SSRS 2012 (hint 1: there is no ms-provied sample as for 2005-2008R2, you need to write it yourself) ;)
Hint2: if you followed hint1, forms authentication redirect doesn't work when you have a colon in the URL [bug?], you can steal the code from mono and write your own redirect.
Hint3: if you followed hint2 and got forms authentication working, then you probably want to change the upload tool you're going to write, because you won't like to do manually "for each report browse-directory - check allow override checkbox - upload report - set datasource) for 120 reports or so, then you will be inheriting a class from ReportingService2005 and override GetWebRequest and GetWebResponse
''' <summary>
''' Overriding the method defined in the base class.
''' </summary>
''' <param name="uri"></param>
''' <returns></returns>
Protected Overrides Function GetWebRequest(uri As Uri) As System.Net.WebRequest
Dim request As System.Net.HttpWebRequest
request = DirectCast(System.Net.HttpWebRequest.Create(uri), System.Net.HttpWebRequest)
request.Credentials = MyBase.Credentials
request.CookieContainer = New System.Net.CookieContainer()
If m_authCookie IsNot Nothing Then
request.CookieContainer.Add(m_authCookie)
End If
Return request
End Function ' GetWebRequest
''' <summary>
''' Overriding the method defined in the base class.
''' </summary>
''' <param name="request"></param>
''' <returns></returns>
Protected Overrides Function GetWebResponse(request As System.Net.WebRequest) As System.Net.WebResponse
Dim response As System.Net.WebResponse = MyBase.GetWebResponse(request)
' http://social.msdn.microsoft.com/Forums/sqlserver/en-US/f68c3f2f-c498-4566-8ba4-ffd5070b8f7f/problem-with-ssrs-forms-authentication
Dim cookieName As String = response.Headers("RSAuthenticationHeader")
If cookieName IsNot Nothing Then
m_authCookieName = cookieName
Dim webResponse As System.Net.HttpWebResponse = DirectCast(response, System.Net.HttpWebResponse)
Dim authCookie As System.Net.Cookie = webResponse.Cookies(cookieName)
' Save it for future reference and use.
m_authCookie = authCookie
End If
Return response
End Function ' GetWebResponse
Hint 4: The above methods won't work if you haven't installed service pack 1 + 2 on SSRS 2008 R2...
Hint 5: The TranslateParameters method is there because you cannot (by design) translate the parameter prompts to multiple languages by SSRS, so you write:
Raum / Local / Locale / Room
which uses schema:
Text_DE / Text_FR / Text_IT / Text_EN
And then do split by '/' on the text (which is a little error prone if your prompt text contains '/' somewhere), and then select the right text by index of the language, by choosing MIN(splitarray.length, index) btw, just in case somewhere you only have Text_DE / Text_FR or whatever, first checking if the text contains a '/' at all, of course.
Hint 6:
Need I go on ? (i could still expand this post to tenfold size, but I think I should go back to work now :) )
If you want to see just how f*up it looks, this is how vanilla ssrs renders in chrome
This is what it looks like in IE11, with IE5 compatibility set via xua
And this is what it should be, and what you can get it to render with much tinkering with javascript and CSS
Addendum:
Oh, and it gets even better
If you want to run reportviewer in a language specified by your application (which is NOT identical to the browser language), you need to set the culture of reportviewer to the culture specified in your query string...
<script type="text/C#" runat="server">
protected override void InitializeCulture()
{
string sprache = System.Web.HttpContext.Current.Request.QueryString["in_sprache"];
// System.Web.HttpContext.Current.Response.Write(sprache);
switch(System.Globalization.CultureInfo.InvariantCulture.TextInfo.ToLower(sprache))
{
case "fr":
sprache = "fr-CH";
break;
case "it":
sprache = "it-CH";
break;
case "en":
sprache = "en-US";
break;
default:
sprache = "de-CH";
break;
}
// System.Web.HttpContext.Current.Response.Write(sprache);
System.Threading.Thread.CurrentThread.CurrentCulture = System.Globalization.CultureInfo.CreateSpecificCulture(sprache);
System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo(sprache);
base.InitializeCulture();
}
</script>
If you want to set a static culture, you can do so in the page declaration
<%# Page UICulture="de" Culture="de-CH" %>
And if you try to remove the the print icon and the atom-feed, doing it with styles, no matter how, it only works in Chrome...
input[type="image"][title="Drucken"], input[type="image"][title="Print"], input[type="image"][title="Imprimer"], input[type="image"][title="Stampa"]
{
display: none !important;
}
input[type="image"][title="In Datenfeed exportieren"], input[type="image"][title="Exporter vers un flux de données"], input[type="image"][title="Esporta in feed di dati"], input[type="image"][title="Export to Data Feed"]
{
display: none !important;
}
*/
input[type="image"][src$="Microsoft.Reporting.WebForms.Icons.Print.gif"] {
display: none !important;
}
input[type="image"][src$="Microsoft.Reporting.WebForms.Icons.AtomDataFeed.gif"] {
display: none !important;
}
But you can actually remove at least the print icon in internet-explorer by adding ShowPrintButton="false" to the reportviewer control:
<RS:ReportViewerHost ID="ReportViewerControl" ShowPrintButton="false" runat="server" />
Another idea: in SSRS 2012 & 2014 (and possibly 2008R2), you can also add your SSRS-fixing javaScript method into add_pageLoaded of ScriptManager. Like this:
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () { fixReportingServices('rpt-container'); });
Then you don't have to listen to page change events, which speeds things up, because loaded is only called once at the end of each update.
WARNING
Because in the Internet, IE doesn't default to compatibility view,
<meta http-equiv="X-UA-Compatible" content="IE=5">
won't help you with certain issues either (rotate270 text/vertical text).
Even in IE, it only works properly when you are in the intranet, because only then it uses "compatibility view". While the meta-tag sets the brower into IE5-Quirksmode, it doesn't enable "compatibility view", so it isn't the true quirksmode...

Answer 2

MS Report Viewer Control will work fine in IE only.
You can see the Reports from other browsers but you cannot able to view Zoom Option

Answer 3

See the following MSDN articles for browser compabilities and the ReportViewer controls:
Browser Support for ReportViewer Web Server Controls
Browser Support in Reporting Services

Answer 4

I have not noticed any real issue with it being displayed in Firefox or Safari. At times I think it might be getting rendered better in Firefox, but I don't have any actual benchmarks to back that up.

Answer 5

From the hip and perhaps a little stale. ASP.NET used to treat any non IE browser as a box of rocks. May be worth looking into if your experience problems.
http://weblogs.asp.net/fmarguerie/archive/2005/01/04/346222.aspx

Answer 6

SSRS works perfectly on IE6,7,8. It works on Firefox and Safari, but with displaying issues.
There are two possible solutions to fix those, test and see whichever works for you.
Solution 1
Go to
C:\Program Files\Microsoft SQL
Server\MSSQL.(your report server
instance)\Reporting
Services\ReportServer\Pages\reportviewer.aspx
Update style as
<body style="margin: 0px; overflow: auto"> ... <RS:ReportViewerHost style="display:table;" ID="ReportViewerControl" runat="server" />
Solution 2
Add following changes to stylesheet:
.DocMapAndReportFrame { min-height: 660px; min-width: 1280px; }
.MenuBarBkGnd { min-width:1000px; }

Answer 7

Rendering issues exist with Firefox, Chrome and Safari. I know for Firefox and Chrome, there are IE Add-ins that allow you to run the report in a Firefox/Chrome tab.