Привет! Сегодня я собираюсь познакомить вас с различными методами рендеринга файлов Excel в приложении React с использованием TypeScript. Это практическое руководство, наполненное примерами кода, так что давайте сразу же приступим!

Метод 1. Использование средства реагирования-excel-renderer

Одна из популярных библиотек для рендеринга Excel в React — это response-excel-renderer. Он обеспечивает простой и эффективный способ анализа и отображения файлов Excel в вашем приложении. Для начала вам необходимо установить библиотеку, выполнив следующую команду:

npm install react-excel-renderer

После установки вы можете импортировать необходимые компоненты и использовать их в своем коде. Вот простой пример:

import React from 'react';
import { ExcelRenderer } from 'react-excel-renderer';
const ExcelRendererComponent: React.FC = () => {
  const renderExcel = (file: File) => {
    ExcelRenderer(file, (err, response) => {
      if (err) {
        console.log(err);
      } else {
        console.log(response.rows);
      }
    });
  };
  return (
    <div>
      <input type="file" onChange={(e) => renderExcel(e.target.files[0])} />
    </div>
  );
};
export default ExcelRendererComponent;

В этом примере мы создаем поле ввода типа «файл» и прослушиваем событие изменения файла. Когда файл выбран, мы передаем его функции ExcelRenderer, которая анализирует файл Excel и возвращает данные в объект response.

Метод 2: использование SheetJS

Еще одна популярная библиотека для рендеринга Excel — SheetJS. Он предоставляет обширные функциональные возможности для работы с файлами Excel, включая чтение, запись и манипулирование данными. Чтобы использовать SheetJS в приложении React, вы можете выполнить следующие шаги:

Шаг 1. Установите необходимые пакеты:

npm install xlsx

Шаг 2. Импортируйте необходимые функции и компоненты:

import React from 'react';
import * as XLSX from 'xlsx';
const SheetJSComponent: React.FC = () => {
  const renderExcel = (file: File) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result as ArrayBuffer);
      const workbook = XLSX.read(data, { type: 'array' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      console.log(jsonData);
    };
    reader.readAsArrayBuffer(file);
  };
  return (
    <div>
      <input type="file" onChange={(e) => renderExcel(e.target.files[0])} />
    </div>
  );
};
export default SheetJSComponent;

В этом примере мы используем API FileReaderдля чтения выбранного файла Excel как буфера массива. Затем мы передаем этот буфер функции XLSX.readдля создания объекта книги. Отсюда мы можем получить доступ к нужному листу, преобразовать его в JSON с помощью XLSX.utils.sheet_to_jsonи работать с данными по мере необходимости.

Метод 3: использование ExcelJS

ExcelJS — мощная библиотека JavaScript для работы с файлами Excel. Он предоставляет широкий спектр функций и поддерживает операции чтения и записи. Вот пример того, как вы можете использовать ExcelJS в приложении React:

Шаг 1. Установите необходимые пакеты:

npm install exceljs

Шаг 2. Импортируйте необходимые функции и компоненты:

import React from 'react';
import * as ExcelJS from 'exceljs';
const ExcelJSComponent: React.FC = () => {
  const renderExcel = async (file: File) => {
    const workbook = new ExcelJS.Workbook();
    await workbook.xlsx.load(file);
    const worksheet = workbook.worksheets[0];
    worksheet.eachRow((row) => {
      console.log(row.values);
    });
  };
  return (
    <div>
      <input type="file" onChange={(e) => renderExcel(e.target.files[0])} />
    </div>
  );
};
export default ExcelJSComponent;

В этом примере мы создаем новый экземпляр класса Workbookиз ExcelJS и загружаем выбранный файл Excel с помощью метода xlsx.load. Затем мы получаем доступ к нужному листу и перебираем каждую строку, записывая значения строк в консоль.

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