javascript

Exportar tabla HTML a Excel con JavaScript

Resumen: en este post te mostraré cómo usar JavaScript del lado del cliente (no necesitas nada del servidor) para generar un documento de Excel (extensión xlsx) a partir del contenido de una tabla HTML.

Es decir, vamos a aprender cómo exportar a Excel desde JavaScript un simple elemento table de HTML usando la librería TableExport, permitiendo exportar desde la web una hoja de cálculo.

De este forma puedes exportar reportes o tablas creadas por un framework, a mano, del lado del servidor, o del cliente. Al final tendremos lo que se ve aquí.

Nota: esto es totalmente compatible con jQuery, pero no lo necesitas. Es decir, funciona con o sin jQuery.

Los scripts que hay que incluir

Necesitamos 3 scripts. El primero es el que permite exportar a Excel desde el navegador, el segundo permite crear archivos BLOB desde JavaScript y el tercer es la librería de TableExport.

Debes incluirlos desde donde gustes, yo los incluiré desde unpkg; para ello simplemente visita los siguientes enlaces y guarda los scripts:

XLSX: https://unpkg.com/xlsx@latest/dist/xlsx.full.min.js
FileSaver: https://unpkg.com/file-saverjs@latest/FileSaver.min.js
TableExport: https://unpkg.com/tableexport@latest/dist/js/tableexport.min.js

Los debes incluir en el head, así:

<head>
    <!--
    Debe ser en el orden que indico
    -->
    <script src="./js/xlsx.full.min.js"></script>
    <script src="./js/FileSaver.min.js"></script>
    <script src="./js/tableexport.min.js"></script>
</head>

Ahora ya podemos usar TableExport.

Diseñando la tabla a exportar

La tabla HTML que vamos a exportar a Excel

La tabla HTML que vamos a convertir a hoja de cálculo de Excel debe ser un simple elemento table. Puedes generarlo a mano, con un framework o como gustes, siempre y cuando exista.

Los estilos no importan, pues solo serán tomados en cuenta los datos. En mi caso tengo una tabla HTML así:

<table id="tabla">
    <thead>
        <tr>
            <th>Lenguaje</th>
            <th>Sitio web</th>
            <th>Algunos usos</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>PHP</td>
            <td>php.net</td>
            <td>Aplicaciones web</td>
        </tr>
        <tr>
            <td>Python</td>
            <td>python.org</td>
            <td>Aplicaciones web y de escritorio. Machine learning</td>
        </tr>
        <tr>
            <td>Go</td>
            <td>golang.org</td>
            <td>Aplicaciones web y de escritorio</td>
        </tr>
    </tbody>
</table>

Fíjate en que tiene un id, el cual es tabla. Es importante que tomes en cuenta ese id.

También le he dado unos estilos para que se vean los bordes.

Exportar tabla HTML a Excel

Ahora que tenemos la tabla pondremos un botón que va a exportarla. Se ve así:

<button id="btnExportar">Exportar</button>

En JavaScript vamos a recuperarlo usando querySelector, y además del botón, también recuperamos una referencia a la tabla. Después, agregamos un listener para cuando se haga click sobre el botón:

const $btnExportar = document.querySelector("#btnExportar"),
    $tabla = document.querySelector("#tabla");

$btnExportar.addEventListener("click", function() {
    // Aquí exportar la tabla
});

Y finalmente el código de la exportación queda así:

let tableExport = new TableExport($tabla, {
    exportButtons: false, // No queremos botones
    filename: "Mi tabla de Excel", //Nombre del archivo de Excel
    sheetname: "Mi tabla de Excel", //Título de la hoja
});
let datos = tableExport.getExportData();
let preferenciasDocumento = datos.tabla.xlsx;
tableExport.export2file(preferenciasDocumento.data, preferenciasDocumento.mimeType, preferenciasDocumento.filename, preferenciasDocumento.fileExtension, preferenciasDocumento.merges, preferenciasDocumento.RTL, preferenciasDocumento.sheetname);

En la línea 1 creamos una instancia de TableExport. Como primer argumento le indicamos el elemento del DOM, que es la tabla obtenida con querySelector.

El segundo argumento son las opciones, las cuales están comentadas y permiten personalizar el documento. La opción importante es la de exportButtons pues por defecto la librería coloca los 3 botones en el pie de la tabla y perdemos personalización, por eso la he dejado en false.

Después, en la línea 6 obtenemos los datos para exportar y en la línea 7 estamos especificando que queremos la tabla HTML exportada como xlsx (aquí podríamos elegir csv o txt)

Finalmente exportamos el archivo (export to file, export2file) en la línea 8, los argumentos son: data, mime, name, extension, merges, RTL, sheetname.

Eso ocasionará que se descargue el archivo generado.

Poniendo todo junto

Así que al final tenemos el siguiente código HTML:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Exportar tabla HTML a Excel</title>
        <script src="./js/xlsx.full.min.js"></script>
        <script src="./js/FileSaver.min.js"></script>
        <script src="./js/tableexport.min.js"></script>
        <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
        <h1>Tabla HTML a Excel</h1>
        <p>
            Exportar los datos de una tabla de una página web a una hoja de
            cálculo
            de Excel
            <br>
            <a href="//parzibyte.me/blog">By Parzibyte</a>
        </p>
        <button id="btnExportar">Exportar</button>
        <br>
        <br>
        <table id="tabla">
            <thead>
                <tr>
                    <th>Lenguaje</th>
                    <th>Sitio web</th>
                    <th>Algunos usos</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>PHP</td>
                    <td>php.net</td>
                    <td>Aplicaciones web</td>
                </tr>
                <tr>
                    <td>Python</td>
                    <td>python.org</td>
                    <td>Aplicaciones web y de escritorio. Machine learning</td>
                </tr>
                <tr>
                    <td>Go</td>
                    <td>golang.org</td>
                    <td>Aplicaciones web y de escritorio</td>
                </tr>
            </tbody>
        </table>
        <script src="./js/script.js"></script>
    </body>
