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

Библиотека Ant Design в JavaScript предоставляет широкие возможности для визуализации и управления данными. Часто возникает необходимость экспортировать данные из таблиц, форм или других компонентов в форматы, удобные для дальнейшей работы — например, CSV, Excel или PDF. В Ant Design этот процесс реализуется с помощью комбинации встроенных компонентов и сторонних библиотек для обработки данных.

Экспорт данных из таблицы (Table)

Компонент Table является базовым элементом отображения структурированных данных в Ant Design. Для организации экспорта данных используется несколько подходов:

  1. Формирование данных для экспорта Таблица обычно принимает массив объектов dataSource и массив колонок columns. Для экспорта создается отдельный массив, соответствующий формату вывода. Например:
const exportData = dataSource.map(item => ({
  Имя: item.name,
  Возраст: item.age,
  Email: item.email,
}));
  1. Экспорт в CSV с помощью сторонних библиотек Популярным инструментом является библиотека json2csv. Пример использования:
import { Parser } from 'json2csv';
import { saveAs } from 'file-saver';

const fields = ['Имя', 'Возраст', 'Email'];
const json2csvParser = new Parser({ fields });
const csv = json2csvParser.parse(exportData);

const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
saveAs(blob, 'export.csv');
  1. Экспорт в Excel Для генерации Excel-файлов часто применяется библиотека xlsx:
import * as XLSX from 'xlsx';

const worksheet = XLSX.utils.json_to_sheet(exportData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
XLSX.writeFile(workbook, 'export.xlsx');

Экспорт данных с фильтрацией и пагинацией

В реальных приложениях таблицы содержат фильтры и пагинацию. Для корректного экспорта необходимо:

  • Собрать все данные, включая те, которые не отображаются на текущей странице, если требуется полный экспорт.
  • Применить фильтры и сортировку аналогично отображаемой таблице, чтобы экспорт соответствовал текущему виду.
const filteredData = dataSource
  .filter(item => item.age > 18)
  .sort((a, b) => a.name.localeCompare(b.name));

Кастомизация заголовков и форматов

При экспорте важно контролировать:

  • Порядок колонок — в Excel или CSV порядок колонок можно задать явно через массив fields.
  • Форматирование данных — например, числа с фиксированным числом знаков после запятой или формат даты:
const formattedData = dataSource.map(item => ({
  Имя: item.name,
  ДатаРегистрации: item.registrationDate.toLocaleDateString(),
  Баланс: item.balance.toFixed(2),
}));
  • Стилизация Excel — библиотека xlsx позволяет задавать стили ячеек (шрифты, цвета, выравнивание) при использовании формата xlsx-style.

Кнопка экспорта в интерфейсе

Для удобства пользователя часто добавляют кнопку экспорта рядом с таблицей. В Ant Design используется компонент Button, а для группирования с таблицей — Space или Dropdown.

import { Button, Space } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';

<Space style={{ marginBottom: 16 }}>
  <Button
    type="primary"
    icon={<DownloadOutlined />}
    onCl ick={handleExport}
  >
    Экспорт CSV
  </Button>
  <Button
    type="default"
    onCl ick={handleExportExcel}
  >
    Экспорт Excel
  </Button>
</Space>

Функция handleExport содержит логику преобразования данных и их сохранения в выбранный формат.

Экспорт больших объёмов данных

При работе с большими наборами данных важно учитывать производительность:

  • Использовать серверную пагинацию — выгружать данные частями, а не загружать весь массив в браузер.
  • Стриминг данных — для CSV или XLSX можно формировать файлы на сервере и предоставлять ссылку для скачивания.
  • Минимизировать обработку в браузере — тяжелые операции (например, форматирование больших массивов) лучше выполнять на серверной стороне.

Экспорт форм и других компонентов

Помимо таблиц, часто нужно экспортировать данные из:

  • Form — значения формы можно получить через form.getFieldsValue() и конвертировать в CSV/Excel.
  • Descriptions и List — можно собрать ключи и значения, сформировать объект и экспортировать аналогично таблице.
  • Charts и графики — данные для визуализации также можно сохранять через JSON, а при необходимости преобразовывать в CSV.
const formData = form.getFieldsValue();
const csvData = Object.keys(formData).map(key => ({
  Поле: key,
  Значение: formData[key],
}));

Интеграция с сторонними библиотеками для PDF

Для генерации PDF можно использовать jsPDF или pdfmake:

import jsPDF from 'jspdf';
import 'jspdf-autotable';

const doc = new jsPDF();
doc.autoTable({
  head: [['Имя', 'Возраст', 'Email']],
  body: exportData.map(item => [item.Имя, item.Возраст, item.Email]),
});
doc.save('export.pdf');

Эта интеграция позволяет экспортировать табличные данные в PDF с форматированием и стилями.

Резюме по ключевым моментам

  • Подготовка данных — основной шаг перед экспортом: фильтрация, сортировка, форматирование.
  • Выбор формата — CSV, Excel или PDF, в зависимости от потребностей.
  • Кнопки интерфейса — удобный доступ к экспорту через Button и Space.
  • Производительность — для больших данных использовать серверную обработку и стриминг.
  • Универсальность — экспорт не только таблиц, но и форм, списков и графиков.

Комплексный подход к экспорту данных в Ant Design обеспечивает удобство работы с информацией и позволяет интегрировать библиотеку в любые приложения с высокими требованиями к обработке данных.

Оглавление