Como exportar dados de uma API para Excel Usando React.

Vamos começar iniciando um projeto em React, usando nosso bom e velho CRA

npx create-react-app react-excel

Para poder nos ajudar e facilitar bastante o nosso trabalho, vamos usar a lib sheetJS CE deixarei o link da documentação deles aqui, se quiserem dar uma olhada, é uma documentação ótima.

Para instalar no nosso projeto é bem simples:


// npm
npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

// pnpm
pnpm install --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

// yarn
yarn add https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

Trabalharemos dentro do nosso App.js mesmo, pois a implementação é bem simples, mas pensando em React sempre precisamos ter em mente que esse deve ser um componente que pode ser reutilizável em outros locais da sua aplicação.

Vamos modificar o nosso App.js para deixar dessa forma:

import './App.css';

function App() {
  const handleDownload = () => {
    console.log('Downloading')
  }


  return (
    <div className="App">
      <button onClick={handleDownload}>Download</button>
    </div>
  );
}

export default App;

Vamos usar uma API de dados fake, você pode usar qualquer uma que você conhece, mas se não conhecer nenhuma, estou usando essa aqui, JSONPLACEHOLDER. Daí o código fica dessa forma.

import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => setTodos(json))
  }, []);

  const handleDownload = () => {
    console.log("test data", todos);
  };
  return (
    <div className="wrapper">
      <button onClick={handleDownload}>DOWNLOAD EXCEL</button>
    </div>
  );
}

export default App;

Agora vamos implementar dentro da função handleDownload nossa lógica para adicionarmos os dados dentro de um arquivo de excel e fazer o download desse arquivo.

import { useEffect, useState } from "react";
import "./App.css";
import * as XLSX from "xlsx";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => setPosts(json))
  }, []);

  const handleDownload = () => {
    // Aqui criamos as rows da tabela
    const rows = posts.map((post) => ({
      id: post.userId,
      title: post.title,
      body: post.body,
    }));

    // cria workbook e worksheet
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet(rows);

    XLSX.utils.book_append_sheet(workbook, worksheet, "Posts");

    XLSX.writeFile(workbook, "posts.xlsx", { compression: true });
  };
  return (
    <div className="wrapper">
      <button onClick={handleDownload}>DOWNLOAD EXCEL</button>
    </div>
  );
}

export default App;

Destaquei que na const rows criamos as linhas da tabela, e id, title e body, serão os headers da nossa tabela, e as consts workbook e worksheet criamos uma instância para o nosso arquivo de excel e depois convertemos um estrutura json para uma tabela. Por último críamos file usando XLXS.writeFile passamos o workbook, passamos o nome do arquivo, que no nosso caso vai ser posts.xlsx se for excel do Windows seria posts.xls e podemos deixar o arquivo comprimido ou não.

Se tudo deu certo você irá conseguir baixar um arquivo dessa forma: