Exportar tabla HTML a Excel con JavaScript

Hoy os traigo una pequeña función para exportar fácilmente una tabla HTML a un fichero XLS de Excel con un simple método de JavaScript. En mi día a día como programador web, me encuentro con bastantes peticiones de los usuarios para que les habilite la posiblidad de exportar una tabla HTML que ven en la web a un fichero de Excel. 

En primer lugar os voy a mostrar el código de la función y después detallaremos el funcionamiento.

function ExportToExcel(htmlExport) {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");
    
    //other browser not tested on IE 11
    // If Internet Explorer
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
    {
        jQuery('body').append(" <iframe id=\"iframeExport\" style=\"display:none\"></iframe>");
        iframeExport.document.open("txt/html", "replace");
        iframeExport.document.write(htmlExport);
        iframeExport.document.close();
        iframeExport.focus();
        sa = iframeExport.document.execCommand("SaveAs", true, "List.xls");
    }
    else {      
        var link = document.createElement('a');
    
        document.body.appendChild(link); // Firefox requires the link to be in the body
        link.download = "List.xls";
        link.href = 'data:application/vnd.ms-excel,' + escape(htmlExport);
        link.click();
        document.body.removeChild(link);
    }
}

Como podéis ver, tenemos una función a la que pasamos el HTML que queremos pasar a un fichero de excel. Lo primero que se aprecia en la función es la distinción del navegador ya que dependiendo de cual estemos usando, la forma de proceder cambia.

En Internet Explorer, es necesario añadir un iframe al body de la página para que sea este el que lance la ventana que guarda el fichero.

En el resto de navegadores, basta con crear un enlace que genere la acción de guardar el fichero. En esta parte de la lógica he probado varias formas de proceder, pero he tenido problemas con la codificación de los caracteres o a la hora de nombrar el fichero.

También tenéis la posibilidad de personalizar el nombre del fichero xls que se va a generar con la tabla en HTML, podéis hacerlo modificando el valor «List.xls» en las siguientes líneas:

sa = iframeExport.document.execCommand("SaveAs", true, "List.xls"); 
...
link.download = "List.xls";

Aclarar también que el método escape() es un método propio de JavaScript.

Un ejemplo de como exportar una tabla HTML a Excel usando javascript

Supongamos que tenemos la siguiente tabla de HTML:

<table id="tabla">
   <tr>
      <td>Campo 1.1</td>
      <td>Campo 1.2</td>
      <td>Campo 1.3</td>
      <td>Campo 1.4</td>
      <td>Campo 1.5</td>
   </tr>
   <tr>
      <td>Campo 2.1</td>
      <td>Campo 2.2</td>
      <td>Campo 2.3</td>
      <td>Campo 2.4</td>
      <td>Campo 2.5</td>
   </tr>
</table>

Junto a esta tabla, añadimos un botón que llame a nuestra función ExportToExcel(htmlExport)

<input type="button" name="btnExportar" id="btnExportar" value="Exportar a Excel" 
onclick="ExportToExcel(jQuery('#tabla').prop("outerHTML"))" />

Como véis, el parámetro que pasamos a la función es todo el HTML de nuestra tabla. Para conseguirlo bastaría con obtener la propiedad outerHTML de nuestro elemento <table></table>.

Agradecería compartas con nosotros si conoces otra forma de hacer esta exportación. También nos sería de gran ayuda que dejes un comentario o envías esta información a tus conocidos como agradecimiento.