ARCmop Java Programacion Solaris Linux

Java-linux-programacion

JQGrid exportar a Excel

Posted by Cmop en agosto 25, 2013

Buenos dias, en esta oportunidad compartiré con ustedes la solución que apliqué para generar una hoja de calculo xlsx desde una tabla JQGrid, aunque esto también se puede aplicar a tablas HTML convencionales. Se utilizaron las siguientes librerias: JQuery, JSZip, xlsx.js

jqgrid

jqgrid

La solución aplicada se basa en el Cliente, no hay participación alguna del servidor. Su lógica es sencilla, se trata de obtener el array de datos de la tabla, y empezar a escribirla en objetos que luego se codificarán a base64, con esto se generará una cadena de datos la cual se podrá acceder a través del esquema DATA. data://

El ejemplo es el siguiente:

ACTUALIZACION 07/03/2014 (por petición)

Código del proyecto Ejemplo en zip:  https://www.dropbox.com/s/7txvs85a57l6pl7/jgrid2excel.zip

=============================================================================

Código de la pagina web.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="js/jquery-1.5.min.js" ></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.20.min.js" ></script>
        <script type="text/javascript" src="js/jqgrid/grid.locale-es.js" ></script>
        <script type="text/javascript" src="js/jqgrid/jquery.jqGrid.min.js" ></script>
        <script type="text/javascript" src="js/jqgridExcelExportClientSide.js" ></script>
        <script type="text/javascript" src="js/jqgridExcelExportClientSide-libs.js" ></script>
        <link rel="stylesheet" href="css/ui.jqgrid.css" type="text/css" >
        <link rel="stylesheet" href="css/redmond/jquery-ui-1.8.10.custom.css" type="text/css" >
    </head>
    <body>
        <table id="tb_ejemplo" ><tr><td></td></tr></table>
        <div id="tb_ejemplo_paginador"></div>
        <script type="text/javascript">
            var miData, paginador;
            miData = [
                {numero: "15", nombre: "USUARIO 01", precio: "10.00"},
                {numero: "23", nombre: "USUARIO 02", precio: "20.00"},
                {numero: "36", nombre: "USUARIO 03", precio: "100.00"},
                {numero: "47", nombre: "USUARIO 04", precio: "999.00"}
            ];
            //Creando la Tabla
            $("#tb_ejemplo").jqGrid({
                data: miData,
                datatype: "local",
                height: 'auto',
                width: 'auto',
                rowNum: 10,
                rowList: [10, 20, 30, 40, 100],
                colNames: ['N&ordm;', 'Nombre', 'Precio'],
                colModel: [
                    {
                        name: 'numero',
                        index: 'numero',
                        width: 100,
                        align: 'center'
                    },
                    {
                        name: 'nombre',
                        index: 'nombre',
                        width: 300,
                        align: 'center'
                    },
                    {
                        name: 'precio',
                        index: 'precio',
                        width: 100,
                        align: 'left'
                    }
                ],
                pager: "#tb_ejemplo_paginador",
                viewrecords: true,
                hidegrid: false,
                caption: "Tabla Ejemplo"
            });
            //Agregar el Boton Exportar a Excel//
            paginador = $("#tb_ejemplo").getGridParam('pager');
            jQuery("#tb_ejemplo").navGrid(paginador, {
                edit: false,
                add: false,
                del: false,
                search: false,
                refresh: false
            }).navButtonAdd(paginador, {
                caption: "Exportar Excel",
                buttonicon: "ui-icon-export",
                onClickButton: function() {
                    $("#tb_ejemplo").jqGrid('exportarExcelCliente',{nombre:"HOJATEST",formato:"excel"});
                    //console.log($("#tb_ejemplo").jqGrid('exportarTextoCliente'));
                },
                position: "last"
            });
            //*************************************//
        </script>
    </body>
</html>

Código que se encarga de la exportación.

