Cualquier tabla HTML que haya creado se puede convertir en una hoja de cálculo de Excel usando jQuery y es compatible con todos los navegadores. Hay dos enfoques simples que requieren conocimientos básicos de HTML y jQuery para lograrlo.
- Enfoque 1: usar el complemento jQuery: se puede usar un simple complemento jQuery ‘table2excel’ para convertir una tabla HTML en una hoja de Excel.
Sintaxis:
$("#table-id").table2excel({
filename: "excel_sheet-name.xls"
});
- Ejemplo:
html
<table id="studtable">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>101</td>
<td>Alex</td>
<td>15</td>
<td>Maldives</td>
</tr>
<tr>
<td>102</td>
<td>Chris</td>
<td>14</td>
<td>Canada</td>
</tr>
<tr>
<td>103</td>
<td>Jay</td>
<td>15</td>
<td>Toronto</td>
</tr>
</table>
<script>
$(document).ready(function () {
$("#studtable").table2excel({
filename: "Students.xls"
});
});
</script>
- Producción:
ID Name Age Address 101 Alex 15 Maldives 102 Chris 14 Canada 103 Jay 15 Toronto
- El resultado anterior se convierte en una hoja de cálculo de Excel exactamente de la misma manera que la tabla HTML. Acerca de ‘table2excel’: ‘ table2excel ‘ es un complemento de jQuery simple pero útil que permite exportar datos de tablas HTML a un archivo de Excel. El ‘table2excel’ también tiene una función para excluir celdas que contienen una clase específica. Sintaxis para noExportar:
$(document).ready(function() {
$("#table-id").table2excel({
exclude: ".noExport",
filename: "name-of-the-file",
});
});
- Código de ejemplo para excluir algunas celdas específicas:
html
<script src= "//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"> </script> <script src= "//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"> </script> <button>Export</button> <table> <thead> <tr> <td class="noExport"> This cell will not be exported. </td> <td> This cell will get exported. </td> </tr> </thead> <tbody> <tr> <td>Alex</td> <td class="noExport">Maldives</td> </tr> <tr> <td>Chris</td> <td>Canada</td> </tr> </tbody> </table>
- Nota: En el código de muestra anterior, la clase ‘.noExport’ se usó para excluir esas celdas especificadas de los datos de la tabla HTML. Por lo tanto, la hoja de cálculo de Excel exportada tampoco incluye esas celdas de los datos de la tabla HTML.
- Enfoque 2: Uso de HTML simple: Considere la misma tabla de estudiantes anterior para comprender lo siguiente. Usemos un botón en nuestro código que, cuando se hace clic, convierte la tabla de datos HTML en una hoja de cálculo de Excel. Tenga en cuenta que el botón ‘exportar’ a continuación no convierte la tabla HTML en una hoja de Excel. Esto debe usarse en un código HTML adecuado y ya existente para obtener la hoja de cálculo de Excel y no funcionará en este IDE.
html
<!DOCTYPE html> <html> <head> <title> HTML Table To Excel spreadsheet using HTML only </title> </head> <body> <table id="studtable"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Address</th> </tr> <tr> <td>101</td> <td>Alex</td> <td>15</td> <td>Maldives</td> </tr> <tr> <td>102</td> <td>Chris</td> <td>14</td> <td>Canada</td> </tr> <tr> <td>103</td> <td>Jay</td> <td>15</td> <td>Toronto</td> </tr> </table> <button onclick="tableToExcel( 'studtable', 'Students')"> Click to Export </button> </body> </html>
- Producción:
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es ampliamente famosa por su filosofía de » Escribir menos, hacer más «.
Publicación traducida automáticamente
Artículo escrito por svisnus000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA