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

Percorrer as propriedades de um objeto com JavaScript
25/11/2019JAVASCRIPT

Percorrer as propriedades de um objeto com JavaScript

Veja as várias formas de fazer loop nas propriedades de um objeto

Saiba mais...
Remover elementos de um array com JavaScript
16/08/2020JAVASCRIPT

Remover elementos de um array com JavaScript

Confira as várias formas de apagar elementos de uma array com JavaScript

Saiba mais...

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