(function ($) {
    $.jgrid.extend({
        exportarExcelCliente: function (o) {
            var archivoExporta, hojaExcel;
            archivoExporta = {
                worksheets: [
                    []
                ],
                creator: "Arcmop",
                created: new Date(),
                lastModifiedBy: "Arcmop",
                modified: new Date(),
                activeWorksheet: 0
            };
            hojaExcel = archivoExporta.worksheets[0];
            hojaExcel.name = o.nombre;

            var arrayCabeceras = new Array();
            arrayCabeceras = $(this).getDataIDs();
            var dataFilaGrid = $(this).getRowData(arrayCabeceras[0]);
            var nombreColumnas = new Array();
            var ii = 0;
            for (var i in dataFilaGrid) {
                nombreColumnas[ii++] = i;
            }
            hojaExcel.push(nombreColumnas);
            var dataFilaArchivo;
            for (i = 0; i < arrayCabeceras.length; i++) {
                dataFilaGrid = $(this).getRowData(arrayCabeceras[i]);
                dataFilaArchivo = new Array();
                for (j = 0; j < nombreColumnas.length; j++) {
                    dataFilaArchivo.push(dataFilaGrid[nombreColumnas[j]]);
                }
                hojaExcel.push(dataFilaArchivo);
            }
            return window.location = xlsx(archivoExporta).href();
        },
        exportarTextoCliente: function (o) {
            var arrayCabeceras = new Array();
            arrayCabeceras = $(this).getDataIDs();
            var dataFilaGrid = $(this).getRowData(arrayCabeceras[0]);
            var nombreColumnas = new Array();
            var ii = 0;
            var textoRpta = "";
            for (var i in dataFilaGrid) {
                nombreColumnas[ii++] = i;
                textoRpta = textoRpta + i + "\t";
            }
            textoRpta = textoRpta + "\n";
            for (i = 0; i < arrayCabeceras.length; i++) {
                dataFilaGrid = $(this).getRowData(arrayCabeceras[i]);
                for (j = 0; j < nombreColumnas.length; j++) {
                    textoRpta = textoRpta + dataFilaGrid[nombreColumnas[j]] + "\t";
                }
                textoRpta = textoRpta + "\n";
            }
            textoRpta = textoRpta + "\n";
            return textoRpta;
        }
    });
})(jQuery);

