Crear botón de impresión en ReportViewer de ASP.NET WebForms

Hola nuevamente. Este post es una segunda versión del post titulado Imprimir reporte de ReportViewer desde otro navegador web que no sea IE. Entre las mejoras de esta nueva versión está que en vez de añadir un botón normal para la impresión fuera del ReportViewer, ahora se añade el botón de impresión dentro de la barra de herramientas del ReportViewer, y luce exactamente igual al botón propio del control. Además, con esta nueva versión también se logra que la impresión funcione en IE 9 y 10 en modo normal. La única desventaja es que hay que desactivar la renderización asíncrona y los postbacks asíncronos, para poder colocar el botón de impresión con jQuery, ya que se necesita alguna forma de saber en qué momento colocar el botón, y la única forma que encontré es hacerlo al momento de cargar la página web luego del postback en el que se solicita la generación del reporte, durante el evento load.

Los pasos para colocar nuestro botón de impresión personalizado en la barra de herramientas del ReportViewer son los siguientes:

    1. Incluir la librería jQuery en el encabezado de la página web:
      <script src="<%=Page.ResolveUrl("~/Scripts/jquery-1.7.1.min.js") %>" type="text/javascript"></script>
      
    2. Agregar el control de ReportViewer, desactivando el renderizado asíncrono y el postback asíncrono, y ocultando el botón de impresión:
      <rsweb:ReportViewer ID="ReportViewer1" runat="server" AsyncRendering="False" InteractivityPostBackMode="AlwaysSynchronous" ShowPrintButton="False">
      </rsweb:ReportViewer>
      
    3. Colocar en el encabezado de la página web el siguiente código JavaScript (el cual se explica un poco en los comentarios):
      // Guardando la URL de la imagen del botón imprimir. Esta imagen es una copia de la imagen mostrada en el ReportViewer, guardada en la carpeta de imágenes de la aplicación web.
      var urlImg = '<%=Page.ResolveUrl("~/Content/themes/base/minified/images/Print.gif") %>';
      
      // Función que se ejecuta una vez se ha terminado de cargar el DOM de la página web en el navegador
      $(document).ready(function () {
          colocarBtnImprimir();    // Colocar el botón de imprimir en la barra de herramientas del ReportViewer
          $("#BtnImprimir").click(imprimirDiv);  // Asignando la función "imprimirDiv" al evento click del botón de impresión
      });
      
      // Esta función coloca el botón de imprimir en la barra de herramientas del ReportViewer
      function colocarBtnImprimir() {
          var jqoBarraRpt = $('div#ReportViewer1_ctl05>div:first-child');    // Buscando el div que contiene la barra de herramientas del RportViewer
      
          if (jqoBarraRpt && jqoBarraRpt.length > 0    // Verificando que el DIV barra de herramientas fue encontrado,
              && jqoBarraRpt.find('#BtnImprimir').length <= 0) {    // y verificando que el botón de imprimir no existe ya
      
              // Colocando el botón de impresión, con una estructura similar a la que tiene el botón original en el ReportViewer
              jqoBarraRpt.append('<table cellpadding="0" cellspacing="0" ToolbarSpacer="true" style="display:inline;width:10px;"><tr><td></td></tr></table><div style="display:inline;font-family:Verdana;font-size:8pt;vertical-align:top;"><table cellpadding="0" cellspacing="0" style="display:inline;"><tr><td height="28px"><div"><div id="BtnImprimir"><table title="Print"><tr><td><img title="Print" src="' + urlImg + '" alt="Print" style="border-style:None;height:16px;width:16px;" /></td></tr></table></div><div disabled="disabled" style="display:none;border:1px transparent Solid;"><table title="Print"><tr><td><input type="image" disabled="disabled" title="Print" src="' + urlImg + '" alt="Print" style="border-style:None;height:16px;width:16px;cursor:default;" /></td></tr></table></div></div></td></tr></table></div>');
          }
      }
      
      // Función que se encarga de imprimir el reporte
      function imprimirDiv()
      {
          var divImprimir = $("div[id$='ReportDiv']").parent();    // Obteniendo el DIV que contiene el reporte a imprimir
          var newWin = window.open();    // Abriendo una nueva ventana del navegador
          newWin.document.open();    // Abriendo el documento de la nueva ventana, para escribir su contenido
          newWin.document.write('<html><head><style type="text/css">' + getAllStyleSheetsAsText() + '</style></head><body>' + divImprimir.html() + '</body>');
          newWin.document.close();
          newWin.print();
          newWin.close();
      }
      
      function getAllStyleSheetsAsText() {
          var cssText = '';
          var sheets = document.styleSheets;
          for (var c = 0; c < sheets.length; c++) {
              var sheet = sheets[c];
              if ((sheet.ownerNode || sheet.owningElement).id.endsWith('_ReportControl_styles')) {
                  var rules = sheet.rules || sheet.cssRules;
                  for (var r = 0; r < rules.length; r++) {
                      var cssRule = rules[r];
                      if ($.browser.msie) {
                          var cssText = cssText + cssRule.selectorText + '{' + cssRule.style.cssText.toLowerCase() + '}';
                      } else {
                          var cssText = cssText + cssRule.cssText;
                      }
                  }
              }
          }
          return cssText;
      }
      
    4. Finalmente, hay que agregar el estilo CSS para el botón de impresión, para que luzca igual al botón original del ReportViewer:
      #BtnImprimir {
          border: 1px solid transparent;
      }
      #BtnImprimir:hover {
          border: 1px solid rgb(51,102,153);
          background-color: rgb(221,238,247);
          cursor:pointer;
      }
      

Y ¡listo!. Ahora veremos que cada vez que se genere el reporte y se muestre la barra de herramientas del ReportViewer, se mostrará nuestro botón de impresión personalizado:

Botón de impresión

Botón de impresión

Lo único que tengo que mencionar es que aún no he probado la impresión de reportes con más de una página. Pero para reportes de una sola página parece funcionar correctamente.

Saludos.

Anuncios

11 pensamientos en “Crear botón de impresión en ReportViewer de ASP.NET WebForms

  1. Pingback: Imprimir reporte de ReportViewer desde otro navegador web que no sea IE | Souvenirs de IT

    • Eso me temo, ya que solo se copia la parte visible del HTML y el CSS del reporte. Creo que al final la mejor opción sería descargar el reporte en PDF, e imprimirlo por separado.

    • Perdon, finalmente se solucionó agregando “-block” a todos los “inline” que decía en el jqoBarraRpt.append de la funcion: function colocarBtnImprimir()
      Gracias nuevamente.

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