Como ler arquivo CSV com React

Publicado 04 de outubro de 2023

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!