Exportar tablas HTML a Excel con PHP y jQuery. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet HTML

¡votar!

Exportar tablas HTML a Excel con PHP y jQuery

Vamos a ver una forma sencilla de exportar los datos que tengamos en una tabla HTML a un archivo Excell de una forma sencilla utilizando PHP y jQuery.

La idea es que los datos que estén en la tabla, por medio de jQuery los recuperemos y se los mandemos a un formulario oculto para que cuando se pulse el botón, los datos sean enviados al archivo PHP, que será el encargado de crear el fichero Excel, sin utilizar ningún tipo de librerías, solo utilizando cabeceras para indicar que el archivo será excel.

Lo primero que haremos será hacer la llamada a la librería jQuery.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Lo siguiente será crearnos la tabla html que queramos exportar.

<table id="Exportar_a_Excel">
<tr>
<td>Celda1</td>
<td>Celda2</td>
<td>Celda3</td>
<td>Celda4</td>
<td>Celda5</td>
</tr><tr>
<td>Celda6</td>
<td>Celda7</td>
<td>Celda8</td>
<td>Celda9</td>
<td>Celda10</td>
</tr>
</table>

A continuación creamos el formulario donde almacenar los datos de la tabla. Para ello le asignaremos un id para poder hacer referencia a la hora de asignar los valores de la tabla.

<form action="ficheroExcel.php" method="post" target="_blank" id="FormularioExportacion">
<p>Exportar a Excel  <img src="export_to_excel.gif" class="botonExcel" /></p>
<input type="hidden" id="datos_a_enviar" name="datos_a_enviar" />
</form>

Lo que nos tocará ahora será volcar el contenido de la tabla al campo oculto que hemos creado en el formulario para que luego podamos exportarlo a excel.

<script language="javascript">
$(document).ready(function() {
$(".botonExcel").click(function(event) {
$("#datos_a_enviar").val( $("<div>").append( $("#Exportar_a_Excel").eq(0).clone()).html());
$("#FormularioExportacion").submit();
});
});
</script>

Por último nos queda crear el archivo PHP que generará el archivo excel.

<?php
header("Content-type: application/vnd.ms-excel; name='excel'");
header("Content-Disposition: filename=ficheroExcel.xls");
header("Pragma: no-cache");
header("Expires: 0");
echo $_POST['datos_a_enviar'];
?>

En este código cabe destacar el valor del “content-type”, donde se le indica el tipo de documento que será el fichero, en nuestro caso excel.

Vía: webintenta.com