Exportar tabla HTML a CSV con JavaScript

por

En este artículo vamos a explicar cómo exportar una tabla HTML a CSV con JavaScript, sin utilizar plugins ni frameworks. Este artículo está relacionado con un post anterior, Exportar tabla HTML a Exel con JavaScript, donde explico cómo exportar una tabla HTML a un archivo Excel nativo, pero con el inconveniente de no poder elegir un charset concreto para la exportación. Esto conlleva problemas con los acentos y las «ñ» cuando queremos exportar datos utf-8 al formato nativo (.xls) que espera Excel.

El problema radica en que JavaScript no tiene una función equivalente a utf8_encode() de PHP, por lo que la conversión debe hacerse manualmente. En el post anterior vimos que, aunque podemos especificar el formato nativo de Excel junto con un charset mediante «application/vnd.ms-excel;charset=utf-8«, cuando Excel abre el archivo resultante lo procesa automáticamente, sin garantizar una compatibilidad total con la codificación de caracteres debido a los códigos internos que espera recibir y que no podemos controlar ni decodificar.

La solución consiste en convertir manualmente los caracteres de la tabla HTML al formato deseado. Para ello, sí que podemos exportar la tabla HTML como CSV con JavaScript, que básicamente es texto separado por comas (u otro delimitador). De esta forma, Excel reconoce que se trata de texto y la compatibilidad es mucho mayor.

Vamos a ver los pasos necesarios para exportar una tabla HTML a un archivo CSV, utilizando únicamente JavaScript.

La tabla HTML

El código básico de una web codificada en UTF-8 con una tabla HTML que contiene caracteres «especiales» podría ser el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exportar tabla a CSV</title>
  <script src="exportarTablaToCSV.js"></script>
</head>
<body>
  <table id="miTabla">
      <tr>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Edad</th>
      </tr>
      <tr>
        <td>María</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Íñigo</td>
        <td>Capçäl</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Hòlëk</td>
        <td>O'Conelly</td>
        <td>40</td>
      </tr>
  </table>
  <button onclick="exportTableToCSV('miTabla', 'datos.csv')">Exportar a CSV</button>
</body>
</html>

Se trata de un código HTML muy sencillo con unos cuantos caracteres especiales que nos servirá para explicar el proceso de exportar la tabla HTML a CSV mediante una función JavaScript. Ahora, veamos el código JavaScript (exportarTablaToCSV.js) que hemos escrito en un archivo aparte e incluido en el documento HTML.

El archivo JavaScript

// Exporta una tabla HTML a CSV
function exportTableToCSV(tableID, filename) {
  // Tipo de exportación
  if (!filename) filename = 'excel_data.csv';
  let dataType = 'text/csv;charset=utf-8;';

  let tableSelect = document.getElementById(tableID);
  let rows = tableSelect.querySelectorAll("tr");
  let csvContent = [];

  // Recorremos cada fila de la tabla
  rows.forEach(function (row) {
    let cols = row.querySelectorAll("td, th");
    let rowContent = [];

    // Recorremos cada celda y la guardamos
    cols.forEach(function (col) {
      rowContent.push(col.innerText);
    });
    
    // Unimos las columnas en celdas csv con virgulilla ~ y agregamos a csvContent
    csvContent.push(rowContent.join("~")); 
  });

  // Unimos todas las filas con saltos de línea
  let csvString = csvContent.join("\n");

  // Creamos el archivo CSV con BOM para asegurar UTF-8
  let blob = new Blob(["\uFEFF" + csvString], {dataType});
  
  // Crea un enlace de descarga en el navegador
  if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE
    window.navigator.msSaveOrOpenBlob(blob, filename);
  } else { // Otros navegadores
    let dataUrl = URL.createObjectURL(blob);   
    let a = document.createElement("a");
    document.body.appendChild(a);
    a.download = filename;    
    a.href = dataUrl;
    a.click();
    URL.revokeObjectURL(dataUrl);
    a.remove();    
  }
}

Código JavaScript para exportar a CSV

