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!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Buenas tardes José, trato de implementar el código pero me sale este error:
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\EGP\backoffice\vistas\paginas\modulos\menu.php:1) in C:\xampp\htdocs\EGP\backoffice\vistas\paginas\process.php on line 2
te agradezco la ayuda que puedas brindarme
Hola Susana,
Necesitaría ver tu ejemplo en línea para ver si fuera posible encontrar una solución rápida.
saludos
Hola José buenas, estoy probando de usar la exportación y logré incluirlo en una consulta de un datatable, el problema que tengo es que al exportar sólo me exporta los registros de la primera página, por ejemplo la tabla se muestra de 10 en 10 y tengo 35 registros.
Cómo hago para que se exporte toda la consulta. Saludos y gracias.
Hola, entiendo que este script no se si te servirá ya que solo va a exportar lo que esté visible. Puedes usar otra alternativa como hacer la exportación con PHP.
Cuando lo mando a excel,se manda vacio. Y es que esto que estoy haciendo es como un tipo formulario
¿Podrían ayudarme por favor?
Hola,
Envía un mensaje a:
https://www.jamodules.com/prestashop-addons/es/soporte
Para que puedan atender tu petición.
Saludos
Excelente, pero es posible que vaya agregando datos en el archivo ya existente en la siguiente fila en blanco cada que se ejecute?
Hola,
No estoy seguro pero de entrada diría que no creo. Puedes generar todo el contenido de nuevo cada vez que se ejecute, no?
Saludos
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?
Buenas, estoy buscando hacer el trabajo a la inversa, osea leer un archivo excel y tomar ciertos datos para insertarlos en el html, alguna ayudita por ahi? Gracias
Estoy utilizando el codigo y en la web solo funciona con cierta cantidad de registros, y lo que nesecito exportar son mas de 300 registros a la vez, hay alguna manera para q este codigo funcione para tablas a gran escala?
Hola José,
Muchas Gracias por tu aporte en el mundo de programación.
Una pregunta, hasta ayer funcionaba correctamente la exportación a excel desde hace dos años con tu ayuda. No se que pasó, pero ahora al querer abrir el archivo en todas las páginas da en blanco, no se si es el Jquery o algún parámetro en el fichero. He probado solamente con un dato en el echo «Prueba» y si me genera el excel
Hola,
Solo puedo recomendarte que hagas debug en el código hasta encontrar cual es el problema. Quizá algo se ha quedado desfasado.
Saludos
Hola Jose
Me pasa lo mismo que indicas, los excel formados con tablas html ya no abren, sin haber hecho ningun cambio en el codigo. He probado con varios browser y me ocurre lo mismo. Si logras encontrar una solución te agradece la compartas.
La tengo muy parecida solo que traigo algunos datos de bd:
Título
Categoría
Editorial
Autor
Fecha de registro
sera por los echo ?
Muchas gracias me funciona al 100% solo una duda… cuando abro los archivos me dice: el formato y la extensión del archivo no coinciden, puede que el archivo este dañado o no sea seguro. Aunque el archivo tiene el contenido que quiero solo que sale eso cuando lo abro…
Hola,
Intenta revisar el contenido de las celdas que sea lo más limpio posible a ver si fuera ese el problema.
Saludos
No expota imagenes que puedo hacer?????’
dudo mucho que sea posible. Que quieres exportar la imagen o la url de la imagen. Quizá la url de la imagen si que sea posible haciendo algún truco
Me sirvio para lo que estaba ocupando y con un simple:
se soluciono lo de los acentos etc. gracias
hola, tengo un problema no me genera nada, me podrias pasar el proyecto por favor, si no es mucha molestia.
Hola buenas tardes,
Te hemos preparado un archivo comprimido para que se pueda descargar.
Descarga Ejemplo exportar a excel
Saludos
Hola José, tengo un problema:
En localhost me funciona perfectamente, incluso me exporta con colores, imágenes y todo lo que requiero, pero cuando la subo a web ya no hace nada ni en explorer ni en Chrome. Me sale este error:
Esta página no se puede mostrar
•Asegúrate de que la dirección web http://MISITIO sea correcta.
•Busca la página con tu motor de búsqueda.
•Actualiza la página en unos minutos.
¿Sabes qué puede ser?
Mi archivo LOG arroja esto:
PHP Warning: Cannot modify header information – headers already sent by (output started at /MISITIO/print_excel.php:40)
Mil gracias
Hola buenas tardes,
Por el error puede ser que tengas algún espacio o estés impriendo algo antes del código que emite ese error. Revisa que esté todo correcto. Siendo un Warning no creo que sea ese el problema. Tiene que haber otro problema que quizás no estés visualizando y que nosotros o cualquiera podría ver si nos facilitas la url del problema.
Saludos
Hola Jose, mi pregunta es si se puede hacer algo para que no de ese aviso al abrir excel de que el formato no coincide y de que puede que el archivo no sea seguro. Si bien al darle continuar se abre la planilla y muestra la tabla sin problema, me gustaría que no apareciera ese aviso
Muchas Gracias
Sldos
Hola Jose, quisiera preguntarte como se pueden poner títulos a las columnas en excel y por ultimo como se puede generar el archivo excel dentro de un zip
Muchas Gracias !
Sldos
Hola,
Los títulos quizás los puedas poner en el primer tr con un strong por ejemplo para diferenciarlos y luego para comprimir el archivo tendrás que utilizar algo como lo que tenemos en este post:
http://www.jose-aguilar.com/blog/comprimir-y-descomprimir-archivos-zip-con-ziparchive-php/
o
http://www.jose-aguilar.com/blog/comprimir-y-descomprimir-archivos-zip-con-libreria-pclzip/
Espero haberte ayudado,
Saludos
Hola,
Como puedo solucionar el tema de los 0 a la izquierda?. Es posible especificar que el formato de todas las celdas de excel sean de tipo texto
Muchas gracias por el post.
HOla,
No lo he probado pero podrías probar de hacer un cast de la variable. Convertirla a string antes:
$variable = (string)$variable;
Saludos
Hola,
Los resultados que recojo en la tabla vienen de una consulta a una base de datos telefonica, uno de los campos es extension y algunos registros vienen con 0 delante.
Lo de convertir a string la variable, te refieres a la hora de recoger los datos de la base de datos.
while( $row = odbc_fetch_array($instruccion) ) {
echo(«»);
echo(«».$row[«Telefono»].»»);
echo(«».$row[«Extension»].»»);
Muchas gracias.
la mejor manera de evitar el problema con los caracteres especiales es agregar esta linea para php: $tildes = $conexion->query(«SET NAMES ‘utf8′»);
Gracias por la aportación
Hola, buenas tardes, me pareció Excel-ente post, super sencillo, mi pregunta es:
¿Como haría para colocar a las celdas estilos y colores?
Gracias.
Muy buen aporte viejo!
PD: Comparto mi blog de Diseño Web
Tienes que poner los colores con style=»backgroun:blue;» (por ejemplo), de esta manera además de exportar texto de la tabla, también te exportará los colores.
muy buen tutorial me funciona.
solo una pregunta ¿como puedo hacer para que me muestre solo algunas columnas en especifico.?
lo que pasa es que mi tabal tiene combobox y al momento de exportar me muestra los combos con todo y sus resultados y no puedo borrarlos desde Excel.
¿hay alguna forma de evitar que se exporten los combos o que queden ocultos?
muchas gracias
Saludos 🙂
Hola,
quería comentar que para los acentos yo uso meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ en el HTML y luego hago echo(utf8_decode($_POST[‘datos_a_enviar’])); en el archivo php.
También quiero preguntar que, como estoy utilizando class en los td class=’mi_clase’ en el excel no se ve, en cambio, utilizando el estilo directamente td style=’border: 1px solid red’ sí se ve.
Alguna manera para solucionar esto y poder exportar con el excel las clases?
Saludos
Hola amigos, tengo una consulta respecto a esto. lo que pasa que yo muestro los datos mediante un «JQGRID» y necesito pasar estos datos a un excel. Les pego mi código con el que muestro la grilla.
var creaGrillaActivos = function(){
jQuery(«#grillaListado»).jqGrid({
url:’validaciones.php?accion=20&q=’+$(«#id_proyecto»).val(),
datatype: «xml»,
colNames:[
‘Descripcion’,
‘Nombre Etapa’,
‘Tarea Afectada’,
‘Dias Impacto’,
‘Dias Atraso’,
‘Fecha’,
‘Solucion’,
‘Fecha Solucion’,
‘Visibilidad’,
‘Estado’,
‘Opciones’],
colModel:[
{name:’descripcion’,index:’descripcion’, align:’left’, width:130, sortable:true, resizable:false, title:false},
{name:’nombre_etapa’,index:’nombre_etapa’, align:’left’, width:440, sortable:true, resizable:false, title:false},
{name:’tarea_afectada’,index:’tarea_afectada’, align:’center’, width:120, sortable:true, resizable:false, title:false},
{name:’dias_impacto’,index:’dias_impacto’, align:’center’, width:110, sortable:true, resizable:false, title:false},
{name:’dias_atraso’,index:’dias_atraso’, align:’center’, width:140, sortable:true, resizable:false, title:false},
{name:’fecha_identificacion’,index:’fecha_identificacion’, align:’center’, width:160, sortable:true, resizable:false, title:false},
{name:’solucion’,index:’solucion’, align:’center’, width:160, sortable:true, resizable:false, title:false},
{name:’fecha_solucion’,index:’fecha_solucion’, align:’center’, width:160, sortable:true, resizable:false, title:false},
{name:’ind_visibilidad’,index:’ind_visibilidad’, align:’center’, width:160, sortable:true, resizable:false, title:false},
{name:’estado’,index:’estado’, align:’center’, width:160, sortable:true, resizable:false, title:false},
{name:’opciones’,index:’opciones’, align:’center’, width:90, resizable:false}],
shrinkToFit: true,
rowNum:17,
loadtext:’Cargando datos…’,
height: «394»,
hidegrid: false,
//rowList:[10,20,30],
ignoreCase:true,
sortname: ‘descripcion’,
viewrecords: false,
pgbuttons:true,
pgtext: null,
recordtext: null,
title:false,
loadonce: true,
sortorder: «asc»,
caption:»Listado de Incidencias»,
pager: ‘pagerListado’,
//editurl:»validaciones.php?accion=16″,
gridComplete: function(){
var ids = jQuery(«#grillaListado»).jqGrid(‘getDataIDs’);
for (var i=0;i < ids.length;i++){
var cl = ids[i];
de = "»;
se = «»;
jQuery(«#grillaListado»).jqGrid(‘setRowData’,ids[i],{opciones:se+de});
}
}
}).navGrid(«#pagerListado»,{edit:false,add:false,del:false,excel:true, search:false, refresh:false}
).navButtonAdd(‘#pagerListado’,{
caption:»Export to Excel»,
buttonicon:»ui-icon-save»,
onClickButton: function(){
exportExcel();
},
position:»last»
//}
}
);
}
Mi pregunta es que si me sirve tu código para mostrar los datos de mi grilla en el excel… alguien que me pueda ayudar, se los agradecería mucho.
Saludos, por favor como puedo pasar a excel contenido que digite en un input text??
gracias por su tiempo
Hola necesito de tu colaboración pues estoy intentando correr éste jquery utilizando cakePHP, pero no me ha funcionado no hace nada, nisiquiera muestra error…agradezco tu colaboración !
Ya descargaste la libreria??? yo tenia el mismo problema y me faltaba descargarla.
si tengo imagenes en la tabla tambien las exporta, como le hago para que no exporte las imagenes, solamente quiero los datos.
si tengo imagenes en la tabla tambien las exporta, como le hago para que no exporte las imagenes??
me imagino que tendrás que mirar la forma de quitarlas mediante jquery antes de realizar la exportación.
Muchas gracias… funciono de maravilla….
gigante amigo mil gracias me salvasteee!!
solamente me funciona con tablas pequeñas, si agrego mas de 100 registros en mi tabla ya no me funciona, intentare comprimiendo el HTML al hacer el submit… a alguien le sucede algo similar???
zinetnorf pudiste encontrar alguna solución a ese problema ya que no he podido exportar las tablas que necesito por eso mismo.
Saludos
Buen dia, yo tengo el mismo problema, me podrias indicar por favor si encontraste alguna solucion al respecto?, quedo atento y de antemano mil gracias.
me da una advertencia que el archivo tiene un formato diferente al especificado por la extension.
alguien sabe porque pasa esto?
Saludos, porque en excel 2010 ya no respeta las celdas combinadas, y sale todo en una sola celda arrimado todo. agradeceria mucho tu respuesta.
Como haría para exportar solamente la tabla si tengo otro contenido en mi sitio web? por ejemplo en mi sitio web, yo tengo una tabla con información de una base de datos, pero esta dentro de un y al exportar me trae todo el sitio web, no solo la tabla como yo quiero, como le hago para superar este problema? porque este ejemplo q’ ud tiene, esta muy bueno, pero es solo si esta la tabla sola y nada mas. Gracias de antemano por su ayuda.
NO lo he probado pero posiblemente necesites incorporarle un identificar a la tabla que quieras exportar y de alguna manera cogerlo en el jquery
esta es la solucion
<?php
header(\"Content-type: application/vnd.ms-excel; name=\’excel\’\");
header(\"Content-Disposition: filename=arquivoExcel.xls\");
header(\"Pragma: no-cache\");
header(\"Expires: 0);
$dados_recebido = iconv(\’utf-8\’,\’iso-8859-1\’,$_POST[\’datos_a_enviar\’]);
echo $dados_recebido;
?>
Thx for the iconv function!
hola que tal, muchas gracias por la funcion, me trabajo muy bien. solo que tuve que modificar un poco la sintaxis.
saludos
HOLA si no es mucha molestia podrías pasarme la function para los caracteres especiales con las modificaciones de sintaxis? Gracias
EL CODIGO ME FUNCIONA A LAS MIL MARAVILLAS, SOLO Q AL EXPORTAR CODIGOS, SE ME COME LOS 0 A LA IZQUIERDA
Hola… si funciona el codigo so lo que encontre un detalle con los acentos… salen caracteres raros
Hay una forma de quitarlos???
lo intente con utf8 pero no me salio
Gracias!
Hola, que tal! acabo de realizar un exportación con acentos en el código de la tabla html y se me importa correctamente. Fíjiate como tienes la codificación de tu página, cambia el charset a iso-8859-1
Espero se solucione,
saludos
Un favor… como puedo exportar 5 tablas de una mis pagina html… por separado y con id de tablas diferentes…
ejemplo
idexplample1 con su boton
idexplample2 con su boton
idexplample3 con su boton
idexplample4 con su boton
idexplample5 con su boton
Hola,
Dejaremos la pregunta abierta por si alguien lo sabe.
Saludos
esta es la solucion
Sí hay una forma, a mi me pasaba lo mismo, te la pongo a continuación: