JQGrid exportar a Excel

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);

27 comentarios sobre “JQGrid exportar a Excel

  1. 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 !!!

  2. 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?

  3. 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.

  4. 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

  5. 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

  6. 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.

      1. 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.

      2. (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.

  7. 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);

    1. Muchas gracias, muy útil.
      Solo agregar que para que funcione todo ok deben reemplazar dicho código en el lugar que salía:
      return window.location = xlsx(archivoExporta).href();

  8. 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

  9. 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?

  10. 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.

  11. 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.

    1. 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 )

Google photo

Estás comentando usando tu cuenta de Google. 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 )

Conectando a %s