Exportar tabla HTML a Excel con JavaScript

Excel generado a partir de tabla HTML con JavaScript y TableExport

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

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.

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

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

Deja un comentario

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