DEV Community

loading...
Cover image for How To Export Data To Excel From Api Using React

How To Export Data To Excel From Api Using React

jasurkurbanovinit profile image Jasur Kurbanov ・2 min read

CREATE AND INSTALL

Create new react project

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

Now start project

npm start
Enter fullscreen mode Exit fullscreen mode

image

Project successfully created.
Lets dive into installing neccassry libraries for our project. Install these three libraries.

npm install xlsx file-saver axios --save-dev
Enter fullscreen mode Exit fullscreen mode

👉xlsx - library for parsing and writing various spreadsheet formats
👉file-saver - library for saving files on the client-side
👉axios - promise based HTTP client for the browser and node.js. We will use it for fetching data from server

UI AND LOGIC

Create a component namely ExportToExcel.js

import React from 'react'
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";

export const ExportToExcel = ({ apiData, fileName }) => {
  const fileType =
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
  const fileExtension = ".xlsx";

  const exportToCSV = (apiData, fileName) => {
    const ws = XLSX.utils.json_to_sheet(apiData);
    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });
    FileSaver.saveAs(data, fileName + fileExtension);
  };

  return (
    <button onClick={(e) => exportToCSV(apiData, fileName)}>Export</button>
  );
};
Enter fullscreen mode Exit fullscreen mode

Sample data we will get from https://jsonplaceholder.typicode.com/posts

App.js

import React from 'react'
import axios from 'axios'
import './App.css';

import {ExportToExcel} from './ExportToExcel'

function App() {
  const [data, setData] = React.useState([])
  const fileName = "myfile"; // here enter filename for your excel file

  React.useEffect(() => {
    const fetchData = () =>{
     axios.get('https://jsonplaceholder.typicode.com/posts').then(r => setData(r.data) )
    }
    fetchData()
  }, [])

  return (
    <div className="App">
      <ExportToExcel apiData={data} fileName={fileName} />
    </div>
  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

Start project

npm start
Enter fullscreen mode Exit fullscreen mode

Once it successfully started. You can see one button. By pressing this button you download excel file with data filled from https://jsonplaceholder.typicode.com/posts

Output

image

Excel File

image

Github repo for this project link

Discussion (0)

pic
Editor guide