Exportar tablas HTML a EXCEL
Si deseas agregar la funcionalidad para exportar tablas html a un documento de Excel en cualquier sistema web, para que el usuario de tu aplicación web pueda guardar fácilmente el contenido basado en la web como lo es un archivo .xlsx; entonces esta publicación es para ti.
TableExport.js
El plugin jQuery es simple y fácil de implementar y te permite convertir de forma rápida y dinámica tablas HTML a hojas de cálculo de Excel .xls .xlsx , valores separados por comas .csv y texto sin formato .txt en una sola línea de código.
Librerías: Incluye todas las siguientes bibliotecas css + js en la página donde debe agregar la función para la exporatación de datos .xls, .csv y .txt.
<! - CSS -> < link href = "tableexport.min.css" rel = "stylesheet" type = "text / css" ><! - JS -> < script src = "//code.jquery.com/jquery-latest.min.js" > </ script > < script src = "FileSaver.min.js" > </ script > < script src = "tableexport.min.js" > </ script >
Bibliotecas adicionales: Para proporcionar compatibilidad con Office Open XML SpreadsheetML Format (.xlsx), debes incluir la librería xls.core.min.js de terceros en tu proyecto antes de ambos FileSaver.jsy TableExport.
< script src = "Blob.min.js" > </ script > < script src = "xls.core.min.js" > </ script >
Código HTML: A continuación el contenido HTML de muestra que debe exportarse como archivo .xlsx. y también crea un botón para guardar y exportar el contenido como archivo con extensión de excel, archivos de texto plano .txt y archivos separados por comas .csv.
<table class="table table-striped table-bordered" ><thead> <tr> <th>Ranking</th> <th>País</th> <th>Población</th> <th>% de la población mundial</th> <th>Fecha</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>中华人民共和国 (People's Republic of China)</td> <td>1,370,570,000</td> <td>18.9%</td> <td>June 24, 2015</td> </tr> <tr> <td>2</td> <td>India</td> <td>1,273,140,000</td> <td>17.6%</td> <td>June 24, 2015</td> </tr> <tr> <td>3</td> <td>United States "USA"</td> <td>321,268,000</td> <td>4.43%</td> <td>June 24, 2015</td> </tr> <tr> <td>4</td> <td>Indonesia</td> <td>255,461,700</td> <td>3.52%</td> <td>July 1, 2015</td> </tr> <tr> <td>5</td> <td>Brazil</td> <td>204,503,000</td> <td>2.82%</td> <td>June 24, 2015</td> </tr> <tr> <td>6</td> <td>Pakistan</td> <td>190,156,000</td> <td>2.62%</td> <td>June 24, 2015</td> </tr> <tr> <td>7</td> <td>Nigeria</td> <td>183,523,000</td> <td>2.53%</td> <td>July 1, 2015</td> </tr> <tr> <td>8</td> <td>Bangladesh</td> <td>126,880,000</td> <td>2.19%</td> <td>June 24, 2015</td> </tr>
</tbody></table>
Código JavaScript: Para usar esta biblioteca, simplemente llama al constructor TableExport
<script>
$("table").tableExport({
formats: ["xlsx","txt", "csv"], //Tipo de archivos a exportar ("xlsx","txt", "csv", "xls")
position: 'button', // Posicion que se muestran los botones puedes ser: (top, bottom)
bootstrap: false,//Usar lo estilos de css de bootstrap para los botones (true, false)
fileName: "ListadoPaises", //Nombre del archivo
});
</script>
Uniéndolo todo: cabe mencionar que para realizar este ejemplo me he ayudado del Framework Bootstrap en su versión 4, para ello he creado un archivo llamado index.html, archivo desde el cual realizé todos los pasos descritos anteriormente. El código es mostrado a continuación:
<!DOCTYPE html> <html lang="es"> <head> <title>Exportar tablas HTML a EXCEL utilizando el plugin jQuery TableExport</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="dist/css/tableexport.css" rel="stylesheet" type="text/css"></head> <body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Exportar datos</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button>
</nav>
<div class="container" style="margin-top:30px"> <div class="row"> <div class="col-sm-12"> <h3>Exportar tablas HTML a EXCEL utilizando el plugin jQuery TableExport</h3> <H4>Población por paises</H4> <div class="table-responsive"> <table class="table table-striped table-bordered" >
<thead> <tr> <th>Ranking</th> <th>País</th> <th>Población</th> <th>% de la población mundial</th> <th>Fecha</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>中华人民共和国 (People's Republic of China)</td> <td>1,370,570,000</td> <td>18.9%</td> <td>June 24, 2015</td> </tr> <tr> <td>2</td> <td>India</td> <td>1,273,140,000</td> <td>17.6%</td> <td>June 24, 2015</td> </tr> <tr> <td>3</td> <td>United States "USA"</td> <td>321,268,000</td> <td>4.43%</td> <td>June 24, 2015</td> </tr> <tr> <td>4</td> <td>Indonesia</td> <td>255,461,700</td> <td>3.52%</td> <td>July 1, 2015</td> </tr> <tr> <td>5</td> <td>Brazil</td> <td>204,503,000</td> <td>2.82%</td> <td>June 24, 2015</td> </tr> <tr> <td>6</td> <td>Pakistan</td> <td>190,156,000</td> <td>2.62%</td> <td>June 24, 2015</td> </tr> <tr> <td>7</td> <td>Nigeria</td> <td>183,523,000</td> <td>2.53%</td> <td>July 1, 2015</td> </tr> <tr> <td>8</td> <td>Bangladesh</td> <td>126,880,000</td> <td>2.19%</td> <td>June 24, 2015</td> </tr>
</tbody></table> </div>
<hr class="d-sm-none"> </div>
</div> </div>
<footer class="footer fixed-bottom"> <div class="container"> <span class="text-muted">Obed Alvarado © 2018</span> </div> </footer>
</body> <!-- Llamar a los complementos javascript--> <script src="jquery-1.12.4.min.js"></script> <script src="FileSaver.min.js"></script> <script src="Blob.min.js"></script> <script src="xls.core.min.js"></script> <script src="dist/js/tableexport.js"></script> <script> $("table").tableExport({ formats: ["xlsx","txt", "csv"], //Tipo de archivos a exportar ("xlsx","txt", "csv", "xls") position: 'button', // Posicion que se muestran los botones puedes ser: (top, bottom) bootstrap: false,//Usar lo estilos de css de bootstrap para los botones (true, false) fileName: "ListadoPaises", //Nombre del archivo }); </script> </html>
Mira la demostración y descarga el código fuente.
Visita el repositorio oficial de Github para más información y para futuras actualizaciones. No olvides leer la licencia para usar este plugin en tus proyectos.
Comentarios