Как экспортировать Excel в React

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

Глава 1: Установка зависимостей

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

npm install react-export-excel --save

При этом будет установлена react-export-excel​​библиотека под названием , которая предоставляет функции, необходимые для экспорта файлов Excel.

Глава 2. Создание кнопки экспорта

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

import ReactExport from "react-export-excel";

const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelSheet;
const ExcelColumn = ReactExport.ExcelColumn;

class ExportButton extends React.Component {
  render() {
    return (
      <ExcelFile element={<button>导出Excel</button>}>
        <ExcelSheet data={data} name="Sheet 1">
          <ExcelColumn label="姓名" value="name" />
          <ExcelColumn label="年龄" value="age" />
          <ExcelColumn label="性别" value="gender" />
        </ExcelSheet>
      </ExcelFile>
    );
  }
}

В приведенном выше коде мы используем ExcelFileкомпоненты ExcelSheetи ExcelColumnдля создания файла Excel, содержащего данные. Вы можете настроить данные и метки столбцов в соответствии с фактическими потребностями.

Глава 3: Экспорт файла Excel

Теперь, когда мы создали кнопку экспорта, нам нужно реализовать функцию экспорта файла Excel. Добавьте в свой компонент следующий код:

import ReactExport from "react-export-excel";

const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelSheet;
const ExcelColumn = ReactExport.ExcelColumn;

class ExportButton extends React.Component {
  exportExcel = () => {
    this.refs.ExcelFile.save();
  };

  render() {
    return (
      <div>
        <ExcelFile
          element={<button onClick={this.exportExcel}>导出Excel</button>}
          ref="ExcelFile"
        >
          <ExcelSheet data={data} name="Sheet 1">
            <ExcelColumn label="姓名" value="name" />
            <ExcelColumn label="年龄" value="age" />
            <ExcelColumn label="性别" value="gender" />
          </ExcelSheet>
        </ExcelFile>
      </div>
    );
  }
}

В приведенном выше коде мы получаем ссылку на компонент, ExcelFileдобавляя refк нему свойство. Затем мы exportExcelвызываем saveметод внутри метода, чтобы запустить операцию экспорта.

Глава 4: Полный код

Вот полный пример кода всего компонента:

import ReactExport from "react-export-excel";

const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelSheet;
const ExcelColumn = ReactExport.ExcelColumn;

class ExportButton extends React.Component {
  exportExcel = () => {
    this.refs.ExcelFile.save();
  };

  render() {
    return (
      <div>
        <ExcelFile
          element={<button onClick={this.exportExcel}>导出Excel</button>}
          ref="ExcelFile"
        >
          <ExcelSheet data={data} name="Sheet 1">
            <ExcelColumn label="姓名" value="name" />
            <ExcelColumn label="年龄" value="age" />
            <ExcelColumn label="性别" value="gender" />
          </ExcelSheet>
        </ExcelFile>
      </div>
    );
  }
}

в заключение

Используя react-export-excelбиблиотеку, мы можем легко реализовать функцию экспорта файлов Excel в приложениях React. Всего с помощью нескольких строк кода мы можем создать компонент с кнопкой экспорта и экспортировать данные в файл Excel. Надеюсь, эта статья поможет вам!