Exportando tabelas HTML para o Excel com jQuery

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.

Por | @jonathanlamimkt Programação

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 itemprop="image" 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.

Mais sobre: jquery, php, javascript
Share Tweet
DESTAQUES
Mais compartilhados
Comentários