Convertir tabla HTML a CSV/Excel

Standard

Convirtiendo una tabla HTML en un archivo csv/excel usando Javascript

¿Que tal gente? ¿Como están? Aquí estamos de nuevo indagando en este mundo de la programación con Javascript. El día de hoy, hablaremos de como convertir una tabla en HTML en un archivo CSV/Excel con Javascript . Sin mas preámbulos vayamos al tutorial.

1: Primero lo que debemos hacer es tener nuestra tabla html que vayamos a convertir a csv/excel. Para este caso yo tomare esta tabla como ejemplo:
De la cual tenemos el siguiente código HTML
Screen Shot 2016-01-15 at 5.04.20 PM

2: Agregaremos a nuestro código un botón el cual sea el encargado de mandar la acción de crear nuestro archivo Excel. Lo cual generaría el siguiente código:

Screen Shot 2016-01-15 at 5.06.59 PM

3:Ahora, debemos crear nuestra función Javascript para crear el archivo csv.

Lo primero que agregaremos a nuestra función es obtener el código html de nuestra tabla con la siguiente instrucción, agregaremos un alert como prueba para ir verificando que tiene nuestra variable:

Screen Shot 2016-01-15 at 5.08.07 PM

4. Una vez obtenido el código de la tabla procederemos a reemplazar el código de html por formato csv. Para ello haremos lo siguiente: Reemplazaremos las etiquetas <thead> , </thead>, <tbody> y </tbody> por blancos.

Screen Shot 2016-01-15 at 5.12.08 PM

Con esto nuestros datos quedarían solo con los datos necesarios para el excel, como se muestra la siguiente imagen:

dos

5: Como siguiente paso reemplazaremos las etiquetas <tr> y </tr>. En este caso nuestras etiquetas de cierre </tr> las utilizaremos para que sean un salto de linea, ya que estos en html indican el cierre de una linea. De este modo este seria nuestro código:

Screen Shot 2016-01-15 at 5.13.41 PM

y el resultado al momento seria el siguiente:

tres

6: Para este paso reemplazaremos nuestras etiquetas <th> y <td> por blancos y nuestras etiquetas de cierre </th> y </td> para separar columnas, para este tutorial el separador que utilizaremos sera un punto y coma ( ; ).

Asimismo reemplazando los tabuladores y saltos de linea por espacios vacíos . Agregamos esto a nuestro código y quedaría de la siguiente manera:

Screen Shot 2016-01-15 at 5.15.48 PM

En este punto ya tenemos nuestros datos listos para exportarlos, así como se muestra en la siguiente imagen, en un formato csv

cuatro

7: Por ultimo lo que resta hacer es crear un link para descargar y poner el nombre a nuestro archivo, agregamos este código a nuestro script, creando un elemento hyperlink, le asignamos un nombre de archivo en el atributo download, posteriormente especificamos la url de la cual descargara el archivo y simulamos un clic al link para proceder a la descarga.

Screen Shot 2016-01-15 at 5.17.50 PM

8: Teniendo esto al presionar clic en nuestro botón de exportar se generara nuestro archivo csv.

cinco

9: Y al abrirlo tenemos el resultado que buscábamos:

seis

Este seria nuestro código final si deseas probarlo, o si tuviste inconvenientes con algo para que lo reafirmes:

Screen Shot 2016-01-15 at 5.23.28 PM

Dicho esto me despido, espero haya sido de utilidad para ti, si tienes dudas al respecto communicate, acá abajo dejo mis datos de contacto para auxiliarte en cualquier problema que se te haya presentando a lo largo del tutorial.

Saludos!

Nicolás Villegas
Practicante de HunabSys R&D
Estudiante de Ing. en Sistemas Computacionales

 

 

5 thoughts on “Convertir tabla HTML a CSV/Excel

    • Practicantes Hunabsys

      Hola ProgramBoy si claro que funcionaria, ya que el “.innerHTML” solo toma el contenido de la tabla, es decir, omite las etiquetas table.
      Saludos
      Nicolás Villegas

  1. paola cantillo

    me funciona perfecto pero tengo un problema al abrir el excel me sale toda la información alineada a la izquierda de tal manera que no se ve la información sino le doy mas tamaño a las columnas en el excel, como podría darle estilos al excel desde el js, gracias y saludos.

    • Practicantes Hunabsys

      Buen día Paola, en el caso de este ejemplo, como estamos utilizando el formato CSV, es imposible darle estilo, ya que este tipo de archivos no lo soportan.

      Pero, algo que te puede servir es exportarlo específicamente a excel y agregar los estilos ‘in-line’.

      Acá te dejo un link con un ejemplo muy sencillo para que te des una idea.

      https://jsfiddle.net/z5fwf1as/4/

      Saludos.

  2. HUGO

    HOLA EL CODIGO QUE YO TENGO ES EL QUE AGREGO ABAJO PERO AL DAR CLICK EN EL BOTON NO OCURRE NADA ¿ESTOY HACIENDO ALGO MAL?

    TABLA EN EXCEL

    Nombre
    Edad
    Redicencia

    Juan
    22
    Guadalajara

    Maria
    18
    Monterrey

    Antonio
    32
    Culiacan

    Exportar A CSV

    function crearCSV(){

    var tablehtml = document.getElementById(“tabletocsv”).innerHTML;
    var datos = tablehtml.replace(//g,”)
    .replace(/g/,”)
    .replace(//g,”)
    .replace(/g/,”)
    .replace(//g,”)
    .replace(//g,’\r\n’)
    .replace(//g,”)
    .replace(//g,’;’)
    .replace(//g,”)
    .replace(//g,’;’)
    .replace(/\t/g,”)
    .replace(/\h/g,”);
    var link = document.createElement(“a”);
    link.download = “archivo.csv”;
    link.href = “data:application/csv,”+ escape(datos);
    link.click();

    }
    </script)

Leave a Reply

Your email address will not be published. Required fields are marked *