En el proceso de diseño y desarrollo web, realizar copias de seguridad periódicas es una práctica importante que se sigue. jQuery proporciona el complemento table2excel que ayuda a exportar tablas HTML a archivos de Excel (.xls).
Descargue los archivos de biblioteca requeridos del complemento jQuery table2excel e inclúyalos en su carpeta de trabajo como se muestra en los siguientes ejemplos.
Enlace de descarga: https://github.com/rainabba/jquery-table2excel
Ejemplo 1: El siguiente ejemplo demuestra la funcionalidad muy básica del complemento table2excel . El contenido de la tabla junto con los encabezados se exportan al archivo «GFGFile.xls».
<!DOCTYPE html>
<html>
<head>
<title>jQuery table2excel plugin</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script src="jquery.table2excel.js"></script>
</head>
<body>
<h1 style="color:green">GeeksForGeeks</h1>
<b>jQuery table2excel plugin </b>
<p></p>
<table id="myTable" class="table2excel">
<tr>
<th>Company</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>IBM</td>
<td>Maria</td>
<td>Germany</td>
</tr>
<tr>
<td>TCS</td>
<td>Yen Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Microsoft</td>
<td>Roland</td>
<td>Austria</td>
</tr>
<tr>
<td>Wipro</td>
<td>Helen</td>
<td>UK</td>
</tr>
<tr>
<td>Samsung</td>
<td>Yoshwini</td>
<td>Canada</td>
</tr>
<tr>
<td>Virtusa</td>
<td>Rovelli</td>
<td>Italy</td>
</tr>
</table>
<script>
$(function() {
$("#myTable").table2excel({
name: "Backup file for HTML content",
// include extension also
filename: "GFGFile.xls",
// 'True' is set if background and font colors preserved
preserveColors: false
});
});
</script>
</body>
</html>
Producción:
-
Antes de exportar:
-
Después de exportar en ‘GFGFile.xls’:
Ejemplo 2: En el siguiente ejemplo, se explica el complemento table2excel junto con la configuración de más opciones. En la estructura HTML, se toman dos tablas para mostrar diferentes resultados en los archivos de exportación. Los encabezados de la fila 1 de la tabla no se exportan en los archivos de salida de Excel, ya que se les ha asignado la clase «noExl», como se muestra en el siguiente programa. A la tabla 2 se le asigna la clase «colorClass» para que los colores asignados a cualquier control HTML se conserven como se muestra en el código. Los programadores pueden establecer opciones según los requisitos de la aplicación.
<!DOCTYPE html>
<html>
<head>
<title>jQuery table2excel plugin</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script src="jquery.table2excel.js"></script>
</head>
<body>
<h1 style="color:green">GeeksForGeeks</h1>
<b>jQuery table2excel plugin </b>
<p></p>
<table class="table2excel">
<thead>
<tr class="noExl">
<td>
Table 1 Header, column 1 (not exported)</td>
<td>Table 1 Header, column 2(not exported)
</td>
</tr>
<tr><td>Table 1 Header, column 1 (exported)</td>
<td>Table 1 Header, column 2 (exported)</td></tr>
</thead>
<tbody>
<tr><td>Row 1, column 1 data of table1</td>
<td>Row 1 column 2 data of table 1</td></tr>
<tr><td>Row 2, column 1 data of table1</td>
<td>Row 2, column 2 dataof table1</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">This is the footer of table 1.</td></tr>
</tfoot>
</table>
<button class="exportBtnClass">Export to XLS file</button><p></p>
<table class="table2excel colorClass">
<thead>
<tr class="noExl">
<td>Table 2 Header, column 1 (not exported)</td>
<td>Table 2 Header, column 1 (not exported)</td></tr>
<tr><td style="background-color: green;">
Table 2 Header, column 1 (exported with colors)</td>
<td>Table 2 Header, column 2 (exported)</td></tr>
</thead>
<tbody>
<tr><td style="background-color: red;">
Row 1, column 1 data of table2</td>
<td>Row 1 column 2 data of table2</td></tr>
<tr><td>Row 2, column 1 data of table2</td>
<td>Row 2, column 2 data of table2</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">
This is the footer of table 2</td></tr>
</tfoot>
</table>
<button class="exportBtnClass">
Export to XLS file
</button>
<script>
$(function() {
$(".exportBtnClass").click(function(e){
var table = $(this).prev('.table2excel');
if(table && table.length){
var preserveColors =
(table.hasClass('colorClass') ? true : false);
$(table).table2excel({
// This class's content is excluded from getting exported
exclude: ".noExl",
name: "Output excel file ",
filename:
"outputFile-" + new Date().toString().replace(/[\-\:\.]/g, "") + ".xls",
fileext: ".xls", //File extension type
exclude_img: true,
exclude_links: true,
exclude_inputs: true,
preserveColors: preserveColors
});
}
});
});
</script>
</body>
</html>
Producción:
-
Antes de la exportación:
-
Después de la exportación de la tabla 1:
-
Después de la exportación de la tabla 2:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA