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.
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:
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.
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.
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.
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í.
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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
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
Hola. Claro que sí, con gusto le atiendo en https://parzibyte.me/#contacto
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. Si tiene dudas específicas puede hacérmelas llegar en https://parzibyte.me/#contacto
Saludos!
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!!
y para darle Estilos (Colores, tamaños, imágenes) al excel como seria?
Gracias por tu pronta respuesta. Tienes un email donde pueda escribirte?
Me puedes contactar en: https://parzibyte.me/blog/contacto/
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
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 :)