Данные на сайтах часто выкладываются в красивом, но не всегда удобном формате. В Excel можно обработать данные - сортировать, фильтровать, делать расчеты, подготовить статистику или отчет с помощью сводных таблиц – очень много чего. Базовая версия описанного ниже экспорта в Excel из приложения React потребует не более 5 минут.

Экспорт в Excel - очень распространённая задача для разработчика. Это не удивительно - интерфейс Excel понятен и привычен, он делает работу с данными комфортной для заказчика. Ведь заказчик редко умеет кодировать. А в Excel - никаких странных интерфейсов, только привычная таблица.

Для заказчика функция «экспорт в Excel» - лишь кнопка на сайте. Он редко задумывается о сложности процесса. Потому иногда случаются конфликты по поводу согласования сроков реализации.

Ниже будет описано решение для React. В принципе, это реализация на Javascript, но с адаптацией для React приложения. Генерация файла будет проходить на клиенте, потому рекомендую применять его для сравнительно небольших объемов данных.

Нам понадобятся пакеты XLSX и file-saver. Если пишете на TypeScript, то вместо пакета file-saver нужно использовать @types/file-saver.

Итак, добавьте пакеты в решение:

npm install --save @types/file-saver XLSX

На странице приложения в компоненте React есть массив данных, он хранится в переменной matches. Это архив объектов.

const [matches, loadMatched] = useState<IMatch[]>([])

Переменная заполняется дефолтными данными в useEffect и потом обновляется пользователем.

В React компоненте размещена кнопка, которая вызывает функцию сохранения

<button onClick={ () => { XLSXDownload(matches)}}>Export Excel</button>

Пример реализации функции XLSXDownload(matches) ниже. Для удобства, ее можно вынести в отдельный файл.

export const  XLSXDownload = (data: IMatch[]) => {
    console.log('save')
    const dataArray = data.map(match => [
        match.homeTeam, // Assuming property1, property2, etc. are properties of IMatch
        match.awayTeam,
        // Add more properties as needed
    ]);

    function saveExcelFile() {
        const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
        const fileExtension = '.xlsx';
        const fileName = 'test' + fileExtension;
        const Heading = [['FirstName', 'Last Name', 'Email']];
        const wb = XLSX.utils.book_new();
        const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([]);
        XLSX.utils.sheet_add_aoa(ws, Heading);
        XLSX.utils.sheet_add_json(ws, data, { origin: 'A2', skipHeader: true });
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
        // this code is to set width of columns
        const max_width = data.reduce((w, r) => Math.max(w, r.homeTeam.length), 10);
        ws["!cols"] = [ { wch: max_width } ];

        const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
        const ms = new Blob([excelBuffer], { type: fileType });
        FileSaver.saveAs(ms, fileName + fileExtension);
    }
    saveExcelFile();
}

Для работы функции должны быть подключены пакеты XLSX и 'file-saver'.

import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'