</html>

Con el código de JavaScript:

const $btnExportar = document.querySelector("#btnExportar"),
    $tabla = document.querySelector("#tabla");

$btnExportar.addEventListener("click", function() {
    let tableExport = new TableExport($tabla, {
        exportButtons: false, // No queremos botones
        filename: "Mi tabla de Excel", //Nombre del archivo de Excel
        sheetname: "Mi tabla de Excel", //Título de la hoja
    });
    let datos = tableExport.getExportData();
    let preferenciasDocumento = datos.tabla.xlsx;
    tableExport.export2file(preferenciasDocumento.data, preferenciasDocumento.mimeType, preferenciasDocumento.filename, preferenciasDocumento.fileExtension, preferenciasDocumento.merges, preferenciasDocumento.RTL, preferenciasDocumento.sheetname);
});

Al exportar aparece la siguiente hoja de cálculo de Excel con extensión xlsx:

Y si no me crees, pruébalo por ti mismo aquí.

Conclusión y notas finales

Solo resta decir que encontrarás más en el repositorio oficial.

Si te interesa exportar excel pero ahora desde PHP, mira este post.

También puedes ver el código completo en GitHub.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Siguiente C - Conversión de Fahrenheit a Celsius y viceversa »

Anterior « Autocompletado AJAX con PHP y MySQL

Ver comentarios

Miguel Rodriguez dice:

agosto 11, 2023 en 9:32 am

Hola, ¿qué tal? me encantaría me apoyaras, sabes, deseo estar pasando la información de un formulario HTML a una hoja de Excel para llevar un registro de lo capturado, pero sin borrar lo anterior ya generado y se vaya agregando a la misma hoja de Excel.

Saludos
- parzibyte dice:
  
  agosto 11, 2023 en 11:47 am
  
  Hola. Claro que sí, con gusto le atiendo en https://parzibyte.me/#contacto
luis martinez dice:

junio 15, 2022 en 9:30 am

muchas gracias por la informacion, realmente funciona para tablas pequeñas, sin embargo en mi caso mi tabla consta de 1222 filas y 27 columnas se tarda demasiado un aproximado de 6 minutos, es demasiado para ms usuarios, prefieren copiar la tabla y pegarla en el exel directo pero gracias :)
- parzibyte dice:
  
  junio 15, 2022 en 10:03 am
  
  Entiendo. También depende de la velocidad de la computadora, entre mejores componentes tenga, menor será el tiempo. Igual y también se puede optimizar el código por ahí para hacerlo más rápido
  Saludos!
ANSELMO dice:

agosto 19, 2021 en 2:57 pm

Hola gracias por la información, muy útil. Una pregunta, tengo una tabla con imagenes, ¿Cómo se puede exportar esas imagenes al excel? Gracias nuevamente!
Rodrigo dice:

junio 24, 2021 en 8:42 pm

Ayudaaaaaaaaaaaa por favor! Porque a mi me sale Uncaught TypeError: Cannot read property 'xlsx' of undefined
- parzibyte dice:
  
  junio 24, 2021 en 11:31 pm
  
  Hola. Si tiene dudas específicas puede hacérmelas llegar en https://parzibyte.me/#contacto
  Saludos!
Nicolás dice:

diciembre 9, 2020 en 2:42 pm

Hola parzibyte, te agradezco la información, si bien me fue de mucha utilidad estuve intentando exportar el excel con la información distribuida en distintas hojas (sheetname) pero no pude lograrlo, sólo pude hacer que con el click en el botón de exportar me genere dos archivos excel pero no es la idea, en el respositorio de github no encontré mucha información al respecto, tenés idea de como podría resolverlo? muchas gracias!!
Anguiano dice:

julio 27, 2020 en 3:51 pm

y para darle Estilos (Colores, tamaños, imágenes) al excel como seria?
Akela dice:

marzo 19, 2020 en 12:47 am

Gracias por tu pronta respuesta. Tienes un email donde pueda escribirte?
- parzibyte dice:
  
  marzo 19, 2020 en 9:19 am
  
  Me puedes contactar en: https://parzibyte.me/blog/contacto/
Akela dice:

marzo 18, 2020 en 12:55 pm

Me ha servido de ayuda este ejemplo. Soy nueva en php y javascript.
Tengo un problemilla y queria saber como resolverlo. Tengo un fichero informe.js al cual se llama desde informe php, este genera un informe de alumnos. Estos ficheros me los pasan.
Ahora he creado un fichero index.html en el cual se ejecuta un .js. Estos ficheros son como los de vuestros ejemplos de aqui, vamos los mismo.
Mi problema es que en lugar de tener la tabla que ustedes poneis en el .html, quiero q coja los datos q devuelve la tabla que hay en el fichero informe.php y por mas que intento no consigo saber como puedo cogerlos.
Alguna idea?. Gracias
- parzibyte dice:
  
  marzo 18, 2020 en 1:24 pm
  
  Cómo te están pasando los datos? los consumes desde una API o en el PHP los insertas directamente en JavaScript? si tienes PHP tal vez te conviene crear la tabla con Excel en el lado del servidor: https://parzibyte.me/blog/2018/11/08/crear-archivo-excel-php-phpspreadsheet/
  Saludos :)