Como exportar dados de uma tabela HTML para Excel usando JavaScript

Amigos da Esperança, Saraiva aqui para o portal belmitec.com!

Neste poste vou te ajudar a exportar uma tabela html simples para Excel de uma forma bem simples usando JavaScript.

Exportar dados para o Excel é muito útil para quase todos os aplicativos da web.
Com esse recurso de exportação você pode baixar uma lista de dados como um formato de arquivo para uso offline.

O formato Excel é ideal para exportar dados em um arquivo. O método do lado do servidor é usado para exportar dados para o Excel usando PHP. Mas se você deseja uma solução do lado do cliente para exportar dados da tabela para o Excel, isso pode ser feito facilmente usando JavaScript.

Vamos adiante!

Exporte dados da tabela HTML para o Excel

Código JavaScript:

A função exportTableToExcel() converte os dados da tabela HTML para Excel e baixa como arquivo XLS (.xls).

tableID -> Obrigatório. Aqui você especifica o ID da tabela HTML que você quer exportar os dados.
filename –> Opcional. Aqui você especifica o nome a ser dado para o arquivo quando baixado.

<script>

function exportTableToExcel(tableID, filename = ''){
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
    
    // Especificando o nome do arquivo
    filename = filename?filename+'.xls':'excel_data.xls';
    
    // Criando o elemento para download do arquivo
    downloadLink = document.createElement("a");
    
    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        // Criando o link do arquivo
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
    
        // Setando o nome do arquivo
        downloadLink.download = filename;
        
        //Acionando a função
        downloadLink.click();
    }
}

</script>​

<table id="dadosDaTabela">
    <tr>
        <th>Nome</th>
        <th>Email</th>
        <th>Pais</th>
    </tr>
    <tr>
        <td>Saraiva</td>
        <td>contato@belmtec.com</td>
        <td>Brasil</td>
    </tr>
    <tr>
        <td>Lucas Lima</td>
        <td>atendimento@belmitec.com</td>
        <td>Bolívia</td>
    </tr>
    <tr>
        <td>Sam Faria</td>
        <td>sam@exempplo.com</td>
        <td>Canada</td>
    </tr>
</table>​

<button onclick="exportTableToExcel('dadosDaTabela')">Exportar para Excel</button>​

<button onclick="exportTableToExcel('dadosDaTabela', 'nome-do-arquivo')">Exportar para Excel</button>​

Conclusão

Este código de exemplo ajuda você a adicionar a funcionalidade de exportação na tabela HTML sem nenhum plug-in jQuery de terceiros ou script do lado do servidor.

Você pode exportar facilmente os dados da tabela usando código JavaScript mínimo. Além disso, a funcionalidade do código de exemplo pode ser aprimorada ou personalizada facilmente de acordo com suas necessidades.

O arquivo exportado estará sem estilização. Estatá simples sem formatações mas já será suficiente para você trabalhar com os dados obtidos direto no excel.

Estou preparando um conteúdo mais completo usando este códido para exportar dados direto de uma tabela do MySql. Em breve estará aqui disponível pra você.

Obriado pelo seu tempo!

Espero que esse conteúdo tenha diso útil pra você!

Vamos adiante!