Exportar tabela para Excel com Javascript

Exportar tabela para Excel com Javascript

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! Com este plugin você consegue gerar planilha Excel usando Javascript.

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

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

 

Outros conteudos que podem ser de seu interesse

Validando formularios com Wordpress
12/03/2017JAVASCRIPT

Validando formularios com Wordpress

Aprenda como fazer uma validação de formulário do lado do cliente usando Wordpress

Saiba mais...
Números e datas por extenso em JavaScript
31/10/2019JAVASCRIPT

Números e datas por extenso em JavaScript

Veja alguns exemplos de como fazer isso com JavaScript

Saiba mais...

Conteúdo sobre banco de dados sem complicação!