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:

<p>
    <a href="#" class="btn btn-primary" id="submitExport">
        <i class="fa fa-download"></i> Exportar a Excel
    </a>
</p>

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:

<form action="process.php" method="post" target="_blank" id="formExport">
    <input type="hidden" id="data_to_send" name="data_to_send" />
</form>

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:

<?php
header("Content-type: application/vnd.ms-excel; name='excel'");
header("Content-Disposition: filename=archivo.xls");
header("Pragma: no-cache");
header("Expires: 0");
 
if (isset($_POST['data_to_send']) && $_POST['data_to_send'] != '') {
    echo $_POST['data_to_send'];
}
?>

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

<script src="js/app.js"></script>

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(21 votos, promedio: 5 de 5)
Comparte en las redes sociales

72 respuestas a “Exportar tabla HTML a Excel con JavaScript”

  1. Paralax dice:

    Excelente, pero es posible que vaya agregando datos en el archivo ya existente en la siguiente fila en blanco cada que se ejecute?

  2. Paola dice:

    Localmente funciona bien pero en el hosting dice 404 … Podrías ayudarme con ese dilema ..?! Gracias de antemano

  3. Jessy dice:

    Eres grande, gracias …!!!

  4. Marlio de jesus sarmiento julio dice:

    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

  5. ROW dice:

    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

  6. Geovanny Reyes dice:

    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

  7. Victor Manuel Hernandez dice:

    saludos,
    desearia descargar la libreria que manejas para el ejemplo,

  8. Ronald Paico dice:

    Hola , jose , tengo un problema al exportar , sale vacio el excel

  9. sofia dice:

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

  10. hector mariel ramirez vazquez dice:

    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.

  11. Wenceslao dice:

    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!

  12. Jesus Saldaña dice:

    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

  13. Diego Leon dice:

    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?

  14. Jaime Bedón dice:

    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

    • Jose Aguilar dice:

      Hola,

      Solo puedo recomendarte que hagas debug en el código hasta encontrar cual es el problema. Quizá algo se ha quedado desfasado.

      Saludos

    • Pedro Grandon dice:

      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.

  15. ernesto dice:

    La tengo muy parecida solo que traigo algunos datos de bd:

    Título
    Categoría
    Editorial
    Autor
    Fecha de registro

    sera por los echo ?

  16. ernesto dice:

    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…

  17. anderson dice:

    No expota imagenes que puedo hacer?????’

  18. Eduardo dice:

    Me sirvio para lo que estaba ocupando y con un simple:

    se soluciono lo de los acentos etc. gracias

  19. dlcgetzemani dice:

    hola, tengo un problema no me genera nada, me podrias pasar el proyecto por favor, si no es mucha molestia.

  20. Susana dice:

    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

    • Jose Aguilar dice:

      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

  21. Mario dice:

    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

  22. Mario dice:

    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

  23. pablo dice:

    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.

    • Jose Aguilar dice:

      HOla,

      No lo he probado pero podrías probar de hacer un cast de la variable. Convertirla a string antes:

      $variable = (string)$variable;

      Saludos

      • pablo dice:

        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.

  24. Germán Jurado Cano dice:

    la mejor manera de evitar el problema con los caracteres especiales es agregar esta linea para php: $tildes = $conexion->query(«SET NAMES ‘utf8′»);

  25. Johan Cabeza dice:

    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

    • Rogelio dice:

      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.

  26. juan carlos m dice:

    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 🙂

  27. Ruben dice:

    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

  28. Cristian dice:

    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.

  29. Giovanny dice:

    Saludos, por favor como puedo pasar a excel contenido que digite en un input text??

    gracias por su tiempo

  30. Rocio dice:

    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 !

  31. yme dice:

    si tengo imagenes en la tabla tambien las exporta, como le hago para que no exporte las imagenes, solamente quiero los datos.

  32. yme dice:

    si tengo imagenes en la tabla tambien las exporta, como le hago para que no exporte las imagenes??

  33. Miguel Pumarino dice:

    Muchas gracias… funciono de maravilla….

  34. cesar dice:

    gigante amigo mil gracias me salvasteee!!

  35. zinetnorf dice:

    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???

    • german dice:

      zinetnorf pudiste encontrar alguna solución a ese problema ya que no he podido exportar las tablas que necesito por eso mismo.

      Saludos

      • JOSE LOPEZ dice:

        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.

  36. erick dice:

    me da una advertencia que el archivo tiene un formato diferente al especificado por la extension.
    alguien sabe porque pasa esto?

  37. pedro dice:

    Saludos, porque en excel 2010 ya no respeta las celdas combinadas, y sale todo en una sola celda arrimado todo. agradeceria mucho tu respuesta.

  38. Rafa dice:

    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.

  39. kirochi dice:

    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;
    ?>

  40. gEOVANNY dice:

    EL CODIGO ME FUNCIONA A LAS MIL MARAVILLAS, SOLO Q AL EXPORTAR CODIGOS, SE ME COME LOS 0 A LA IZQUIERDA

  41. Taker dice:

    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!

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre