Exportar tabla HTML a Excel con JavaScript

En este artículo vas a ver como exportar un tabla HTML con una serie de datos a un archivo Excel utilizando JavaScript puro y PHP. Sin uso de plugins ni frameworks para conseguirlo.

Para entender el concepto de este artículo es importante que tengas algunos conocimientos sobre PHP, JavaScript y HTML.

En el cuerpo de la página o dentro de la etiqueta <body> puedes crear una tabla con las típicas etiquetas que permiten mostrar una tabla en el HTML.

En el caso del ejemplo en funcionamiento tenemos algo como lo siguiente:

<table width="50%" border="1" cellpadding="10" cellspacing="0" bordercolor="#666666" id="export_to_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>

Es importante fijarse en el identificador de esta tabla «export_to_excel». Lo utilizo como clave para definir el contenido que quiero exportar al archivo Excel desde el código JavaScript.

En el <body> también puedes agregar un botón que permitirá ejecutar la acción. En el caso del ejemplo tenemos algo como lo siguiente:

<p>
    <a href="#" class="btn btn-primary" id="submitExport">
        <i class="fa fa-download"></i> Exportar a Excel
    </a>
</p>

Tan solo es un enlace en el que te debes fijar, principalmente, en el identificador «submitExport». Lo utilizo en el JavaScript para crear el evento para este botón.

También dentro del <body> puedes definir el formulario HTML. En el caso del ejemplo en funcionamiento he agregado:

<form action="process.php" method="post" target="_blank" id="formExport">
    <input type="hidden" id="data_to_send" name="data_to_send" />
</form>

Este pequeño formulario no es visible para el usuario pero si que se ejecutará cuando sea pulsado el botón «submitExport» que he creado previamente.

El campo oculto que hay dentro lo utilizo en el código JavaScript para depositar en él el contenido de la tabla que quiero trasladar al archivo Excel.

Presta atención al atributo action del formulario. Al enviarse se ejecutará el archivo proccess.php.

En este archivo PHP lo que hago es lo siguiente:

<?php
header("Content-type: application/vnd.ms-excel; name='excel'");
header("Content-Disposition: filename=archivo.xls");
header("Pragma: no-cache");
header("Expires: 0");
 
if (isset($_POST['data_to_send']) && $_POST['data_to_send'] != '') {
    echo $_POST['data_to_send'];
}
?>

Ahora solo te falta por descubrir el código más importante de este tutorial. El código JavaScript que ejecuta la acción que se enuncia en este artículo lo puedes ver a continuación:

document.getElementById('submitExport').addEventListener('click', function(e) {
    e.preventDefault();
    let export_to_excel = document.getElementById('export_to_excel');
    let data_to_send = document.getElementById('data_to_send');
    data_to_send.value = export_to_excel.outerHTML;
    document.getElementById('formExport').submit();
});

Este pequeño código lo que hace es esperar a que sea pulsado el botón con identificador «submitExport» para:

  • Prevenir el funcionamiento habitual de un enlace.
  • Recuperar el contenido que deseo trasladar al archivo Excel. En el caso del ejemplo es la tabla con identificador «export_to_excel».
  • El contenido HTML de la tabla lo deposito en el campo oculto del formulario con identificador «data_to_send».
  • Y, finalmente, envío el formulario desde el código JavaScript.

El formulario se encarga de ejecutar el código que hay en el archivo process.php. Este se encarga de crear el archivo Excel con los datos enviados utilizando PHP.

El código JavaScript lo ideal es incluirlo al final de la página antes de la etiqueta de cierre del </body> y en un archivo separado.

En el ejemplo en funcionamiento, lo estoy incluyendo así:

<script src="js/app.js"></script>

Ver demo Descargar

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 (20 votos, promedio: 4,85 de 5)
Cargando…
Comparte en las redes sociales

65 respuestas a “Exportar tabla HTML a Excel con JavaScript”

  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