Back-End

15 jul, 2009

Tabelas HTML para o Excel com jQuery

Publicidade

Hoje vamos ver como exportar uma tabela HTML para o Excel (xls) utilizando a biblioteca jQuery.

O primeiro passo é inserir a chamada da biblioteca na página HTML, conforme a linha abaixo.

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


Em seguida é preciso, e óbvio, que você tenha uma página HTML que
contenha uma tabela e que esta esteja identificada por um ID, que no
nosso caso é “Exportar_para_excel”.

<table id="Exportar_para_Excel">
<tr>
<td>Célula1</td>
<td>Célula2</td>
<td>Célula3</td>
<td>Célula4</td>
<td>Célula5</td>
</tr>
<tr>
<td>Célula6</td>
<td>Célula7</td>
<td>Célula8</td>
<td>Célula9</td>
<td>Célula10</td>
</tr>
</table>


O passo seguinte é criar um formulário, também com um identificador,
para o armazenamento do conteúdo da tabela em um campo oculto, tornando
possível o envio para o php, que irá gerar a planilha.

<form action="arquivoExcel.php" method="post" target="_blank" id="FormularioExportacao">
<p>Exportar para Excel <img src="export_to_excel.gif" /></p>
<input type="hidden" id="dados_a_enviar" name="dados_a_enviar" />
</form>

Agora é necessário descarregar toda a tabela em um campo oculto e fazer
o envio do formulário. Para isto vamos usar a biblioteca jQuery, como
mostra o script abaixo.


<script language="javascript">

$(document).ready(function() {

$(".botaoExcel").click(function(event) {

$("#dados_a_enviar").val( $("<div>").append( $("#Exportar_para_Excel").eq(0).clone()).html());

$("#FormularioExportacao").submit();

});

});

</script>


O arquivo php fará a leitura do campo oculto “dados_a_enviar” e o
mostrará com o content-type apropriado. Sendo assim, arquivoExcel.php
seria:

<?php
header("Content-type: application/vnd.ms-excel; name='excel'");
header("Content-Disposition: filename=arquivoExcel.xls");
header("Pragma: no-cache");
header("Expires: 0);

echo $_POST[ 'dados_a_enviar' ];
?>

Clique abaixo para fazer o download do arquivo de exemplo, que inclui o arquivo da biblioteca jQuery.

Arquivo anexo: Clique aqui para download