Работа с Excel в TypeScript: библиотеки, примеры и инструменты

Работа с Excel в TypeScript: обзор библиотек и практические примеры

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

Популярные библиотеки для работы с Excel в TypeScript

На сегодняшний день существует несколько стабильных решений. Рассмотрим три наиболее популярные:

• ExcelJS — мощная библиотека для чтения, создания и редактирования XLSX файлов. Поддерживает стили, формулы, диаграммы, защиту листов и многое другое. Работает в браузере и Node.js.
• xlsx (SheetJS) — легковесная библиотека для парсинга и генерации таблиц. Идеально подходит для быстрой обработки данных без сложного форматирования.
• node-xlsx — простая обертка над xlsx, ориентированная на Node.js. Удобна для быстрого экспорта массивов данных.

В этом руководстве мы сосредоточимся на ExcelJS, так как она предоставляет наибольший контроль над структурой и стилями документа.

Установка и настройка

Для начала установите библиотеку через npm:

npm install exceljs
npm install @types/node --save-dev  // для типов Node.js

Также убедитесь, что в вашем проекте настроен TypeScript (файл tsconfig.json).

Создание простого Excel файла

Пример создания файла с заголовками и данными:

import * as ExcelJS from 'exceljs';

async function createWorkbook() {
  const workbook = new ExcelJS.Workbook();
  const sheet = workbook.addWorksheet('Сотрудники');

  // Заголовки
  sheet.columns = [
    { header: 'ID', key: 'id', width: 10 },
    { header: 'Имя', key: 'name', width: 25 },
    { header: 'Должность', key: 'position', width: 20 },
    { header: 'Зарплата', key: 'salary', width: 15 },
  ];

  // Данные
  const employees = [
    { id: 1, name: 'Иван Петров', position: 'Разработчик', salary: 150000 },
    { id: 2, name: 'Мария Смирнова', position: 'Дизайнер', salary: 120000 },
    { id: 3, name: 'Алексей Кузнецов', position: 'Менеджер', salary: 130000 },
  ];

  employees.forEach(emp => sheet.addRow(emp));

  // Сохранение
  await workbook.xlsx.writeFile('employees.xlsx');
  console.log('Файл создан!');
}

createWorkbook();

Чтение данных из Excel

Чтение существующего файла и преобразование данных в TypeScript-объекты:

import * as ExcelJS from 'exceljs';

interface Employee {
  id: number;
  name: string;
  position: string;
  salary: number;
}

async function readWorkbook() {
  const workbook = new ExcelJS.Workbook();
  await workbook.xlsx.readFile('employees.xlsx');
  
  const sheet = workbook.getWorksheet('Сотрудники');
  const employees: Employee[] = [];

  sheet.eachRow((row, rowNumber) => {
    if (rowNumber === 1) return; // пропускаем заголовки
    employees.push({
      id: row.getCell(1).value as number,
      name: row.getCell(2).value as string,
      position: row.getCell(3).value as string,
      salary: row.getCell(4).value as number,
    });
  });

  console.log('Прочитано сотрудников:', employees.length);
  console.log(employees);
}

readWorkbook();

Форматирование и стили

ExcelJS позволяет настраивать внешний вид ячеек: шрифты, заливку, границы, выравнивание. Пример добавления стилей к заголовкам:

import * as ExcelJS from 'exceljs';

async function styledWorkbook() {
  const workbook = new ExcelJS.Workbook();
  const sheet = workbook.addWorksheet('Отчет');

  // Определяем стиль для заголовков
  const headerStyle: Partial<ExcelJS.Style> = {
    font: { bold: true, color: { argb: 'FFFFFFFF' }, size: 12 },
    fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF4472C4' } },
    alignment: { horizontal: 'center', vertical: 'middle' },
    border: {
      top: { style: 'thin' },
      left: { style: 'thin' },
      bottom: { style: 'thin' },
      right: { style: 'thin' },
    },
  };

  // Заголовки
  sheet.columns = [
    { header: 'Продукт', key: 'product', width: 20 },
    { header: 'Количество', key: 'quantity', width: 15 },
    { header: 'Цена', key: 'price', width: 15 },
    {