Cómo exportar una tabla HTML a CSV mediante Javascript

El hecho de exportar es muy útil en un listado de datos de una aplicación web. Ayuda al usuario a descargar el listado de datos como un fichero para poder utilizarlo offline. En aplicaciones web, el formato CSV es el que más se suele utilizar para exportaciones. Poder exportar los datos a CSV es muy sencillo y muy importante si quieres que tu web sea usable. Basicamente, la exportación de datos se utiliza en listados de clientes, listados de productos y demás listados para poder exportar los datos en un fichero.

Mediante Javascript, puedes fácilmante exportar tus datos a CSV sin tener que utilizar un plugin de jQuery. En este tutorial veremos cómo exportar una tabla HTML a CSV utilizando Javascript. En este ejemplo veremos cómo exportar una tabla de clientes a CSV, pero tú lo puedes aplicar para los menesteres que desees.

Código Javascript

El siguiente código Javascript contiene dos funciones: downloadCSV() y exportTableToCSV(). La función downloadCSV() coge los datos CSV y genera un enlace donde descargar los datos de la tabla HTML en un archivo CSV.

function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV file
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // Create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Hide download link
    downloadLink.style.display = "none";

    // Add the link to DOM
    document.body.appendChild(downloadLink);

    // Click download link
    downloadLink.click();
}

La función exportTableToCSV() crea los datos CSV a partir de una tabla HTML y transforma dicha información en un fichero utilizando la función downloadCSV().

function exportTableToCSV(filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tr");
    
    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");
        
        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);
        
        csv.push(row.join(","));        
    }

    // Download CSV file
    downloadCSV(csv.join("n"), filename);
}

Código HTML

La tabla HTML de clientes contiene datos básicos como el nombre, el email o el país.

<table>
    <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>Stephen Thomas</td>
        <td>[email protected]</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Natly Oath</td>
        <td>[email protected]</td>
        <td>France</td>
    </tr>
</table>

Haciendo clic en el botón, llamamos al método exportTableToCSV() para exportar la tabla a CSV. También podemos pasarle el nombre que le queremos dar al archivo CSV en un parámetro a esta función.

<button onclick="exportTableToCSV('members.csv')">Export HTML Table To CSV File</button>

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.