Como ler arquivo CSV com React


Neste tutorial, ser√° apresentado como ler arquivo CSV com React.

Primeiramente, ser√° abordado como criar um formul√°rio com React.

Em seguida, ser√° explicado como ler os registros do Excel.

Por fim, ser√° demonstrado como imprimir na tela os registros do arquivo CSV.


Baixar o código fonte: Download

Full Stack: Curso de React e Node.js: Mais Detalhes do Curso

Playlist completa como fazer upload com Node.js e React: Acessar

Aulas gratuitas do curso de Node.js: Acessar


Primeiramente, é criado o projeto React utilizando o comando "npx create-next-app" por meio do terminal do editor "Visual Studio Code".

Em seguida, o projeto é executado através do terminal do editor utilizando o comando "npm run dev".

Com o projeto em execução, é possível acessá-lo através do navegador utilizando a URL "http://localhost:3000".

Ao acessar a URL, o projeto básico será carregado. Esse projeto básico é criado durante a instalação do React. Nele, existe o arquivo "src/pages/index.js", que representa a página inicial do site. Nessa página, será implementado o formulário.

Primeiramente, todo o código que não será utilizado é excluído, deixando apenas o cabeçalho e, dentro da TAG <main>, apenas o título.

import Head from 'next/head';

export default function Home() {  

  return (
    <>
      <Head>
        <title>Celke</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>

        <h3>Ler dados do arquivo CSV</h3>

      </main>
    </>
  )
}

Dentro da tag <main>, é criado o campo upload.

<label>Arquivo: </label>
{/* Permitir o usuário selecionar somente arquivo CSV e chamar a função quando selecionar o arquivo */}
<input type='file' accept='.csv' onChange={lerDadosArquivo} /><br /><br/>

Instalado a biblioteca para analisar o arquivo CSV.

npm install papaparse

Incluído a biblioteca no arquivo "index.js".

import Papa from 'papaparse';

O próximo passo é receber o arquivo e realizar a leitura dos dados do arquivo Excel.

// Criar a vari√°vel para receber os dados
  const [dados, setDados] = useState([]);

  // Função para ler os dados do CSV
  const lerDadosArquivo = (e) => {

    // Receber o arquivo do formul√°rio
    const arquivo = e.target.files[0];

    // Verificar se existe o arquivo
    if(arquivo){

      // Usar a biblioteca para analisar o arquivo
      Papa.parse(arquivo, {
        //Papa.parse('arquivo_inexistente.csv', { // Simular erro
        //download: true,  // Simular erro
        header: true, // Define se a primeira linha do CSV é um cabeçalho
        dynamicTyping: true, // Converte automaticamente n√ļmeros e datas
        complete: (result) => { // Acessar complete após realizar a leitura do CSV
          //console.log(result.data);
          setDados(result.data);
        },
        error: (error) => { // Acessar error se houver erro na leitura do CSV
          alert('Erro ao analisar o CSV:', error.message);
        },
      });
    }

Após realizar a leitura dos dados, é utilizado o laço de repetição para percorrer a lista de dados e imprimir na tela utilizando uma tabela.

<table>
  <thead>
    <tr>
      <th>CPF</th>
      <th>Nome</th>
      <th>E-mail</th>
      <th>Endereço</th>
    </tr>
  </thead>
  <tbody>
    {/* Percorrer a lista de registros */}
    {dados.map((row, index) => (
      <tr key={index}>
        <td>{row.cpf}</td>
        <td>{row.nome}</td>
        <td>{row.email}</td>
        <td>{row.endereco}</td>
      </tr>
    ))}
  </tbody>
</table>

Baixar o código-fonte completo do projeto.

Bom, era isso. Espero que o tutorial tenha sido √ļtil!