JAVASCRIPT

Exportar tabela para Excel com Javascript

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

07/10/2019JAVASCRIPT

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

Outros conteudos que podem ser de seu interesse

Mascaras para campos de formularios com Javascript
02/08/2020JAVASCRIPT

Mascaras para campos de formularios com Javascript

Veja como criar máscaras para campos de formulários com Javascript

Saiba mais...
Cuidado! Robôs estão lendo o seu currículo
04/07/2021JAVASCRIPT

Cuidado! Robôs estão lendo o seu currículo

Descubra como criar um currículo que possa ser lido por ferramentas de recrutamento

Saiba mais...

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

MySQL - Referência Rápida

 

SQL Server - Referência Rápida

 

SQL vs Mongo