Este código consiste en una función JavaScript que permite exportar una tabla HTML a un archivo CSV. La función está guardada en el archivo local «exportarTablaToCSV.js» que tenemos vinculado a nuestra página HTML. Vamos a ver su funcionamiento paso a paso:

  • La función exportTableToExcel recibe dos parámetros: tableID, que es el ID de la tabla HTML que se desea exportar y filename, que es el nombre del archivo Excel que queremos guardar.
  • Si no se proporciona un nombre de archivo se utiliza el nombre predeterminado excel_data.csv.
  • Se define el tipo de archivo para la exportación, que en este caso es text/csv;charset=utf-8; el tipo MIME para archivos CSV y asegurando que se use la codificación UTF-8.
  • Se selecciona la tabla HTML mediante su ID, se obtienen todas las filas (<tr>) dentro de esa tabla y se inicializa el array csvContent para almacenar las filas que se convertirán en el contenido CSV.
  • Para cada fila, se seleccionan las celdas (<td> y <th>) y se crea un array rowContent para almacenar el contenido de cada celda en la fila.
  • Se utiliza innerText para obtener el texto de cada celda y se añade a rowContent.
  • Al final de cada fila, se une el contenido de las celdas con el delimitador ~ y se añade a csvContent.
  • Se unen todas las filas del contenido CSV con saltos de línea para crear la cadena final que representará el archivo CSV.
  • Se crea un objeto Blob que representa el contenido del archivo CSV. Se añade un BOM (Byte Order Mark) para asegurar que el archivo se interprete como UTF-8.
  • Se verifica si el navegador es Internet Explorer utilizando window.navigator.msSaveOrOpenBlob. En caso afirmativo, se utiliza la API específica de IE para guardar el archivo. Se pasa el objeto Blob y el nombre del archivo a la función msSaveOrOpenBlob.
  • Si el navegador no es Internet Explorer, se crea un enlace de descarga (<a>) y se configuran sus atributos href y download para que apunten al objeto Blob y al nombre de archivo respectivamente.
  • A continuación, se simula un clic en el enlace utilizando el método click() y se revoca la URL del objeto Blob utilizando URL.revokeObjectURL.
  • Finalmente, se elimina el enlace del documento.

Exportar tabla HTML a CSV

En este ejemplo, tenemos una tabla HTML con algunos datos de ejemplo y el botón «Exportar a CSV» que enlaza a nuestra función JavaScript. Al hacer clic en el botón, se llama a la función exportTableToCSV pasando el ID de la tabla (‘miTabla’) y un nombre de archivo (‘datos.csv’). Esto genera un archivo interno blob con el contenido de la tabla HTML para ser exportado con el tipo MIME de CSV en codificación UTF-8. Observa que al tratarse de texto plano, Excel lo codifica automáticamente y de forma correcta, al contrario de lo que sucede en el formato nativo (.xls).

Finalmente creamos los enlaces de descarga en el navegador para finalizar la exportación, este enlace aparece y desaparece muy rápido, pero es necesario para generar la descarga. El resultado después de abrir el archivo datos.csv es el siguiente:

Exportar tabla html a csv
Exportar tabla HTML a CSV con JavaScript

Exportar tabla HTML a CSV con JavaScript

Como hemos visto, este código permite exportar el contenido de una tabla HTML a un archivo CSV utilizando JavaScript puro, asegurando que el contenido se maneje adecuadamente y que se pueda descargar en formato CSV. Como detalle importante, se utiliza un delimitador personalizado: la virgulilla (Alt 126 = ~) para separar las celdas. Con este delimitador, conseguimos evitar problemas con algunos símbolos «especiales» como las comas, punto y coma, comillas, etc., que muchas veces se interpretan como separadores de celdas en CSV.

Al abrir el archivo CSV en Excel, nos preguntará qué símbolo debe utilizar para separar las diferentes columnas y, si seleccionamos nuestro símbolo virgulilla, automáticamente dividirá las celdas correctamente, conservando todo su contenido.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario