Вступление
В этой статье мы узнаем, как экспортировать данные в Excel с помощью ReactJS. В этой демонстрации мы будем использовать библиотеку реагировать в формате html-table-to-excel для экспорта данных в лист Excel.
Предпосылки
- Мы должны иметь базовые знания о React.js и веб-API.
- Visual Studio и Visual Studio Code IDE должны быть установлены в вашей системе.
- SQL Server Management Studio
- Базовые знания Bootstrap и HTML
Создать проект ReactJS
Теперь давайте сначала создадим приложение React с помощью следующей команды.
Джава
1
npx create-react-app matform
Откройте только что созданный проект в Visual Studio и установите библиотеку response-html-table-to-excel с помощью следующей команды.
Оболочка
1
npm install --save react-html-table-to-excel
Теперь установите Bootstrap с помощью следующих команд.
Оболочка
xxxxxxxxxx
1
npm install --save bootstrap
Теперь откройте файл index.js и добавьте импорт Bootstrap.
Джава
xxxxxxxxxx
1
import 'bootstrap/dist/css/bootstrap.min.css';
Теперь установите библиотеку Axios с помощью следующей команды. Узнайте больше об Axios здесь.
Оболочка
xxxxxxxxxx
1
npm install --save axios
Теперь перейдите в папку src и добавьте новый компонент с именем «ExportExcel.js».
Теперь откройте компонент ExportExcel.js и импортируйте следующую ссылку.
Джава
xxxxxxxxxx
1
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
Добавьте следующий код в этот компонент.
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import axios from 'axios';
3
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
4
export class ExportExcel extends Component {
5
constructor(props) {
6
super(props)
7
this.state = {
8
ProductData: []
9
10
}
11
}
12
componentDidMount() {
13
axios.get('http://localhost:51760/Api/Emp/employee').then(response => {
14
console.log(response.data);
15
this.setState({
16
ProductData: response.data
17
});
18
});
19
}
20
render() {
21
return (
22
<div>
23
<table id="emp" class="table">
24
<thead>
25
<tr>
26
<th>Id</th>
27
<th>Name</th>
28
<th>Age</th>
29
<th>Address</th>
30
<th>City</th>
31
<th>ContactNum</th>
32
<th>Salary</th>
33
<th>Department</th>
34
35
36
37
</tr>
38
</thead>
39
<tbody> {
40
this.state.ProductData.map((p, index) => {
41
return <tr key={index}>
42
<td>
43
{p.Id}
44
</td>
45
<td >{p.Name}</td>
46
<td >{p.Age}</td>
47
<td >{p.Address}</td>
48
<td >{p.City}</td>
49
<td >{p.ContactNum}</td>
50
<td >{p.Salary}</td>
51
<td style={{ paddingRight: "114px" }} >{p.Department}</td>
52
</tr>
53
})
54
}
55
56
</tbody>
57
58
</table>
59
<div>
60
<ReactHTMLTableToExcel
61
className="btn btn-info"
62
table="emp"
63
filename="ReportExcel"
64
sheet="Sheet"
65
buttonText="Export excel" />
66
</div>
67
</div>
68
)
69
}
70
}
71
72
export default ExportExcel
Добавьте ссылку на этот компонент в файл app.js, добавьте следующий код в файл app.js.
Джава
xxxxxxxxxx
1
import React from 'react';
2
import logo from './logo.svg';
3
import './App.css';
4
import ExportExcel from './ExportExcel'
5
6
function App() {
7
return (
8
<div className="App">
9
<ExportExcel/>
10
</div>
11
);
12
}
13
14
export default App;
Наш проект React.js создан. Теперь создайте таблицу базы данных и проект веб-API для отображения данных в таблице.
Создать таблицу в базе данных
Откройте SQL Server Management Studio, создайте базу данных с именем «Сотрудник» и в этой базе данных создайте таблицу. Дайте этой таблице имя типа «Сотрудник».
SQL
xxxxxxxxxx
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
Теперь добавьте демонстрационные данные в эту таблицу.
Создать новый проект веб-API
Откройте Visual Studio и создайте новый проект.
Измените имя на MatUITable.
Выберите шаблон как «Веб-API».
Щелкните правой кнопкой мыши папку «Модели» в обозревателе решений и выберите «Добавить» >> «Новый элемент» >> «Данные».
Нажмите на «ADO.NET Entity Data Model» и нажмите «Добавить».
Выберите EF Designer из базы данных и нажмите кнопку «Далее».
Добавьте свойства соединения, выберите имя базы данных на следующей странице и нажмите OK.
Проверьте флажок «Таблица». Внутренние параметры будут выбраны по умолчанию. Теперь нажмите ОК.
Теперь наша модель данных успешно создана.
Щелкните правой кнопкой мыши папку «Контроллеры» и добавьте новый контроллер. Назовите его «Контроллер сотрудника» и добавьте следующее пространство имен в контроллер «Сотрудник».
C #
xxxxxxxxxx
1
using MatUITable.Models;
Теперь добавьте метод для извлечения данных из базы данных.
Джава
xxxxxxxxxx
1
[HttpGet]
2
[Route("employee")]
3
public object Getrecord()
4
{
5
var emp = DB.Employees.ToList();
6
return emp;
7
}
Полный код контроллера сотрудника:
C #
xxxxxxxxxx
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
}
Теперь давайте включим CORS . Зайдите в Инструменты, откройте диспетчер пакетов NuGet, найдите CORS и установите пакет «Microsoft.Asp.Net.WebApi.Cors». Откройте Webapiconfig.cs и добавьте следующие строки
Джава
xxxxxxxxxx
1
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
2
config.EnableCors(cors);
Теперь перейдите в Visual Studio Code и запустите проект с помощью npm start
команды.
Нажмите на кнопку «Экспорт в Excel». После загрузки Excel откройте и проверьте.