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 - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (17 votos, promedio: 4,82 de 5)
Cargando…
Comparte en las redes sociales

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

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

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

  3. Victor Manuel Hernandez dice:

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

  4. Ronald Paico dice:

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

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

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

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

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