Exportar tabla html a Excel con jquery

En este post vamos a mostrar un ejemplo para exportar una tabla html con contenido a un Excel utilizando la librería jquery.

Lo primero que deberemos hacer al querer trabajar con jQuery es incluir su librería en el <head> de la siguiente forma:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Para este caso también necesitaremos incluir en el <head> el siguiente código jQuery:

<script language="javascript">
$(document).ready(function() {
	$(".botonExcel").click(function(event) {
		$("#datos_a_enviar").val( $("<div>").append( $("#Exportar_a_Excel").eq(0).clone()).html());
		$("#FormularioExportacion").submit();
});
});
</script>

Aquí lo que estamos indicando es que al hacer click en el elemento con class=”botonExcel” vamos a coger el contenido del elemento que tiene como id=”datos_a_enviar” añadiéndolo a los datos que transporta el formulario.

El formulario lógicamente deberá estar dentro de la etiqueta <body> y debe presentarse como sigue:

<form action="ficheroExcel.php" method="post" target="_blank" id="FormularioExportacion">
<p>Exportar a Excel  <img src="export_to_excel.gif" class="botonExcel" /></p>
<input type="hidden" id="datos_a_enviar" name="datos_a_enviar" />
</form>

Ahora deberemos prestar atención al action del formulario. Se ejecutará el archivo “ficheroExcel.php”. En este fichero php lo que hacemos es lo siguiente:

<?php
header("Content-type: application/vnd.ms-excel; name='excel'");
header("Content-Disposition: filename=ficheroExcel.xls");
header("Pragma: no-cache");
header("Expires: 0");

echo $_POST['datos_a_enviar'];
?>

En el cual lo que hacemos es crear el archivo excel con el nombre “ficheroExcel.xls” y escribimos los datos que envía el formulario que no son más que la tabla con id=”datos_a_enviar”.

<table width="50%" border="1" cellpadding="10" cellspacing="0" bordercolor="#666666" id="Exportar_a_Excel" style="border-collapse:collapse;">
   <tr>
      <td>Celda1</td>
      <td>Celda2</td>
      <td>Celda3</td>
      <td>Celda4</td>
      <td>Celda5</td>
   </tr>
   <tr>
      <td>Celda6</td>
      <td>Celda7</td>
      <td>Celda8</td>
      <td>Celda9</td>
      <td>Celda10</td>
   </tr>
</table>

Ver ejemplo en funcionamiento

Descargar ejemplo

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (15 votos, promedio: 4,80 de 5)
Cargando…
Comparte en las redes sociales

