¿Quieres aprender a convertir tabla html a excel? Uno de los métodos que utilizamos para mostrar datos numéricos en una página web es usar tablas. Pero si queremos que el usuario pueda descargar tabla HTML a Excel, debemos convertirla en un archivo. En este tutorial, te mostraré cómo convertir una tabla HTML a un archivo Excel con javascript.
Convertir tabla HTML a un archivo Excel con Javascript
Excel es una popular aplicación de software desarrollada por Microsoft que forma parte de la suite de Office. Es una hoja de cálculo electrónica que permite crear, organizar y manipular datos en formato de filas y columnas. Con una interfaz intuitiva y potentes herramientas de cálculo, Excel es ampliamente utilizado para realizar tareas como la creación de presupuestos, seguimiento de gastos, análisis de datos, elaboración de gráficos y tablas, y mucho más. Es una herramienta versátil y ampliamente utilizada en entornos profesionales y educativos para el manejo eficiente de datos y la toma de decisiones informadas.
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es un lenguaje de marcado utilizado para crear páginas web en Internet. Es el lenguaje estándar utilizado para definir la estructura y el contenido de una página web, incluyendo texto, imágenes, enlaces, formularios, videos y más. HTML utiliza etiquetas o tags para marcar y definir los elementos de una página web, y luego los navegadores web interpretan estas etiquetas para mostrar el contenido correctamente en la pantalla. Es un lenguaje fundamental en el desarrollo web y permite la creación de páginas web interactivas y con un diseño atractivo.
¿Cómo generar un archivo excel desde una tabla html?
Nuestro objetivo en este ejemplo es crear una función javascript que se ejecutará cuando el usuario haga clic en el enlace de descarga. Para generar un archivo xlsx desde el lado del cliente solamente, necesitamos armar un archivo xls en formato XML. Puede estudiar la documentación completa de SpreadsheetDataXML aquí, pero para resumir, es solo una forma de describir el archivo excel en formato HTML / XML.
Por ejemplo, podemos crear un archivo de excel con el texto en negrita «Hello World» en la celda A1 con el formato XML a continuación.
<html xmlns:x="urn:schemas-microsoft-com:office:excel">
<head><xml>
<x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>Test Sheet</x:Name>
<x:WorksheetOptions>
<x:Panes></x:Panes></x:WorksheetOptions>
</x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook>
</xml></head>
<body><table border='1px'>
<tr>
<td><b>Hello World</b></td>
</tr>
</table></body>
</html>
¿Cómo exportar tabla html a excel xlsx?
Para exportar tabla html a excel, como se muestra arriba, puede usar HTML (y CSS si es necesario) para describir la tabla. Entonces, si desea exportar cualquier tabla en su página web, puede simplemente copiar su código HTML y meterlo en el XML.
Suponiendo que la tabla tiene id = «myTable», con poca ayuda de jQuery, nuestra función debería tener este aspecto.
function fnExcelReport() {
var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';
tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';
tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
tab_text = tab_text + "<table border='1px'>";
//get table HTML code
tab_text = tab_text + $('#myTable').html();
tab_text = tab_text + '</table></body></html>';
Ahora el contenido del archivo de Excel está listo. A continuación, haremos que el navegador lo tome y aparezca el botón de descarga. Para Chrome y Firefox, podemos cambiar el tipo de datos en href pero eso no funcionará con IE. Tendremos que usar el objeto Blob como solución alternativa.
var data_type = 'data:application/vnd.ms-excel';
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
//For IE
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
if (window.navigator.msSaveBlob) {
var blob = new Blob([tab_text], {type: "application/csv;charset=utf-8;"});
navigator.msSaveBlob(blob, 'Test file.xls');
}
}
//for Chrome and Firefox
else {
$('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
$('#test').attr('download', 'Test file.xls');
}
Tutorial para exportar tabla html a excel
Para ver el código completo y el ejemplo de trabajo, vea jsfiddle aquí o puede ver el video tutorial paso a paso a continuación.
Aprende más:
| Css 3D |
| Crear archivo con JavaScript |
| Sistema de ventas en php y MySQL código fuente |
| Proyecto sistema de ventas – java y MySQL + código fuente |