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:

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

Los debes incluir en el head, así:

See the gist on github.

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í:

See the gist on github.

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í:

See the gist on github.

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:

See the gist on github.

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

See the gist on github.

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:

See the gist on github.

Con el código de JavaScript:

See the gist on github.

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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

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/

Ver comentarios

  • 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

  • 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 :)

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

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

  • Ayudaaaaaaaaaaaa por favor! Porque a mi me sale Uncaught TypeError: Cannot read property 'xlsx' of undefined

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

  • 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

Entradas recientes

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

5 días hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

6 días hace

Imprimir PDF generado con HTML

Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…

7 días hace

JavaScript: llenar select con arreglo

En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…

2 semanas hace

Imprimir PDF a partir de URL

En este artículo se presenta una guía para imprimir un PDF a partir de una…

2 semanas hace

Imprimir PDF a partir de base64

En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…

2 semanas hace

Esta web usa cookies.