Exportar tabela para Excel com Javascript

Aprenda a exportar sua tabela HTML para Excel usando o plugin DataTables

A exportação de dados é um recurso muito útil, mas que pode exigir um certo esforço para implementar. Para nos ajudar, existem bibliotecas em JavaScript que facilitam o nosso trabalho. Uma delas é o DataTables.

DataTables é um plugin que trabalha junto com o Jquery, que permite adicionar recursos avançados para tabelas em HTML, como filtros, classificação de colunas e paginação de resultados.

Vou comentar sobre um recurso muito interessante, que é a exportação de dados. Com o DataTables, você pode exportar a sua tabela HTML nos formatos Excel, CSV e PDF!

Antes de começar, será necessário baixar os arquivos, você pode fazer isso a partir deste link:

DataTables

Neste exemplo, se fez necessário apenas 2 arquivos, o Jquery e a versão minificada do DataTables

A montagem da tabela não tem segredos. A única coisa que você precisa é atribuir um "ID" para a tabela. Neste exemplo, nossa tabela vai receber o id "tblTeste"

No final de sua página HTML, você vai precisar inserir o include para o Jquery e o DataTables, e inserir o seguinte código JavaScript:

var table = $( #tblTeste );

var oTable = table.dataTable({

paging: false, 

bFilter: false, 

bInfo: false,

info:     false,

dom: Bfrtip ,

buttons: [

{ extend: print },

{ extend: copy },

{ extend: pdf , orientation: landscape , title: tabela },

{ extend: excel , title: tabela },

{ extend: csv , title: tabela }

]

});

$( .dt-buttons ).hide();

O código não tem segredos. A varíavel "table" guarda o HTML de nossa tabela que tem o id "tblTeste". Na linha seguinte, ativamos a tabela, ou seja, vinculados ela com o DataTables. Os itens com "false" são para desativar todos os recursos padrão, como filtros, paginação e ordenação.

Perceba que temos um array "buttons", nele podemos fazer a configuração dos botões, o "extend" se refere ao tipo de botão, o "title" vai ser o nome do arquivo a ser exportado.

o ".dt-buttons" hide vai esconder uma DIV criada de forma automática pelo DataTables. Por padrão, ele adiciona os botões de exportar acima da tabela, todos ficam dentro de uma div com uma classe chamada "dt-buttons". Não queremos isso, vamos inserir os botões de forma manual.

Vamos adicionar apenas um botão, que seria um link para exportar para o Excel.  A posição do link fica a seu critério, como exemplo, vou inserir acima da tabela. O link deve ter a propriedade "onclick" desta forma:

$(".buttons-excel").click();

Perceba que no evento onclick de nosso link, estamos utilizando o Jquery para disparar o evento click de algum elemento com a classe "buttons-excel". Em nenhum momento inserimos algum elemento com este nome.

Quando você cria um DataTables, os botões padrão (que estão ocultos) recebem estas classes ("button_" + nome do tipo de botão). Ao disparar o evento "click" deste elemento oculto, executamos a programação que faz a exportação.

Aqui tem um exemplo mais completo, mostrando os diferentes tipos de exportação. Todo o código fonte pode ser visto no link a seguir:

Exportar tabela em Excel

 

Quer conferir mais dicas sobre JavaScript? Clique aqui e veja mais dicas!