{"id":275,"date":"2011-06-21T15:28:16","date_gmt":"2011-06-21T15:28:16","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=275"},"modified":"2019-08-06T11:46:59","modified_gmt":"2019-08-06T11:46:59","slug":"exportar-tabla-html-a-excel-con-javascript","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/exportar-tabla-html-a-excel-con-javascript\/","title":{"rendered":"Exportar tabla HTML a Excel con JavaScript"},"content":{"rendered":"

En este art\u00edculo vas a ver como exportar un tabla HTML<\/strong> con una serie de datos a un archivo Excel<\/strong> utilizando JavaScript<\/strong> puro y PHP<\/strong>. Sin uso de plugins ni frameworks para conseguirlo.<\/p>\n

Para entender el concepto de este art\u00edculo es importante que tengas algunos conocimientos sobre PHP<\/strong>, JavaScript<\/strong> y HTML<\/strong>.<\/p>\n

En el cuerpo de la p\u00e1gina o dentro de la etiqueta <body> puedes crear una tabla con las t\u00edpicas etiquetas que permiten mostrar una tabla en el HTML<\/strong>.<\/p>\n

En el caso del ejemplo en funcionamiento tenemos algo como lo siguiente:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<table<\/span><\/a> width<\/span>=<\/span>"50%"<\/span> border<\/span>=<\/span>"1"<\/span> cellpadding<\/span>=<\/span>"10"<\/span> cellspacing<\/span>=<\/span>"0"<\/span> bordercolor=<\/span>"#666666"<\/span> id<\/span>=<\/span>"export_to_excel"<\/span> style<\/span>=<\/span>"border-collapse:collapse;"<\/span>><\/span>\n    <tr<\/span><\/a>><\/span>\n        <td<\/span><\/a>><\/span>Celda1<\/<\/span>td<\/span><\/a>><\/span>\n        <td<\/span><\/a>><\/span>Celda2<\/<\/span>td<\/span><\/a>><\/span>\n        <td<\/span><\/a>><\/span>Celda3<\/<\/span>td<\/span><\/a>><\/span>\n        <td<\/span><\/a>><\/span>Celda4<\/<\/span>td<\/span><\/a>><\/span>\n        <td<\/span><\/a>><\/span>Celda5<\/<\/span>td<\/span><\/a>><\/span>\n    <\/<\/span>tr<\/span><\/a>><\/span>\n    <tr<\/span><\/a>><\/span>\n        <td<\/span><\/a>><\/span>Celda6<\/<\/span>td<\/span><\/a>><\/span>\n        <td<\/span><\/a>><\/span>Celda7<\/<\/span>td<\/span><\/a>><\/span>\n        <td<\/span><\/a>><\/span>Celda8<\/<\/span>td<\/span><\/a>><\/span>\n        <td<\/span><\/a>><\/span>Celda9<\/<\/span>td<\/span><\/a>><\/span>\n        <td<\/span><\/a>><\/span>Celda10<\/<\/span>td<\/span><\/a>><\/span>\n    <\/<\/span>tr<\/span><\/a>><\/span>\n<\/<\/span>table<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Es importante fijarse en el identificador de esta tabla \u00abexport_to_excel\u00bb. Lo utilizo como clave para definir el contenido que quiero exportar al archivo Excel<\/strong> desde el c\u00f3digo JavaScript<\/strong>.<\/p>\n
En el <body> tambi\u00e9n puedes agregar un bot\u00f3n que permitir\u00e1 ejecutar la acci\u00f3n. En el caso del ejemplo tenemos algo como lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<p<\/span><\/a>><\/span>\n    <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"btn btn-primary"<\/span> id<\/span>=<\/span>"submitExport"<\/span>><\/span>\n        <i<\/span><\/a> class<\/span>=<\/span>"fa fa-download"<\/span>><\/<\/span>i<\/span><\/a>><\/span> Exportar a Excel\n    <\/<\/span>a<\/span><\/a>><\/span>\n<\/<\/span>p<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Tan solo es un enlace en el que te debes fijar, principalmente, en el identificador \u00absubmitExport\u00bb. Lo utilizo en el JavaScript<\/strong> para crear el evento para este bot\u00f3n.<\/p>\n
Tambi\u00e9n dentro del <body> puedes definir el formulario HTML<\/strong>. En el caso del ejemplo en funcionamiento he agregado:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<form<\/span><\/a> action<\/span>=<\/span>"process.php"<\/span> method<\/span>=<\/span>"post"<\/span> target<\/span>=<\/span>"_blank"<\/span> id<\/span>=<\/span>"formExport"<\/span>><\/span>\n    <input<\/span><\/a> type<\/span>=<\/span>"hidden"<\/span> id<\/span>=<\/span>"data_to_send"<\/span> name<\/span>=<\/span>"data_to_send"<\/span> \/<\/span>><\/span>\n<\/<\/span>form<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Este peque\u00f1o formulario no es visible para el usuario pero si que se ejecutar\u00e1 cuando sea pulsado el bot\u00f3n \u00absubmitExport\u00bb que he creado previamente.<\/p>\n
El campo oculto que hay dentro lo utilizo en el c\u00f3digo JavaScript<\/strong> para depositar en \u00e9l el contenido de la tabla que quiero trasladar al archivo Excel<\/strong>.<\/p>\n
Presta atenci\u00f3n al atributo action<\/em> del formulario. Al enviarse se ejecutar\u00e1 el archivo proccess.php<\/em>.<\/p>\n
En este archivo PHP<\/strong> lo que hago es lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\nheader<\/span><\/a>(<\/span>"Content-type: application\/vnd.ms-excel; name='excel'"<\/span>)<\/span>;<\/span>\nheader<\/span><\/a>(<\/span>"Content-Disposition: filename=archivo.xls"<\/span>)<\/span>;<\/span>\nheader<\/span><\/a>(<\/span>"Pragma: no-cache"<\/span>)<\/span>;<\/span>\nheader<\/span><\/a>(<\/span>"Expires: 0"<\/span>)<\/span>;<\/span>\n \nif<\/span> (<\/span>isset<\/span><\/a>(<\/span>$_POST<\/span>[<\/span>'data_to_send'<\/span>]<\/span>)<\/span> &&<\/span> $_POST<\/span>[<\/span>'data_to_send'<\/span>]<\/span> !=<\/span> ''<\/span>)<\/span> {<\/span>\n    echo<\/span> $_POST<\/span>[<\/span>'data_to_send'<\/span>]<\/span>;<\/span>\n}<\/span>\n?><\/span><\/pre><\/div><\/div>\n
Ahora solo te falta por descubrir el c\u00f3digo m\u00e1s importante de este tutorial. El c\u00f3digo JavaScript<\/strong> que ejecuta la acci\u00f3n que se enuncia en este art\u00edculo lo puedes ver a continuaci\u00f3n:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
document.getElementById<\/span>(<\/span>'submitExport'<\/span>)<\/span>.addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span> {<\/span>\n    e.preventDefault<\/span>(<\/span>)<\/span>;<\/span>\n    let export_to_excel =<\/span> document.getElementById<\/span>(<\/span>'export_to_excel'<\/span>)<\/span>;<\/span>\n    let data_to_send =<\/span> document.getElementById<\/span>(<\/span>'data_to_send'<\/span>)<\/span>;<\/span>\n    data_to_send.value<\/span> =<\/span> export_to_excel.outerHTML<\/span>;<\/span>\n    document.getElementById<\/span>(<\/span>'formExport'<\/span>)<\/span>.submit<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Este peque\u00f1o c\u00f3digo lo que hace es esperar a que sea pulsado el bot\u00f3n con identificador \u00absubmitExport\u00bb para:<\/p>\n