Imprimir reporte de ReportViewer desde otro navegador web que no sea IE

Nota: Existe una nueva “versión” de esta alternativa para impresión desde ReportViewer, pueden verla aquí.

El título es algo largo, jejeje, pero tenía que ser explícito. Si ya han usado el control ReportViewer en alguna aplicación o sitio web de ASP.NET, habrán notado que el botón de imprimir no se muestra en navegadores web como Mozilla Firefox o Google Chrome, sino solamente en Internet Explorer. ¿Por qué sucede esto? Muchos sostienen que es una artimaña del imperio para obligar al público a usar IE. Sin embargo, la versión que sostienen otros es que se debe a que para hacer uso de este botón se requiere que el navegador soporte ActiveX.

¿Qué podemos hacer al respecto, si definitivamente no queremos utilizar IE? Bueno, después de buscar en google y hacer algunas pruebas sin éxito, surgió la solución que describo a continuación, y que requiere el uso de la librería jQuery:

  1. Incluir la librería jQuery en el encabezado del WebForm. Por ejemplo:
    <script src="<%=Page.ResolveUrl("~/Scripts/jquery-1.7.1.min.js") %>" type="text/javascript"></script>
    

    Nota: Digo “por ejemplo” debido a que podría utilizarse otra versión de jQuery, y/o sacarla de otra ruta del proyecto, o bien desde las Google Hosted Libraries.

  2. Agregar un botón al WebForm donde se ubica el ReportViewer. Lo colocaremos arriba de este para que sea visible para el usuario:
    <asp:Button ID="BtnImprimir" runat="server" Text="Imprimir" CausesValidation="False" OnClientClick="return false;" UseSubmitBehavior="False" />
    <br />
    <rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="100%" Height="592px">
    </rsweb:ReportViewer>
    

    Cabe notar que se evita que el botón haga postback con OnClientClick=”return false;” y submit con UseSubmitBehavior=”False”.

  3. Ocultar el botón en el método Load del WebForm, si el navegador desde el cual se hace la solicitud es Internet Explorer, para mostrar el botón en el resto de navegadores solamente:
    if (Request.Browser.Browser.Equals("IE"))
    {
        BtnImprimir.Visible = false;
        BtnImprimir.Enabled = false;
    }
    
  4. Añadir el siguiente código Javascript en el WebForm (si se puede hacerlo dentro de las etiquetas <head></head>, por cuestiones de orden; pero si no es posible, puede colocarse en cualquier parte dentro del cuerpo de la página web):
    <script type="text/javascript">
        $(document).ready(function () {
            $("#BtnImprimir").click(imprimirDiv);    //Asociando la función "imprimirDiv" al clic del botón para Imprimir Reporte
        });
    
        function imprimirDiv()
        {
            var divImprimir = $("div[id$='ReportDiv']").parent();        //Obteniendo el padre del DIV que contiene al reporte
            var estilos = $("head style[id$='ReportControl_styles']");    //Obteniendo los estilos del reporte
            newWin= window.open("");        //Abriendo una nueva ventana
    
            //Construyendo el HTML de la nueva ventana, con los estilos del reporte y el div que contiene el reporte
            newWin.document.write('<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">' + estilos.html() + '</style></head><body>' + divImprimir.html() + '</body>');
            newWin.document.close();        //Finalizando la escritura
            newWin.print();        //Imprimir contenido de nueva ventana
            newWin.close();        //Cerrar nueva ventana
        }
    </script>
    

Como puede notarse, la lógica es bastante simple, y la parte crucial de este ejemplo es el código JavaScript, que básicamente al dar clic en el botón abre una nueva ventana, y copia el contenido del reporte junto con los estilos de este dentro de ella. Luego se manda a imprimir el contenido de la ventana, y finalmente se cierra la ventana.

Posiblemente no sea la mejor solución, ya que tiene algunos puntos débiles:

  • El formato del reporte depende enteramente de los estilos CSS aplicados.
  • El contenido del reporte y los estilos se obtienen de acuerdo a su ID, por lo que si este cambia en futuras versiones del .NET Framework, este procedimiento ya no funcionará correctamente.

Sin embargo, cabe decir que saca de apuros…

Esta solución se implementó en una aplicación web usando el .NET Framework 4.5 y la librería jQuery 1.7.1, aunque creería que debería de funcionar hasta .NET Framework 3.5 y jQuery 1.4.x como mínimo. Se ha verificado su funcionamiento en Google Chrome, Mozilla Firefox, e Internet Explorer 9 y 10 en modo de compatibilidad. No funciona en IE 9 y 10 en modo normal.

Feliz día, que Dios les bendiga 🙂

Anuncios

4 pensamientos en “Imprimir reporte de ReportViewer desde otro navegador web que no sea IE

  1. Pingback: Crear botón de impresión en ReportViewer de ASP.NET WebForms | Souvenirs de IT

    • Sí, lastimosamente así es, debido a que el report viewer solo muestra una página, y en todo caso no estoy seguro si habría alguna forma de identificar las páginas. A este momento se me ocurren solo dos alternativas:
      – Convertir y descargar el reporte en PDF.
      – Convertir el reporte en HTML en el lado del servidor, abrirlo en otra ventana, y mandarlo a imprimir, de forma similar a como se hace con este ejemplo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s