Exportar tabla HTML a Excel con JavaScript
En este artículo vas a ver como exportar un tabla HTML con una serie de datos a un archivo Excel utilizando JavaScript puro y PHP. Sin uso de plugins ni frameworks para conseguirlo.
Para entender el concepto de este artículo es importante que tengas algunos conocimientos sobre PHP, JavaScript y HTML.
En el cuerpo de la página o dentro de la etiqueta <body> puedes crear una tabla con las típicas etiquetas que permiten mostrar una tabla en el HTML.
En el caso del ejemplo en funcionamiento tenemos algo como lo siguiente:
<table width="50%" border="1" cellpadding="10" cellspacing="0" bordercolor="#666666" id="export_to_excel" style="border-collapse:collapse;">
<tr>
<td>Celda1</td>
<td>Celda2</td>
<td>Celda3</td>
<td>Celda4</td>
<td>Celda5</td>
</tr>
<tr>
<td>Celda6</td>
<td>Celda7</td>
<td>Celda8</td>
<td>Celda9</td>
<td>Celda10</td>
</tr>
</table>Es importante fijarse en el identificador de esta tabla «export_to_excel». Lo utilizo como clave para definir el contenido que quiero exportar al archivo Excel desde el código JavaScript.
En el <body> también puedes agregar un botón que permitirá ejecutar la acción. En el caso del ejemplo tenemos algo como lo siguiente:
Tan solo es un enlace en el que te debes fijar, principalmente, en el identificador «submitExport». Lo utilizo en el JavaScript para crear el evento para este botón.
También dentro del <body> puedes definir el formulario HTML. En el caso del ejemplo en funcionamiento he agregado:
Este pequeño formulario no es visible para el usuario pero si que se ejecutará cuando sea pulsado el botón «submitExport» que he creado previamente.
El campo oculto que hay dentro lo utilizo en el código JavaScript para depositar en él el contenido de la tabla que quiero trasladar al archivo Excel.
Presta atención al atributo action del formulario. Al enviarse se ejecutará el archivo proccess.php.
En este archivo PHP lo que hago es lo siguiente:
Ahora solo te falta por descubrir el código más importante de este tutorial. El código JavaScript que ejecuta la acción que se enuncia en este artículo lo puedes ver a continuación:
document.getElementById('submitExport').addEventListener('click', function(e) {
e.preventDefault();
let export_to_excel = document.getElementById('export_to_excel');
let data_to_send = document.getElementById('data_to_send');
data_to_send.value = export_to_excel.outerHTML;
document.getElementById('formExport').submit();
});Este pequeño código lo que hace es esperar a que sea pulsado el botón con identificador «submitExport» para:
- Prevenir el funcionamiento habitual de un enlace.
- Recuperar el contenido que deseo trasladar al archivo Excel. En el caso del ejemplo es la tabla con identificador «export_to_excel».
- El contenido HTML de la tabla lo deposito en el campo oculto del formulario con identificador «data_to_send».
- Y, finalmente, envío el formulario desde el código JavaScript.
El formulario se encarga de ejecutar el código que hay en el archivo process.php. Este se encarga de crear el archivo Excel con los datos enviados utilizando PHP.
El código JavaScript lo ideal es incluirlo al final de la página antes de la etiqueta de cierre del </body> y en un archivo separado.
En el ejemplo en funcionamiento, lo estoy incluyendo así:
Autor
Te ha servido? Valora esta entrada!
(20 votos, promedio: 4,85 de 5)
Cargando…
(4 votos, promedio: 3,75 de 5)
Localmente funciona bien pero en el hosting dice 404 … Podrías ayudarme con ese dilema ..?! Gracias de antemano
Hola,
Revisa el log de errores para ver que está ocurriendo en tu servidor y nos lo comentas.
Saludos
Eres grande, gracias …!!!
hola como hago para que omitir una fila de datos por ejemplo, tengo una tabla y tiene una fila con un botón entonces al momento de importar a excel me aparece el campo con el botón
Hola,
Tienes que buscar en Internet una opción que permite evitar la impresión de algunos elementos del HTML. Tengo entendido que es posible.
Saludos
Saludos, es una excelente publicación y me ayudo mucho funciona al 100%. Se que la publicación tiene ya algún tiempo, pero para quien le pueda interesar, el problema de los ceros a la izquierda lo resolví aplicando un estilo a la celda de la siguiente manera:
.style0
{
mso-style-name:Normal;
mso-style-id:0;
}
.xl65
{
mso-style-parent:style0;
mso-number-format:»\@»;
}
y en la celda:
Celda 10
Estimado
yo he utilizado muchas veces este codigo, y me funciona, ahora quiero usarlo nuevamente pero no me trae las caracteristicas de la tabla al excel (colores, tamaños, etc) que podria hacer para solucionar eso?
Saludos
Hola buenos días,
Para este tipo de ayudas que se salen de lo que hay en el blog debe enviarnos un ticket al centro de soporte y allí le indicaremos como podemos proceder:
https://www.jose-aguilar.com/soporte/
Saludos
saludos,
desearia descargar la libreria que manejas para el ejemplo,
Puedes descargar el ejemplo completo desde -> https://www.jose-aguilar.com/scripts/jquery/Excel/Excel.zip
Hola , jose , tengo un problema al exportar , sale vacio el excel
hola, una consulta, me funciona, el problema es que al momento de exportar el excel me lo genera sin datos, ya que lo que estoy haciendo es un formulario :/
Sofia solucionaste tu problema?
hola a todos, a me funciona el codigo, sin embargo al momento de abrir el archivo que se descarga, me dice que el archivo esta dañado y no mepermite abrirlo, he notado que lo descarga como un archivo bloqueado.
para abrirlo tengo que hacer clic derecho y click en desbloquear.
URGENTE.
Muchas gracias por el aporte.
Funciona muy bien localmente.
Pero al subir al servidor web (internet) me indica que la ruta es denegado por el servidor.
Agradecería su ayuda, de antemano muchas gracias.
Este es el mensaje:
403
Forbidden
Access to this resource on the server is denied!
Parece ser un problema de permisos, puede ser?