
В React есть два способа реализации функции экспорта: с помощью любой сторонней библиотеки или с помощью создания компонента. Рассмотрим оба способа ниже.
Пример проекта
Возьмем простое приложение с данными в таблице и кнопкой экспорта в правом верхнем углу. При нажатии на кнопку данные из таблицы загружаются в таблицу Excel.

Проект можно импортировать отсюда и запустить напрямую.
// clone the project git clone https://github.com/bbachi/react-exportexcel-example.git // install and start the project npm install npm start
Предварительная подготовка
Создайте проект React с помощью create-react-app и установите пакеты npm xslx, bootstrap и file-saver.
// generate react project create-react-app react-exportexcel-example // install bootstrap npm install react-bootstrap bootstrap --save // install xsls and file-saver npm install xlsx file-saver --save
Добавьте таблицы стилей из библиотеки React Bootstrap в index.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <!-- Bootstrap stylesheet link --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>
Создание заголовка
Создаем заголовок для приложения. Это не обязательный шаг для реализации функции экспорта, однако с ним приложение выглядит лучше.
import React from 'react' export const Header = () => { return ( <div className="header"> <h1>React Export To Excel Example</h1> </div> ) }
Создание таблицы Customers
Создаем компонент таблицы Customer. Это презентационный компонент, который принимает массив customers в качестве props и отображает в виде таблицы.
import React from 'react' import Table from 'react-bootstrap/Table'; export const Customers = ({customers}) => { const CustomerRow = (customer,index) => { return( <tr key = {index} className='even'> <td> {index + 1} </td> <td>{customer.firstName}</td> <td>{customer.lastName}</td> <td>{customer.email}</td> <td>{customer.address}</td> <td>{customer.zipcode}</td> </tr> ) } const CustomerTable = customers.map((cust,index) => CustomerRow(cust,index)) const tableHeader = <thead className='bgvi'> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Address</th> <th>Zipcode</th> </tr> </thead> return ( <Table striped bordered hover> {tableHeader} <tbody> {CustomerTable} </tbody> </Table> ) }
Передача данных из компонента App
Нам нужно передать данные, отображаемые в таблице, из компонента app, а также импортировать компоненты Customers и Header для использования в функции render.
import React from 'react'; import './App.css'; import { Customers } from './Customers' import { Header } from './Header' class App extends React.Component { customers = () => { let custs = [] for (let i = 0; i <= 25; i++) { custs.push({firstName: `first${i}`, lastName: `last${i}`, email: `abc${i}@gmail.com`, address: `000${i} street city, ST`, zipcode: `0000${i}`}); } return custs; } render() { return ( <div className="App"> <Header /> <Customers customers={this.customers()}/> </div> ); } } export default App;
Приложение должно выглядеть следующим образом:

Реализация функции экспорта
Создаем компонент ExportCSV, принимающий данные в качестве props и осуществляющий функцию экспорта. В данном примере содержится компонент с методом exportToCSV, который обрабатывает все функции загрузки excel с помощью xlxs и file-saver.
import React from 'react' import Button from 'react-bootstrap/Button'; import * as FileSaver from 'file-saver'; import * as XLSX from 'xlsx'; export const ExportCSV = ({csvData, fileName}) => { const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'; const fileExtension = '.xlsx'; const exportToCSV = (csvData, fileName) => { const ws = XLSX.utils.json_to_sheet(csvData); 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 variant="warning" onClick={(e) => exportToCSV(csvData,fileName)}>Export</Button> ) }
Это презентационный компонент, который принимает данные для загрузки и название файла в качестве props. Метод exportToCSV вызывается при нажатии кнопки экспорта.
Теперь нужно импортировать этот компонент в компонент App.
// removed for brevity render() { return ( <div className="App"> <Header /> <div className="row"> <div className="col-md-8"> <h2>Customers</h2> </div> <div className="col-md-4 center"> <ExportCSV csvData={this.state.customers} fileName={this.state.fileName} /> </div> </div> <Customers customers={this.customers()}/> </div> ); }
Ниже представлен финальный скриншот со всеми функциями!

Функция экспорта с ThirdParty или NPM lib
react-csv — это сторонняя библиотека, которую можно использовать прямо из коробки. Нужно только передать данные и fileName, а обо всем остальном библиотека позаботится сама.
Сначала установите react-csv, а затем импортируйте его в компонент ExportCSV.
npm install react-csv --save
Импортируйте CSVLink из react-csv и передайте необходимые данные и fileName ссылке, указанной ниже.
import React from 'react' import { CSVLink } from 'react-csv' import Button from 'react-bootstrap/Button'; export const ExportReactCSV = ({csvData, fileName}) => { return ( <Button variant="warning"> <CSVLink data={csvData} filename={fileName}>Export</CSVLink> </Button> ) }
В компоненте App импортируйте ExportReactCSV вместо ExportCSV.
import { ExportReactCSV } from './ExportReactCSV' // removed code for the brevity <div className="col-md-4 center"> <ExportReactCSV csvData={this.state.customers} fileName={this.state.fileName} /> </div> } } export default App;
Вывод:
- Для реализации функции экспорта в React нужны библиотеки xsls и file-saver.
- Есть несколько способов реализовать логику экспорта в React: использование собственной логики или использование любой сторонней библиотеки.
- Реализуйте логику экспорта с отдельным компонентом для повторного использования.
Специально для сайта ITWORLD.UZ. Новость взята с сайта NOP::Nuances of programming