13,8 тыс подписчиков

Экспорт данных в Excel с React

23 мая 202023 мая 2020

716

2 мин

Источник: Nuances of Programming В React есть два способа реализации функции экспорта: с помощью любой сторонней библиотеки или с помощью создания компонента. Рассмотрим оба способа ниже. Пример проекта Возьмем простое приложение с данными в таблице и кнопкой экспорта в правом верхнем углу. При нажатии на кнопку данные из таблицы загружаются в таблицу Excel. Проект можно импортировать отсюда и запустить напрямую. Предварительная подготовка Создайте проект React с помощью create-react-app и установите пакеты npm xslx, bootstrap и file-saver. Добавьте таблицы стилей из библиотеки React Bootstrap в index.html. Создание заголовка Создаем заголовок для приложения. Это не обязательный шаг для реализации функции экспорта, однако с ним приложение выглядит лучше. Создание таблицы Customers Создаем компонент таблицы Customer. Это презентационный компонент, который принимает массив customers в качестве props и отображает в виде таблицы. Передача данных из компонента App Нам нужно перед

Оглавление

Пример проекта
Предварительная подготовка
Создание заголовка

Источник: Nuances of Programming

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

Пример проекта

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

Проект можно импортировать отсюда и запустить напрямую.

Предварительная подготовка

Создайте проект React с помощью create-react-app и установите пакеты npm xslx, bootstrap и file-saver.

Добавьте таблицы стилей из библиотеки React Bootstrap в index.html.

Создание заголовка

Создаем заголовок для приложения. Это не обязательный шаг для реализации функции экспорта, однако с ним приложение выглядит лучше.

Создание таблицы Customers

Создаем компонент таблицы Customer. Это презентационный компонент, который принимает массив customers в качестве props и отображает в виде таблицы.

Передача данных из компонента App

Нам нужно передать данные, отображаемые в таблице, из компонента app, а также импортировать компоненты Customers и Header для использования в функции render.

Приложение должно выглядеть следующим образом:

Реализация функции экспорта

Создаем компонент ExportCSV, принимающий данные в качестве props и осуществляющий функцию экспорта. В данном примере содержится компонент с методом exportToCSV, который обрабатывает все функции загрузки excel с помощью xlxs и file-saver.

Это презентационный компонент, который принимает данные для загрузки и название файла в качестве props. Метод exportToCSV вызывается при нажатии кнопки экспорта.

Теперь нужно импортировать этот компонент в компонент App.

Ниже представлен финальный скриншот со всеми функциями!

Функция экспорта с ThirdParty или NPM lib

react-csv — это сторонняя библиотека, которую можно использовать прямо из коробки. Нужно только передать данные и fileName, а обо всем остальном библиотека позаботится сама.

Сначала установите react-csv, а затем импортируйте его в компонент ExportCSV.

npm install react-csv --save

Импортируйте CSVLink из react-csv и передайте необходимые данные и fileName ссылке, указанной ниже.

В компоненте App импортируйте ExportReactCSV вместо ExportCSV.