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

1. Экспорт данных из таблицы.
   Syncfusion предоставляет компонент ExcelExport, который упрощает экспорт данных из таблицы в файл Excel. Вот пример:

import { ExcelExport, ExcelExportColumn } from '@syncfusion/ej2-react-grids';
const data = [
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
  // ... more data
];
const columns = [
  { field: 'id', header: 'ID' },
  { field: 'name', header: 'Name' },
  { field: 'age', header: 'Age' },
  // ... more columns
];
const App = () => {
  return (
    <ExcelExport data={data} fileName="tableData.xlsx">
      <ExcelExportColumn
        headerText="ID"
        field="id"
        width={100}
      />
      <ExcelExportColumn
        headerText="Name"
        field="name"
        width={200}
      />
      <ExcelExportColumn
        headerText="Age"
        field="age"
        width={100}
      />
    </ExcelExport>
  );
};
export default App;

1. Экспорт данных из диаграммы.
   Syncfusion также позволяет экспортировать данные из компонента диаграммы в Excel. Вот пример использования компонента ExcelExport:

import { ExcelExport, ExcelExportChart } from '@syncfusion/ej2-react-charts';
const chartData = [
  { month: 'Jan', sales: 100 },
  { month: 'Feb', sales: 200 },
  // ... more data
];
const App = () => {
  return (
    <ExcelExport fileName="chartData.xlsx">
      <ExcelExportChart>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={chartData} xName="month" yName="sales" type="Column" />
        </SeriesCollectionDirective>
      </ExcelExportChart>
    </ExcelExport>
  );
};
export default App;

1. Экспорт данных с расширенными параметрами форматирования.
   Syncfusion предоставляет различные параметры форматирования для экспортируемых файлов Excel. Вот пример, демонстрирующий некоторые из этих вариантов:

import { ExcelExport, ExcelExportColumn } from '@syncfusion/ej2-react-grids';
const data = [
  // data array
];
const columns = [
  // columns array
];
const App = () => {
  return (
    <ExcelExport data={data} fileName="formattedData.xlsx">
      {columns.map((column) => (
        <ExcelExportColumn
          headerText={column.header}
          field={column.field}
          width={column.width}
          format={column.format}
          textAlign={column.textAlign}
          headerFontColor={column.headerFontColor}
          cellFontColor={column.cellFontColor}
        />
      ))}
    </ExcelExport>
  );
};
export default App;

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