Artigo

Exportar para Excel

image

Olá pessoal, o meu nome é Mauricio Junior e hoje eu vou falar um pouco de como exportar uma página web para excel de forma bem simples e fácil.

Problema:

Esse problema é baseado em muitos serviços e sistemas internos, porque normalmente os gerentes querem converter uma página em um relatório em excel. Para isso, existem várias ferramentas e plugins mas a melhor maneira é fazer usando javascript, grátis e simples.

Solução:

Exportar uma página feita em .NETCore usando C# e Razor para um arquivo em excel usando JavaScript. A função em JavaScript já está pronta mas é necessário fazer a chamada passando os parâmetros necessários.

Função em JavaScript

A função em JavaScript começa sempre com a tag <script>. É bom deixar sempre a função em JavaScript no início da página onde você pode chamar sem qualquer tipo de problema e a página em HTML já vai ter carregado as funções necessárias.

<script>
    //export to excel
    var tableToExcel = (function () {
        var uri = 'data:application/vnd.ms-excel;base64,'
            , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>'
            , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
            , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }

        return function (table, name) {
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
            window.location.href = uri + base64(format(template, ctx))
        }
    })()

</script>

Código 1.1 - Função em JavaScript

O que você precisa notar nesse momento são os parâmetros que preciso mandar. É necessário mandar o nome do Id da sua table da página e o nome que você quer dar para ela.

Vamos analisar a nossa tabela da página em HTML. Código 1.2.

<table class="scroll" id="resultTable" width="100%">
    <thead>
        <tr style="background-color:#dedede; font-weight:bold; font-size:small;">
            <th>Nome</th>
            <th>Endereço</th>
            <th>E-mail</th>
            <th>Data</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.Raw(item.Nome)</td>
            <td width="10%">@Html.Raw(item.Endereco)</td>
            <td>@Html.Raw(item.Email)</td>
            <td>@Html.Raw(item.Data)</td>
        </tr>
    </tbdody>
</table>
<a href="#" onclick="javascript: tableToExcel('resultTable', 'Minha tabela')" title="Exportar para Excel">Exportar</a>

Código 1.2 - Tabela na página de HTML

Abaixo da tabela eu coloquei um link <a href> e no onclick existe a chamada do código javascript pelo nome tableToExcel passando os parâmetros necessários como o id da tabela e o nome.

Bom, espero que tenha gostado e qualquer dúvida pode falar comigo pelo site https://www.mauriciojunior.net.

  • Mauricio Junior

    Mauricio Junior