In my previous post, about exporting data to Excel from api using React, there were comments like how to add custom header and style to the sheet!?. So considering these comments, in this post I decided to show solution for first issue which is adding custom headers to your Excel sheet.

In this post two ways of adding custom headers will be shown

First way

Setup

Create a new project

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

Run project locally

npm start
Enter fullscreen mode Exit fullscreen mode

How To Export Data To Excel From Api Using React (incl. Custom Headers)

Let's dive into next step.

Install libraries

For this project we need to install following libraries:

npm install xlsx file-saver axios
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

Components

Inside your project create component 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

Update your 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(postData => {

     // reshaping the array
     const customHeadings = postData.data.map(item=>({
       "Article Id": item.id,
       "Article Title": item.title
     }))

      setData(customHeadings) 
     })
    }
    fetchData()
  }, [])

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

export default App;
Enter fullscreen mode Exit fullscreen mode

According to official SheetJS CE docs. By default, json_to_sheet creates a worksheet with a header row.

This way of adding header is reshaping array to object, based on our needs. Since the headers for Excel file come from the object keys we defined.

In our case headers will be "Article Id" and "Article Title".

Run project

npm start
Enter fullscreen mode Exit fullscreen mode

How To Export Data To Excel From Api Using React (incl. Custom Headers)

Once project started successfully, click to button to download Excel file.

How To Export Data To Excel From Api Using React (incl. Custom Headers)

Result

How To Export Data To Excel From Api Using React (incl. Custom Headers)

Second way

No need to reshape array inside App.js. Just need to add this code

 XLSX.utils.sheet_add_aoa(ws, [["Name", "Birthday", "Age", "City"]], { origin: "A1" });
Enter fullscreen mode Exit fullscreen mode

inside your ExportToExcel.js file

  const exportToCSV = (apiData, fileName) => {
    const ws = XLSX.utils.json_to_sheet(apiData);
    /* custom headers */
    XLSX.utils.sheet_add_aoa(ws, [["Name", "Birthday", "Age", "City"]], { origin: "A1" });
    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);
  };
Enter fullscreen mode Exit fullscreen mode

Result

How To Export Data To Excel From Api Using React (incl. Custom Headers)

Source code links

1st way

2nd way

# reactnative # javascript # oneapi
Logo
React

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐

SSR、ISR、CSR、SSG有什么区别

简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。 企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对

avatar React

React 中具有“显示更多/更少”功能的代码列表项

我想在我的页面上显示一个元素列表,并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。 为此,我将使用 React。我将从以下虚拟 API 获取一些假数据 u003d>jsonplaceholder.typicode.com 我将使用axios这样做。 我的结构中将包含三个页面:App.js、Texts.js 和 Text.js。 你可以在这里找到 repo u003d>githu

avatar React

React::Angular

苹果与橙子 Angular vs. React:比较苹果和橘子 有人说比较 React 和 Angular 就像比较_苹果和橘子_。 一个是处理视图的库,另一个是_完整的框架_。 反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,

avatar React