{{announcement.body}}
{{announcement.title}}

How to Export Data to Excel in ReactJS

DZone 's Guide to

How to Export Data to Excel in ReactJS

This tutorial goes through the steps of creating and configuring a ReactJS application that creates and exports data to Microsoft Excel.

· Web Dev Zone ·
Free Resource

Introduction 

In this article, we will learn how to export data in Excel using ReactJS. In this demo, we will use the react-html-table-to-excel library to export data in an Excel sheet.

Prerequisites 

  • We should have basic knowledge of React.js and Web API.
  • Visual Studio and Visual Studio Code IDE should be installed on your system.
  • SQL Server Management Studio
  • Basic knowledge of Bootstrap and HTML

Create ReactJS project

Now, let's first create a React application with the following command.

Java
 




x


 
1
npx create-react-app matform   


Open the newly created project in Visual Studio and install react-html-table-to-excel library using the following command.

Shell
 






Now install Bootstrap by using the following commands.  

Shell
 






Now, open the index.js file and add import Bootstrap. 

Java
 






Now Install the Axios library by using the following command. Learn more about Axios here.

Shell
 






Now go to the src folder and add a new component, named "ExportExcel.js."

Now open ExportExcel.js component and import following reference.

Java
 






 Add the following code in this component.

JavaScript
 






Add a reference of this component in app.js file, add the following code in app.js file.

Java
 






Our React.js project is created. Now create a database table and web API project to show data in a table.

Create a Table in The Database

Open SQL Server Management Studio, create a database named "Employee," and in this database, create a table. Give that table a name like "Employee."

SQL
 




xxxxxxxxxx
1
15


1
CREATE TABLE [dbo].[Employee](        
2
    [Id] [int] IDENTITY(1,1) NOT NULL,        
3
    [Name] [varchar](50) NULL,        
4
    [Age] [int] NULL,        
5
    [Address] [varchar](50) NULL,        
6
    [City] [varchar](50) NULL,        
7
    [ContactNum] [varchar](50) NULL,        
8
    [Salary] [decimal](18, 0) NULL,        
9
    [Department] [varchar](50) NULL,        
10
 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED         
11
(        
12
    [Id] ASC        
13
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]        
14
) ON [PRIMARY]        
15
GO       


Now add demo data in this table.

Create a New Web API Project

Open Visual Studio and create a new project.

Create new project

 

Change the name to MatUITable.

MatUITable

 

Choose the template as "Web API."

Web API template

 

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data. 

Add data 

Click on the "ADO.NET Entity Data Model" option and click "Add".

Add ADO.NET Model

 

Select EF Designer from the database and click the "Next" button. Select EF Designer

Add the connection properties and select database name on the next page and click OK. 

Database name

 

Check the "Table" checkbox. The internal options will be selected by default. Now, click OK.

 Internal options

Now, our data model is successfully created. 

Right-click on the Controllers folder and add a new controller. Name it "Employee controller" and add the following namespace in the Employee controller.

C#
 




xxxxxxxxxx
1


1
using MatUITable.Models;   



Now add a method to fetch data from the database.

Java
 




xxxxxxxxxx
1


1
[HttpGet]    
2
[Route("employee")]    
3
public object Getrecord()    
4
{    
5
    var emp = DB.Employees.ToList();    
6
    return emp;    
7
}  



 Complete Employee controller code:

C#
 




xxxxxxxxxx
1
24


 
1
using System;      
2
using System.Collections.Generic;      
3
using System.Linq;      
4
using System.Net;      
5
using System.Net.Http;      
6
using System.Web.Http;      
7
using MatUITable.Models;      
8
namespace MatUITable.Controllers      
9
{      
10
      
11
    [RoutePrefix("Api/Emp")]      
12
    public class EmployeeController : ApiController      
13
    {      
14
        EmployeeEntities DB = new EmployeeEntities();      
15
        [HttpGet]      
16
        [Route("employee")]      
17
        public object Getrecord()      
18
      
19
        {      
20
            var emp = DB.Employees.ToList();      
21
            return emp;      
22
        }      
23
    }      
24
}     


Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines

Java
 




xxxxxxxxxx
1


1
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");            
2
config.EnableCors(cors);  


Now go to Visual Studio Code and run the project using  npm start  command.

Click on the "Export Excel" button. Once Excel downloads, open, and check. 

Further Reading


Topics:
database ,excel ,microsoft excel ,reactjs ,web app ,web dev ,webapi

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}