Saltar al contenido

Convertir tabla HTML a un archivo Excel con Javascript

¿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.

¿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.

Te puede interesar:   Instalación de XAMPP en Windows

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.

Te puede interesar:   Tutorial Typed.js | Animación de escritura en Javascript

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
0/5 (0 Reviews)
Comparte