25 comentarios to “JQGrid exportar a Excel”

  1. ff said

    Illo, a ver cuando alguno en vez de poner tanto código sube los archivos con una estructura de ficheros que funcione!!!

  2. fF said

    gracias por borrar los comentarios…

  3. Maidenmich said

    No me funciona, me dice “Uncaught ReferenceError: zip_extra_lbits1 is not defined”

  4. Fernando said

    It doesn’t work. Please upload the js files separately, i.e. a zip folder. I’ll continue researching. Thank you.

  5. Lucas Masiello said

    Buenas , esto realmente funciona ? Copié exactamente todo el código que pasaste , cosa de hacer una página de prueba , baje jquery 1.5 y me tira el siguiente error : “ReferenceError: zip_extra_lbits1 is not defined” .
    Están todos los includes como corresponden .

    Alguna ayuda con respecto a esto ?

    Desde ya muchas gracias !!!

  6. jomiquel said

    Muy útil.

    Sólo me surge una duda. Llevo un rato intentando forzar el nombre del archivo de descarga, pero éste siempre es “descarga”, sin extensión. ¿Hay alguna forma de personalizar el nombre del archivo o, al menos, que incluya la extensión .xlsx?

  7. Paola Prada said

    Mil gracias! me ha sido útil, ahora voy analizar el código para poder exportar todos los datos de la tabla ya que solo me arroja el bloque que se visualiza.

  8. Luciano said

    Que tal no me esta funcionando, me aparece el siguiente error:

    Mensaje: El objeto no acepta esta propiedad o método
    Línea: 10
    Carácter: 29
    Código: 0
    URI: file:///C:/Users/u532691/Downloads/jgrid2excel/js/jqgridExcelExportClientSide-libs.js

    podrias decirme que puedo hacer para resolver el mismo?? Muchas gracias

    Luciano

  9. Sam said

    Nice job! Worked great for me. However, there are a couple of minor issues…

    Chrome: Works perfect. No issues.

    Firefox: Generates random file name with .xlsx extension. Otherwise, no issues.

    Safari: Generates “Unknown” file name without extension. File opens fine in Excel.

    Internet Explorer 8: Does not work. Generates script error and quits

  10. Ricardo Rodriguez said

    Muy Bueno , quisiera saber como hago para exportar todos los registros por que ;solo se están exportando los de la pagina en que me encuentro y quisiera exportarlo todo.

    • Victor said

      Me urge saber a mi tambien saber como hacer la exportacion completa.

      • Cmop said

        Si lo tengo y tb como especificarle un nombre para el archivo, pero ahorita estoy desde el cell y no puedo postearlo, te recomiendo mirar abajo los comentarios.

      • lemur647 said

        (function ($) {
        $.jgrid.extend({
        exportarExcelCliente: function (o) {
        var archivoExporta, hojaExcel;
        archivoExporta = {
        worksheets: [[]],
        creator: “Gaviotin”,
        created: new Date(),
        lastModifiedBy: “Gaviotin”,
        modified: new Date(),
        activeWorksheet: 0
        };
        hojaExcel = archivoExporta.worksheets[0];
        hojaExcel.name = o.nombre;
        var arrayCabeceras = new Array();
        arrayCabeceras = $(this).getDataIDs();
        var dataFilaGrid = $(this).getRowData(arrayCabeceras[0]);
        var nombreColumnas = new Array();
        var ii = 0;
        for (var i in dataFilaGrid) {
        nombreColumnas[ii++] = i;
        }
        hojaExcel.push(nombreColumnas);
        var dataFilaArchivo;

        //Se obtienen cabezeras de las columnas
        for (i = 0; i < $(this).getGridParam().data.length; i++) {
        dataFilaGrid = $(this).getGridParam().data[i];
        dataFilaArchivo = new Array();
        for (j = 0; j < nombreColumnas.length; j++) {
        dataFilaArchivo.push($(this).getGridParam().data[i][nombreColumnas[j]]);
        }
        hojaExcel.push(dataFilaArchivo);
        }
        return window.location = xlsx(archivoExporta).href();
        },
        exportarTextoCliente: function (o) {
        var arrayCabeceras = new Array();
        arrayCabeceras = $(this).getDataIDs();
        var dataFilaGrid = $(this).getRowData(arrayCabeceras[0]);
        var nombreColumnas = new Array();
        var ii = 0;
        var textoRpta = "";
        for (var i in dataFilaGrid) {
        nombreColumnas[ii++] = i;
        textoRpta = textoRpta + i + "\t";
        }
        textoRpta = textoRpta + "\n";
        for (i = 0; i < arrayCabeceras.length; i++) {
        dataFilaGrid = $(this).getRowData(arrayCabeceras[i]);
        for (j = 0; j < nombreColumnas.length; j++) {
        textoRpta = textoRpta + dataFilaGrid[nombreColumnas[j]] + "\t";
        }
        textoRpta = textoRpta + "\n";
        }
        textoRpta = textoRpta + "\n";
        return textoRpta;
        }
        });
        })(jQuery);

        Esa fue mi solución para que tomara en cuenta toda la grilla.

  11. Angel said

    PARA LO QUE QUIERAN CAMBIAR EL NOMBRE DEL ARCHIVO QUE SE QUIERE DESCARGAR
    nombreArchivo=o.nombre || ‘archivo-.xlsx’;
    var save = document.createElement(‘a’);
    save.href =xlsx(archivoExporta).href() ;save.target = ‘_blank’;save.download = nombreArchivo;
    var clicEvent = new MouseEvent(‘click’, {‘view’: window,’bubbles’: true,’cancelable’: true});
    save.dispatchEvent(clicEvent);
    (window.URL || window.webkitURL).revokeObjectURL(save.href);

  12. Angel said

    El xlsx.js permite dar estilos a las celdas como bold, italic??

  13. Oscar said

    perfecto! tengo otra version de jqgrid y solamente integré los archivos relacionados a la exportacion con excel y funciona excelente. Muchas gracias por el aporte

  14. Janire said

    Muchas gracias!!! Me ha funcionado muy bien en Firefox pero ahora lo tengo que hacer funcionar en IE y no hay manera. Alguien lo ha conseguido?

  15. lemur647 said

    Funciona perfecto pero quisiera saber como puedo hacer para exportar todos los registros. Solo se pueden exportar los de la pagina en la que uno se encuentra.
    Me gustaria exportarlo todo.

  16. Joan said

    excelente aporte, sin embargo, tengo una duda, como hago para que en las cabeceras de las columnas exportadas a Excel aparezca el nombre de la columna definido en colNames y no colModel, ¿podrían ayudarme?, gracias.

    • Joan said

      ya resolví mi propia duda🙂

      en el archivo jqgridExcelExportClientSide.js

      declarar la variable

      var columnNames = $(this).getGridParam(‘colNames’);

      y reemplazar la línea

      hojaExcel.push(nombreColumnas);

      por

      hojaExcel.push(columnNames);

      Saludos.

      J.

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

 
A %d blogueros les gusta esto: