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

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

Como funciona a lógica da validação do CPF
10/11/2019JAVASCRIPT

Como funciona a lógica da validação do CPF

Entenda as regras por trás da validação deste importante documento

Saiba mais...
Operações de agregação com JavaScript
15/03/2020JAVASCRIPT

Operações de agregação com JavaScript

Veja como extrair de um array a soma, média, maior e menor valor

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