Exportar la información de una tabla a Excel mediante Javascript

Exportar información a Excel es una operación la mar de útil en toda aplicación que liste datos. La función de exportación te ayuda a descargar un listado de datos en un archivo para su uso offline. El formato Excel es ideal a la hora de exportar información. Por norma general, se suele utilizar programación del lado del servidor para exportar datos, casi siempre PHP. Pero si deseas utilizar una solución del lado del cliente para exportar la información de una tabla a un fichero Excel, puedes hacerlo de forma sencilla con Javascript.

Exportar información del lado del cliente hace que la aplicación sea más sencilla de utilizar. Utilizando Javascript, se pueden exportar de forma sencilla los datos de una tabla HTML sin necesidad de actualizar la página. En este tutorial te mostraremos cómo exportar los datos de una tabla HTML a Excel utilizando Javascript. Esta función se puede utilizar a la hora de listar usuarios, productos y demás...

Exportar los datos de una tabla HTML a Excel

Código Javascript

La función exportTableToExcel() convierte los datos de una tabla HTML a Excel, en concreto a un fichero XLS (.xls).

• tableID – Obligatorio. Define el ID de la tabla HTML a exportar.
• filename – Opcional. Define el nombre del fichero en el que verteremos la información.

function exportTableToExcel(tableID, filename = ''){
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
    
    // Specify file name
    filename = filename?filename+'.xls':'excel_data.xls';
    
    // Create download link element
    downloadLink = document.createElement("a");
    
    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        // Create a link to the file
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
    
        // Setting the file name
        downloadLink.download = filename;
        
        //triggering the function
        downloadLink.click();
    }
}

Tabla HTML

La tabla HTML contiene la información de unos cuantos usuarios con campos básicos como nombre, email y país.

<table id="tblData">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>[email protected]</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Michael Addison</td>
        <td>[email protected]</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Sam Farmer</td>
        <td>[email protected]</td>
        <td>France</td>
    </tr>
</table>

El botón ejecutará la función exportTableToExcel() para exportar la información de la tabla HTML mediante Javascript.

<button onclick="exportTableToExcel('tblData')">Export Table Data To Excel File</button>

Si quieres exportar la información a un fichero con un nombre personalizado, tendrás que pasarle el nombre del fichero como parámetro a la función exportTableToExcel().

<button onclick="exportTableToExcel('tblData', 'members-data')">Export Table Data To Excel File</button>