DEV Community

Cover image for Simple Way To Export Data From API To Excel Using ReactJS in 2023
Jasur Kurbanov
Jasur Kurbanov

Posted on

Simple Way To Export Data From API To Excel Using ReactJS in 2023

New React Project

npx create-react-app react-to-excel
Enter fullscreen mode Exit fullscreen mode

Start project

npm start
Enter fullscreen mode Exit fullscreen mode

Once project successfully created. Lets dive into installing necessary library.

Library Installation

For this tutorial we will use library namely SheetJS Community Edition. This library can installed through these package managers

npm

npm i --save https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz
Enter fullscreen mode Exit fullscreen mode

pnpm

pnpm install https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz
Enter fullscreen mode Exit fullscreen mode

yarn

yarn add https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz
Enter fullscreen mode Exit fullscreen mode

User Interface

Let's make this kind of UI.

Image description

App.js

import "./App.css";

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

export default App;

Enter fullscreen mode Exit fullscreen mode

App.css

.wrapper {
  padding: 20px;
}

button {
  margin-top: 20px;
  padding: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Logic

First lets fetch data from API. In this tutorial I am using this API https://fakestoreapi.com/products. Lets add useState for storing data and useEffect for sending request after render.

App.js

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

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("https://fakestoreapi.com/products")
      .then((res) => res.json())
      .then((json) => setProducts(json));
  }, []);

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

export default App;
Enter fullscreen mode Exit fullscreen mode

Result

data to excel

As you can see we successfully fetched data from API. Now lets implement logic for making our Excel file. First add import * as XLSX from "xlsx"; on top of App.js file for importing SheetsJS library.

App.js

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

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("https://fakestoreapi.com/products")
      .then((res) => res.json())
      .then((json) => setProducts(json));
  }, []);

  const handleDownload = () => {
    // flatten object like this {id: 1, title:'', category: ''};
    const rows = products.map((product) => ({
      id: product.id,
      title: product.title,
      category: product.category,
    }));

    // create workbook and worksheet
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet(rows);

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

    // customize header names
    XLSX.utils.sheet_add_aoa(worksheet, [
      ["Product ID", "Product Name", "Product Category"],
    ]);

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

export default App;
Enter fullscreen mode Exit fullscreen mode

Result

As you can see from screenshot below by pressing to button. We can successfully download data from API inside Excel file.

Image description

Now I open ReportFor2023.xlsx file

last demo

Project source code available on Github. Source code

If you need help for you project or doing any other web related projects reach me out

Email: jasurkurbanov96@gmail.com
Linkedin: https://www.linkedin.com/in/jasurkurbanov/

Top comments (0)