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:
![](https://i0.wp.com/miro.medium.com/v2/resize:fit:674/1*cVv33yx6icWj2yfdlRu-ug.png?w=640&ssl=1)
É isso, bem simples não ? Espero que tenham gostado, qualquer sugestão ou feedback será muito bem vindo. Obrigado.