65 respuestas a “Exportar tabla html a Excel con jquery”

  1. Taker dice:

    Hola… si funciona el codigo so lo que encontre un detalle con los acentos… salen caracteres raros
    Hay una forma de quitarlos???
    lo intente con utf8 pero no me salio
    Gracias!

    • Jose Aguilar dice:

      Hola, que tal! acabo de realizar un exportación con acentos en el código de la tabla html y se me importa correctamente. Fíjiate como tienes la codificación de tu página, cambia el charset a iso-8859-1

      Espero se solucione,
      saludos

      • EDUARDO WERNER GUTH MENDOZA dice:

        Un favor… como puedo exportar 5 tablas de una mis pagina html… por separado y con id de tablas diferentes…
        ejemplo
        idexplample1 con su boton
        idexplample2 con su boton
        idexplample3 con su boton
        idexplample4 con su boton
        idexplample5 con su boton

    • kirochi dice:

      esta es la solucion

    • Ricardo Sandoval dice:

      Sí hay una forma, a mi me pasaba lo mismo, te la pongo a continuación:

  2. gEOVANNY dice:

    EL CODIGO ME FUNCIONA A LAS MIL MARAVILLAS, SOLO Q AL EXPORTAR CODIGOS, SE ME COME LOS 0 A LA IZQUIERDA

  3. kirochi dice:

    esta es la solucion

    <?php
    header(\"Content-type: application/vnd.ms-excel; name=\’excel\’\");
    header(\"Content-Disposition: filename=arquivoExcel.xls\");
    header(\"Pragma: no-cache\");
    header(\"Expires: 0);

    $dados_recebido = iconv(\’utf-8\’,\’iso-8859-1\’,$_POST[\’datos_a_enviar\’]);
    echo $dados_recebido;
    ?>

  4. Rafa dice:

    Como haría para exportar solamente la tabla si tengo otro contenido en mi sitio web? por ejemplo en mi sitio web, yo tengo una tabla con información de una base de datos, pero esta dentro de un y al exportar me trae todo el sitio web, no solo la tabla como yo quiero, como le hago para superar este problema? porque este ejemplo q’ ud tiene, esta muy bueno, pero es solo si esta la tabla sola y nada mas. Gracias de antemano por su ayuda.

  5. pedro dice:

    Saludos, porque en excel 2010 ya no respeta las celdas combinadas, y sale todo en una sola celda arrimado todo. agradeceria mucho tu respuesta.

  6. erick dice:

    me da una advertencia que el archivo tiene un formato diferente al especificado por la extension.
    alguien sabe porque pasa esto?

  7. zinetnorf dice:

    solamente me funciona con tablas pequeñas, si agrego mas de 100 registros en mi tabla ya no me funciona, intentare comprimiendo el HTML al hacer el submit… a alguien le sucede algo similar???

    • german dice:

      zinetnorf pudiste encontrar alguna solución a ese problema ya que no he podido exportar las tablas que necesito por eso mismo.

      Saludos

      • JOSE LOPEZ dice:

        Buen dia, yo tengo el mismo problema, me podrias indicar por favor si encontraste alguna solucion al respecto?, quedo atento y de antemano mil gracias.

  8. cesar dice:

    gigante amigo mil gracias me salvasteee!!

  9. Miguel Pumarino dice:

    Muchas gracias… funciono de maravilla….

  10. yme dice:

    si tengo imagenes en la tabla tambien las exporta, como le hago para que no exporte las imagenes??

  11. yme dice:

    si tengo imagenes en la tabla tambien las exporta, como le hago para que no exporte las imagenes, solamente quiero los datos.

  12. Rocio dice:

    Hola necesito de tu colaboración pues estoy intentando correr éste jquery utilizando cakePHP, pero no me ha funcionado no hace nada, nisiquiera muestra error…agradezco tu colaboración !

  13. Giovanny dice:

    Saludos, por favor como puedo pasar a excel contenido que digite en un input text??

    gracias por su tiempo

  14. Cristian dice:

    Hola amigos, tengo una consulta respecto a esto. lo que pasa que yo muestro los datos mediante un “JQGRID” y necesito pasar estos datos a un excel. Les pego mi código con el que muestro la grilla.

    var creaGrillaActivos = function(){
    jQuery(“#grillaListado”).jqGrid({
    url:’validaciones.php?accion=20&q=’+$(“#id_proyecto”).val(),
    datatype: “xml”,
    colNames:[
    ‘Descripcion’,
    ‘Nombre Etapa’,
    ‘Tarea Afectada’,
    ‘Dias Impacto’,
    ‘Dias Atraso’,
    ‘Fecha’,
    ‘Solucion’,
    ‘Fecha Solucion’,
    ‘Visibilidad’,
    ‘Estado’,
    ‘Opciones’],
    colModel:[
    {name:’descripcion’,index:’descripcion’, align:’left’, width:130, sortable:true, resizable:false, title:false},
    {name:’nombre_etapa’,index:’nombre_etapa’, align:’left’, width:440, sortable:true, resizable:false, title:false},
    {name:’tarea_afectada’,index:’tarea_afectada’, align:’center’, width:120, sortable:true, resizable:false, title:false},
    {name:’dias_impacto’,index:’dias_impacto’, align:’center’, width:110, sortable:true, resizable:false, title:false},
    {name:’dias_atraso’,index:’dias_atraso’, align:’center’, width:140, sortable:true, resizable:false, title:false},
    {name:’fecha_identificacion’,index:’fecha_identificacion’, align:’center’, width:160, sortable:true, resizable:false, title:false},
    {name:’solucion’,index:’solucion’, align:’center’, width:160, sortable:true, resizable:false, title:false},
    {name:’fecha_solucion’,index:’fecha_solucion’, align:’center’, width:160, sortable:true, resizable:false, title:false},
    {name:’ind_visibilidad’,index:’ind_visibilidad’, align:’center’, width:160, sortable:true, resizable:false, title:false},
    {name:’estado’,index:’estado’, align:’center’, width:160, sortable:true, resizable:false, title:false},
    {name:’opciones’,index:’opciones’, align:’center’, width:90, resizable:false}],
    shrinkToFit: true,
    rowNum:17,
    loadtext:’Cargando datos…’,
    height: “394”,
    hidegrid: false,
    //rowList:[10,20,30],
    ignoreCase:true,
    sortname: ‘descripcion’,
    viewrecords: false,
    pgbuttons:true,
    pgtext: null,
    recordtext: null,
    title:false,
    loadonce: true,
    sortorder: “asc”,
    caption:”Listado de Incidencias”,
    pager: ‘pagerListado’,

    //editurl:”validaciones.php?accion=16″,
    gridComplete: function(){
    var ids = jQuery(“#grillaListado”).jqGrid(‘getDataIDs’);
    for (var i=0;i < ids.length;i++){
    var cl = ids[i];
    de = "”;
    se = “”;
    jQuery(“#grillaListado”).jqGrid(‘setRowData’,ids[i],{opciones:se+de});
    }
    }
    }).navGrid(“#pagerListado”,{edit:false,add:false,del:false,excel:true, search:false, refresh:false}
    ).navButtonAdd(‘#pagerListado’,{

    caption:”Export to Excel”,
    buttonicon:”ui-icon-save”,
    onClickButton: function(){
    exportExcel();
    },
    position:”last”

    //}
    }

    );
    }

    Mi pregunta es que si me sirve tu código para mostrar los datos de mi grilla en el excel… alguien que me pueda ayudar, se los agradecería mucho.

  15. Ruben dice:

    Hola,

    quería comentar que para los acentos yo uso meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ en el HTML y luego hago echo(utf8_decode($_POST[‘datos_a_enviar’])); en el archivo php.

    También quiero preguntar que, como estoy utilizando class en los td class=’mi_clase’ en el excel no se ve, en cambio, utilizando el estilo directamente td style=’border: 1px solid red’ sí se ve.

    Alguna manera para solucionar esto y poder exportar con el excel las clases?

    Saludos

  16. juan carlos m dice:

    muy buen tutorial me funciona.
    solo una pregunta ¿como puedo hacer para que me muestre solo algunas columnas en especifico.?
    lo que pasa es que mi tabal tiene combobox y al momento de exportar me muestra los combos con todo y sus resultados y no puedo borrarlos desde Excel.
    ¿hay alguna forma de evitar que se exporten los combos o que queden ocultos?
    muchas gracias
    Saludos 🙂

  17. Johan Cabeza dice:

    Hola, buenas tardes, me pareció Excel-ente post, super sencillo, mi pregunta es:
    ¿Como haría para colocar a las celdas estilos y colores?
    Gracias.

    Muy buen aporte viejo!

    PD: Comparto mi blog de Diseño Web

    • Rogelio dice:

      Tienes que poner los colores con style=”backgroun:blue;” (por ejemplo), de esta manera además de exportar texto de la tabla, también te exportará los colores.

  18. Germán Jurado Cano dice:

    la mejor manera de evitar el problema con los caracteres especiales es agregar esta linea para php: $tildes = $conexion->query(“SET NAMES ‘utf8′”);

  19. pablo dice:

    Hola,

    Como puedo solucionar el tema de los 0 a la izquierda?. Es posible especificar que el formato de todas las celdas de excel sean de tipo texto

    Muchas gracias por el post.

    • Jose Aguilar dice:

      HOla,

      No lo he probado pero podrías probar de hacer un cast de la variable. Convertirla a string antes:

      $variable = (string)$variable;

      Saludos

      • pablo dice:

        Hola,

        Los resultados que recojo en la tabla vienen de una consulta a una base de datos telefonica, uno de los campos es extension y algunos registros vienen con 0 delante.

        Lo de convertir a string la variable, te refieres a la hora de recoger los datos de la base de datos.

        while( $row = odbc_fetch_array($instruccion) ) {
        echo(“”);
        echo(“”.$row[“Telefono”].””);
        echo(“”.$row[“Extension”].””);

        Muchas gracias.

  20. Mario dice:

    Hola Jose, quisiera preguntarte como se pueden poner títulos a las columnas en excel y por ultimo como se puede generar el archivo excel dentro de un zip

    Muchas Gracias !
    Sldos

  21. Mario dice:

    Hola Jose, mi pregunta es si se puede hacer algo para que no de ese aviso al abrir excel de que el formato no coincide y de que puede que el archivo no sea seguro. Si bien al darle continuar se abre la planilla y muestra la tabla sin problema, me gustaría que no apareciera ese aviso

    Muchas Gracias
    Sldos

  22. Susana dice:

    Hola José, tengo un problema:

    En localhost me funciona perfectamente, incluso me exporta con colores, imágenes y todo lo que requiero, pero cuando la subo a web ya no hace nada ni en explorer ni en Chrome. Me sale este error:

    Esta página no se puede mostrar

    •Asegúrate de que la dirección web http://MISITIO sea correcta.
    •Busca la página con tu motor de búsqueda.
    •Actualiza la página en unos minutos.

    ¿Sabes qué puede ser?
    Mi archivo LOG arroja esto:
    PHP Warning: Cannot modify header information – headers already sent by (output started at /MISITIO/print_excel.php:40)

    Mil gracias

    • Jose Aguilar dice:

      Hola buenas tardes,

      Por el error puede ser que tengas algún espacio o estés impriendo algo antes del código que emite ese error. Revisa que esté todo correcto. Siendo un Warning no creo que sea ese el problema. Tiene que haber otro problema que quizás no estés visualizando y que nosotros o cualquiera podría ver si nos facilitas la url del problema.

      Saludos

  23. dlcgetzemani dice:

    hola, tengo un problema no me genera nada, me podrias pasar el proyecto por favor, si no es mucha molestia.

  24. Eduardo dice:

    Me sirvio para lo que estaba ocupando y con un simple:

    se soluciono lo de los acentos etc. gracias

  25. anderson dice:

    No expota imagenes que puedo hacer?????’

  26. ernesto dice:

    Muchas gracias me funciona al 100% solo una duda… cuando abro los archivos me dice: el formato y la extensión del archivo no coinciden, puede que el archivo este dañado o no sea seguro. Aunque el archivo tiene el contenido que quiero solo que sale eso cuando lo abro…

  27. ernesto dice:

    La tengo muy parecida solo que traigo algunos datos de bd:

    Título
    Categoría
    Editorial
    Autor
    Fecha de registro

    sera por los echo ?

  28. Jaime Bedón dice:

    Hola José,
    Muchas Gracias por tu aporte en el mundo de programación.
    Una pregunta, hasta ayer funcionaba correctamente la exportación a excel desde hace dos años con tu ayuda. No se que pasó, pero ahora al querer abrir el archivo en todas las páginas da en blanco, no se si es el Jquery o algún parámetro en el fichero. He probado solamente con un dato en el echo “Prueba” y si me genera el excel

    • Jose Aguilar dice:

      Hola,

      Solo puedo recomendarte que hagas debug en el código hasta encontrar cual es el problema. Quizá algo se ha quedado desfasado.

      Saludos

    • Pedro Grandon dice:

      Hola Jose
      Me pasa lo mismo que indicas, los excel formados con tablas html ya no abren, sin haber hecho ningun cambio en el codigo. He probado con varios browser y me ocurre lo mismo. Si logras encontrar una solución te agradece la compartas.

  29. Diego Leon dice:

    Estoy utilizando el codigo y en la web solo funciona con cierta cantidad de registros, y lo que nesecito exportar son mas de 300 registros a la vez, hay alguna manera para q este codigo funcione para tablas a gran escala?

  30. Jesus Saldaña dice:

    Buenas, estoy buscando hacer el trabajo a la inversa, osea leer un archivo excel y tomar ciertos datos para insertarlos en el html, alguna ayudita por ahi? Gracias

  31. Wenceslao dice:

    URGENTE.
    Muchas gracias por el aporte.
    Funciona muy bien localmente.
    Pero al subir al servidor web (internet) me indica que la ruta es denegado por el servidor.

    Agradecería su ayuda, de antemano muchas gracias.

    Este es el mensaje:
    403
    Forbidden

    Access to this resource on the server is denied!

  32. hector mariel ramirez vazquez dice:

    hola a todos, a me funciona el codigo, sin embargo al momento de abrir el archivo que se descarga, me dice que el archivo esta dañado y no mepermite abrirlo, he notado que lo descarga como un archivo bloqueado.

    para abrirlo tengo que hacer clic derecho y click en desbloquear.

  33. sofia dice:

    hola, una consulta, me funciona, el problema es que al momento de exportar el excel me lo genera sin datos, ya que lo que estoy haciendo es un formulario :/

  34. Ronald Paico dice:

    Hola , jose , tengo un problema al exportar , sale vacio el excel

  35. Victor Manuel Hernandez dice:

    saludos,
    desearia descargar la libreria que manejas para el ejemplo,

  36. Geovanny Reyes dice:

    Estimado

    yo he utilizado muchas veces este codigo, y me funciona, ahora quiero usarlo nuevamente pero no me trae las caracteristicas de la tabla al excel (colores, tamaños, etc) que podria hacer para solucionar eso?

    Saludos

  37. ROW dice:

    Saludos, es una excelente publicación y me ayudo mucho funciona al 100%. Se que la publicación tiene ya algún tiempo, pero para quien le pueda interesar, el problema de los ceros a la izquierda lo resolví aplicando un estilo a la celda de la siguiente manera:

    .style0
    {
    mso-style-name:Normal;
    mso-style-id:0;
    }

    .xl65
    {
    mso-style-parent:style0;
    mso-number-format:”\@”;
    }

    y en la celda:
    Celda 10

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre