DEV Community

WoneyBranga
WoneyBranga

Posted on

Transformando dados copiados do excel em um array e uma planilha via livewire.

Quando copiamos os dados de uma planilha de excel, o que recebemos é uma string com delimitadores de colunas \t e delimitadores de linhas \n.

O que faremos a seguir é para dada uma cópia de dados do excel, transformar estes dados em um array e depois gerar uma tabela de saída em um componente livewire.

//vamos gerar nosso componente livewire
php artisan livewire:make app.excel.import
Enter fullscreen mode Exit fullscreen mode
// app/Http/Livewire/App/Excel/Import.php
<?php

namespace App\Http\Livewire\App\Excel;

use Livewire\Component;

class Import extends Component
{
    public
        $dadosExcel,
        $dados = [];

    public function render()
    {
        return view('livewire.app.excel.import');
    }

    public function updatedDadosExcel()
    {
        $this->dados = $this->handleDados();
        $this->dadosExcel = null;
    }

    public function handleDados()
    {
        $dados = [];

        $linhas = explode("\n", $this->dadosExcel);

        foreach ($linhas as $linha) {

            if ($linha == '') {
                continue;
            }

            $colunas = explode("\t", $linha);

            $dados[] = $colunas;
        }

        return $dados;
    }
}
Enter fullscreen mode Exit fullscreen mode
// /resources/views/livewire/app/excel/import.blade.php
<div>
    <div class="m-4 rounded-lg bg-gray-100 p-4 shadow">

        @if (!$dados)
            <label class="mb-2 block text-sm font-medium text-gray-900"
                   for="message">Dados da planilha</label>
            <textarea class="block w-80 rounded-lg border border-red-400 bg-red-50 p-2.5 text-sm text-red-900 placeholder-red-400 focus:border-red-500 focus:ring-red-500"
                      id="message"
                      placeholder="Cole os dados de sua planilha aqui..."
                      rows="2"
                      wire:model.debounce='dadosExcel'></textarea>
        @endif
        @if ($dados)
            <div class="">
                <table
                       class="block w-full table-auto border-separate overflow-x-scroll border-red-300 bg-gray-300 text-center text-sm">
                    @for ($n = 0; $n < count($dados); $n++)
                        <tr class="sticky top-0 odd:bg-gray-50 even:bg-gray-100 hover:bg-purple-100" />
                        @if ($n == 0)
                            @foreach ($dados[$n] as $item)
                                <th>{{ $item }}</th>
                            @endforeach
                            <td>ACAO</td>
                        @else
                            @foreach ($dados[$n] as $item)
                                <td>{{ $item }}</td>
                            @endforeach
                            {{-- criar acao --}}
                            <td>
                                <div class="rounded-lg border border-indigo-600 bg-indigo-300 hover:bg-indigo-400">
                                    {{ 'Acao: ' . $dados[$n][0] }}
                                </div>
                            </td>
                        @endif
                        </tr>
                    @endfor
                </table>
            </div>
        @endif
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

aqui temos o a apresentação de nosso formulário de entrada da planilha
Dados do formulario

aqui temos a apresentação dos dados de saída após se colar alguns dados no nosso formulário de entrada.
Dados da tabela gerada

independente do numero de linhas e colunas, o sistema sempre nos trará todas as informações passadas.

a partir deste ponto poderíamos preparar os dados e colunas de interesse e popular estes dados em um banco facilmente.

é isso...

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more