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

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

Relacionado:  Tomar foto de cámara web con Javascript, actualizado

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

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:

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

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:

Con el código de JavaScript:

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

Excel generado a partir de tabla HTML con JavaScript y TableExport

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.

Relacionado:  Prevenir envío de formulario con Enter

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

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


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 694 suscriptores


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/

5 Comments

Anguiano · julio 27, 2020 a las 3:51 pm

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

Akela · marzo 19, 2020 a las 12:47 am

Gracias por tu pronta respuesta. Tienes un email donde pueda escribirte?

Akela · marzo 18, 2020 a las 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

Deja un comentario

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

A %d blogueros les gusta esto: