Blazor -  Lendo dados a partir do Excel

Hoje veremos como acessar e ler dados de um arquivo Excel e exibir em uma aplicação Blazor.

Se você esta chegando agora e não sabe o que é o Blazor leia o artigo ASP .NET Core - Iniciando com o Blazor - Macoratti; se você já conhece e quer saber mais pode fazer o curso de Blazor Essencial.  

Lendo dados de um arquivo Excel no Blazor

Para nos ajudar na tarefa de ler um arquivo Excel vamos usar a biblioteca EPPlus.

A EPPlus é uma biblioteca do .NET Framework/.NET Core para gerenciar planilhas XML abertas do Office, distribuídas via Nuget . A versão 5 suporta o .NET Framework da versão 3.5 e .NET Core da versão 2.0.

Nota: Atualmente é uma única DLL e não tem dependências de nenhuma outra biblioteca, como o Microsoft Excel.

Para conhecer mais detalhes sobre esta biblioteca acesse o link: EPPlus Software

Vamos a seguir mostrar um exemplo prático.

Recursos usados:

Criando o projeto no VS Community 2019

bra o VS 2019 Community (versão mínima 16.4) e selecione a opção Create a New Project;

A seguir selecione a opção Blazor app e clique em next;

Informe o nome do projeto :  Blazor_LerExcel, a localização e clique em Create;

A seguir teremos uma janela com duas opções :

  1. Blazor Server App
  2. Blazor WebAssembly App

Selecione a primeira opção - Blazor Server App. Não vamos usar autenticação e vamos habilitar o https.

Clique no botão Create para criar o projeto.

Com o projeto criado vamos limpar o projeto excluindo os arquivos abaixo e suas referências:

Após isso vamos instalar a biblioteca EPPlus em nosso projeto via Nuget acionando a opção menu Tools-> Manage Nuget Packages for Solution:

Na pasta Data do  projeto vamos criar o nosso modelo de dados com as informações que vamos ler da planilha. Para isso vamos criar uma classe Aluno:

    public class Aluno
    {
        public string Nome { get; set; }
        public string Nota { get; set; }
        public string Email { get; set; }
        public List<Aluno> LerExcel()
        {
            List<Aluno> alunos = new List<Aluno>();
            string caminho = @"c:/dados/notas.xlsx";
            FileInfo arquivo = new FileInfo(caminho);
            ExcelPackage.LicenseContext = LicenseContext.NonCommercial;
            using(ExcelPackage package = new ExcelPackage(arquivo))
            {
                ExcelWorksheet worksheet = package.Workbook.Worksheets.FirstOrDefault();
                int contaColuna = worksheet.Dimension.End.Column;
                int contaLinha = worksheet.Dimension.End.Row;
                for(int row=1; row<= contaLinha; row++)
                {
                    Aluno aluno = new Aluno();
                    for(int col=1; col <= contaColuna; col++)
                    {
                        if(col==1)
                        {
                            aluno.Nome = worksheet.Cells[row, col].Value.ToString();
                        }
                        else if(col==2)
                        {
                            aluno.Email = worksheet.Cells[row, col].Value.ToString();
                        }
                        else if(col ==3)
                        {
                            aluno.Nota = worksheet.Cells[row, col].Value.ToString();
                        }
                    }
                    alunos.Add(aluno);
                }
            }
            return alunos;
        }
    }

Nesta classe temos o método LerExcel que retorna uma lista de objetos Aluno onde estamos usando os recursos da biblioteca EPPlus para acessar o arquivo notas.xlsx que esta na pasta c:\dados e cujo contéudo e visto a seguir:

Vamos ler essas informações deste arquivo e exibir em uma página da nossa aplicação.

Agora vamos ajustar o arquivo NavMenu.razor deixando apenas a opção Home e a opção Ler Arquivo Excel para acessar o componente LerExcel.razor que iremos criar para exibir os dados da planilha Excel.

...
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="lerexcel">
                <span class="oi oi-plus" aria-hidden="true"></span> Ler Arquivo Excel
            </NavLink>

        </li>
    </ul>
</div>

...

Na pasta Pages vamos criar o componente Blazor LerExcel.razor e com o código abaixo:

@page "/lerexcel"
<h3>Notas dos Alunos</h3>
@if (alunos != null)
{
<table>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Email</th>
            <th>Nota</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in alunos)
        {
        <tr>
            <td>@item.Nome</td>
            <td>@item.Email</td>
            <td>@item.Nota</td>
        </tr>
        }
    </tbody>
</table>
}
else
{
  <h2>carregando...</h2>
}
@code {
    Aluno aluno = new Aluno();
    List<Aluno> alunos = new List<Aluno>();
    protected override void OnInitialized()
    {
        LerArquivoExcel();
    }
    private void LerArquivoExcel()
    {
        alunos = aluno.LerExcel();
    }
}

Neste código estamos usando o evento OnInitialized() para invocar o método LerArquivoExcel() que vai usar a instância da classe Aluno e chamar o método LerExcel() que retorna os dados da planilha.

Vamos aplicar um estilo à nossa tabela usada para exibir os dados, criando na pasta wwwroot/css o arquivo Style.css com o seguinte código:

table {
    margin-bottom:5px;
}
table th, table td {
    border:0px solid #ffffff;
    margin:2px;
}
table tr:nth-child(odd) {
     background: #40baef;
}
table tr:hover {
     background: #eba5f1;
     cursor: pointer;
}

Após isso inclua a referência a este arquivo css na seção head do arquivo _Host.cshtml:

...

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor_LerExcel</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="~/css/Style.css" rel="stylesheet" />
</head>
...

Agora é só alegria...

Executando o projeto teremos o resultado abaixo:

Aguarde mais artigos sobre o Blazor.

Pegue o projeto aqui:   Blazor_LerExcel.zip (sem as referências)

"Mas Deus escolheu as coisas loucas deste mundo para confundir as sábias; e Deus escolheu as coisas fracas deste mundo para confundir as fortes;
E Deus escolheu as coisas vis deste mundo, e as desprezíveis, e as que não são, para aniquilar as que são;
Para que nenhuma carne se glorie perante ele."

1 Coríntios 1:27-29

 


Referências:


José Carlos Macoratti