• General 10.08.2009

    En el 90% de proyectos en los que he participado el tema de los reportes siempre ha sido relativamente fácil básicamente porque siempre tuve al lado a crystal reports!, pero llegó el momento de separarme :(
    Pues decidí implementar una exportación a excel y que de ahí se impriman los documentos… pero el usuario no estuvo de acuerdo quería imprimir con un sólo click desde la web. Pues ya que está de moda en lo primero que pensé fue en jQuery! y encontré jPrintArea bastante fácil de implementar, apenas unas cuantas líneas.

    Para el demo he puesto un GridView que trae un listado de registros de la BD NorthWind todo dentro de un div con id “imprimir”, también tengo un Label con un texto cualquiera y un botón que llamará al método imprimir.
    Como estos 2 últimos controles no están dentro del div no se mostrarán en la impresión.

    El primer script es el jquery, el 2do el plugin jPrintArea y el tercero la función para imprimir que recibe como parámetro el id del div deseado.

    ?Ver código HTML4STRICT
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    <head>
        <title>Imprimir con jquery!</title>
     
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/imprimir.js"></script>
     
        <script type="text/javascript">
            function imprimir()
            {
                $(function(){
                    $.jPrintArea('#imprimir');
                });
            }
        </script>
     
    </head>
    ?Ver código HTML4STRICT
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    
    <body style="font-family:Trebuchet MS">
        <form id="form1" runat="server">
     
            <asp:Label ID="lblTexto" runat="server" ForeColor="#CC0000">Esto no se imprimira!</asp:Label>
     
            <div id="imprimir">
     
                <h4>Listado de Categorías de productos</h4>
     
                <asp:GridView ID="gvImprimir" runat="server" AutoGenerateColumns="False" CellPadding="4" DataSourceID="sqlDsProductos" ForeColor="#333333">
                    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                    <Columns>
                        <asp:BoundField DataField="CategoryName" HeaderText="Categoría" SortExpression="CategoryName" />
                        <asp:BoundField DataField="Description" HeaderText ="Descripción" />
                    </Columns>
                    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <EditRowStyle BackColor="#999999" />
                    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                </asp:GridView>       
                <asp:SqlDataSource ID="sqlDsProductos" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                    SelectCommand="SELECT [CategoryName], [Description] FROM [Categories]"></asp:SqlDataSource>           
     
            </div>
     
            <input id="btnImprimir" type="button" value="Imprimir" onclick="imprimir()" />
     
        </form>
    </body>

    Y eso es todo al hacer click en el botón imprimir tan sólo mostrará el listado de registros que contiene la grilla.
    Espero que sea de utilidad!

    Eduardo @ Lunes, 10 de Agosto de 2009

  • 2 Respuestas

    WP_Modern_Notepad

    Deja un comentario

    Ojo: Los comentarios tienen que ser activados por el administrador para que puedan mostrarse en el blog.