¿Es posible convertir Tabla HTML a archivo CSV?
Si es posible pasar de una tabla HTML a archivo CSV usando el lenguaje JavaScript usando dos funciones, uno para crear el fichero y el otro para generar la descarga.
¿Qué es un fichero CSV?
Son archivos muy usados en el mundo del internet porque manejan texto plano y son muy livianos. Además, es compatible en múltiples sistemas que se usan para importar y/o exportar datos. Los valores están separados por comas o punto y comas.
¿Porque usar los ficheros CSV?
Generalmente, cuando se desarrolla aplicaciones web el proyecto requiere importar o exportar registros para optimizar el tiempo. Por ejemplo, el cms Moodle utiliza estos ficheros para registros o matricular cientos de alumnos en una sola carga y eso lo hace a través de ficheros CSV.
Su estructura de registros es muy ligera porque maneja texto plano separados de comas.
Pasos para crear CSV con JavaScript
- Primer paso: Crear contenido HTML
- Segundo paso: Convierta tabla en valores separados por comas:
- Tercer paso: Función para descargar CSV:
¿Exportar tabla HTML a CSV usando JavaScript?
A continuación, veremos un ejemplo completo de como exportar una tabla HTML con varios registros a un archivo CSV usando el lenguaje JavaScript.
Primer paso: Crear contenido HTML
Crear un archivo simple HTML y dentro de ella una tabla y un botón, para una interfaz profesional se puede usar el framework como Bootstrap.
El botón cumplirá un rol fundamental porque desencadenará la ejecución del script. Sin embargo. contendrá el atributo llamado «onclick» que desencadenará la función llamada table_CSV() lo cual convertirá la tabla en valores separados por comas y descargarla en forma de archivo CSV.
<!DOCTYPE html>
<html>
<head>
<title>Convertir Tabla HTML a archivo CSV</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<center>
<h1 style="color:green">BaulPHP</h1>
<h2>Convertir Tabla HTML a archivo CSV</h2>
<table style="width:60%" class="table table-hover">
<tr class="table-info">
<th>Nombre</th>
<th>Edad</th>
<th>Celular</th>
<th>Zona</th>
</tr>
<tr>
<td>Maria</td>
<td>19</td>
<td>987654543</td>
<td>Quito</td>
</tr>
<tr>
<td>Carlos</td>
<td>22</td>
<td>999987654</td>
<td>Lima</td>
</tr>
<tr>
<td>Leydi</td>
<td>21</td>
<td>989890098</td>
<td>Montevideo</td>
</tr>
<tr>
<td>Leonel</td>
<td>25</td>
<td>987645654</td>
<td>Santiago</td>
</tr>
</table>
<br><br>
<button class="btn btn-primary" type="button" onclick="table_CSV()">
Descargar archivo CSV
</button>
</center>
</body>
</html>Segundo paso: Convertir tabla en valores separados por comas:
Necesitamos de una función de JavaScript para leer los datos de la tabla y convertirlos en valores separados por comas. Por lo tanto, utilizaremos el modelo de objeto de documento para acceder a los datos de la tabla en cada columna de las filas.
Esta función debe iniciarse cuando el usuario final hace clic en el botón «Descargar archivo CSV«.
<script type="text/javascript">
function table_CSV() {
var csv_data = [];
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var cols = rows[i].querySelectorAll('td,th');
var csvrow = [];
for (var j = 0; j < cols.length; j++) {
csvrow.push(cols[j].innerHTML);
}
csv_data.push(csvrow.join(","));
}
csv_data = csv_data.join('\n');
descargaCSV(csv_data);
}
</script>Nota:
Al darle clic en el botón de descarga se activa la funcióntable_CSV(), accede a los datos de cada fila de la tabla utilizando el modelo de objeto del documento.getElementByTagName('tr')recupera todos los datos de las filas de la tabla y los almacena en la variable de filas.
Tercer paso: Función para descargar CSV:
En este punto ya tenemos la tabla HTML y los datos Función de la tabla HTML convertidos, debemos escribir una función para crear un archivo CSV e introducir los datos de la tabla dentro de él y generar la descarga en el navegador
Una vez que el usuario ha hecho clic en el botón de descarga esta función se activará después de que se conviertan los datos de la tabla, llamaremos a esta función dentro de la función descargaCSV().
<script type="text/javascript">
function descargaCSV(csv_data) {
CSVFile = new Blob([csv_data], {
type: "text/csv"
});
var temp_link = document.createElement('a');
temp_link.download = "baulphp.csv";
var url = window.URL.createObjectURL(CSVFile);
temp_link.href = url;
temp_link.style.display = "none";
document.body.appendChild(temp_link);
temp_link.click();
document.body.removeChild(temp_link);
}
</script>Código completo exportar CSV
En la parte superior hemos explicado el procedimiento y ya es momento de mostrar el script completo para que puedan probarlo en sus servidores web.
<!DOCTYPE html>
<html>
<head>
<title>Convertir Tabla HTML a archivo CSV</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<center>
<h1 style="color:green">BaulPHP</h1>
<h2>Convertir Tabla HTML a archivo CSV</h2>
<table style="width:60%" class="table table-hover">
<tr class="table-info">
<th>Nombre</th>
<th>Edad</th>
<th>Celular</th>
<th>Zona</th>
</tr>
<tr>
<td>Maria</td>
<td>19</td>
<td>987654543</td>
<td>Quito</td>
</tr>
<tr>
<td>Carlos</td>
<td>22</td>
<td>999987654</td>
<td>Lima</td>
</tr>
<tr>
<td>Leydi</td>
<td>21</td>
<td>989890098</td>
<td>Montevideo</td>
</tr>
<tr>
<td>Leonel</td>
<td>25</td>
<td>987645654</td>
<td>Santiago</td>
</tr>
</table>
<br><br>
<button class="btn btn-primary" type="button" onclick="table_CSV()">
Descargar archivo CSV
</button>
</center>
<script type="text/javascript">
function table_CSV() {
var csv_data = [];
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var cols = rows[i].querySelectorAll('td,th');
var csvrow = [];
for (var j = 0; j < cols.length; j++) {
csvrow.push(cols[j].innerHTML);
}
csv_data.push(csvrow.join(","));
}
csv_data = csv_data.join('\n');
descargaCSV(csv_data);
}
function descargaCSV(csv_data) {
CSVFile = new Blob([csv_data], {
type: "text/csv"
});
var temp_link = document.createElement('a');
temp_link.download = "baulphp.csv";
var url = window.URL.createObjectURL(CSVFile);
temp_link.href = url;
temp_link.style.display = "none";
document.body.appendChild(temp_link);
temp_link.click();
document.body.removeChild(temp_link);
}
</script>
</body>
</html>
Conclusiones y recomendaciones
Hay varias formas de crear un fichero CSV y en varios lenguajes de programación por ejemplo el lenguaje PHP que hemos tocado en un artículo anterior.
Se puede renombrar el fichero HTML a PHP, por ejemplo: my_csv.html a my_csv.php. Por lo tanto, este mínimo cambio nos dará más opciones para configurar nuestro script.
Al momento de generar el fichero CSV el nombre por defecto es «baulphp.csv». Sin embargo, se puede personalizar usando las funciones de PHP por ejemplo time(), date(), etc. Siempre y cuando la extensión del fichero sea PHP.
Por último, podemos agregarle estilos CSS o usar algún Framework CSS: Bootstrap, Tailwind CSS, Bulma, Foundation, etc.
Espero que esta pequeña explicación ayude en vuestros proyectos web a crear documentos CSV.
