Экспорт в Excel со стилизацией Excel таблицы

Как известно для выгрузки данных в Excel существуют:

• Быстрый экспорт в Excel
  
• библиотека SheetJS, если мы хотим более расширенный функционал

Но данный модуль и библиотека не позволяют стилизовать сам excel документ, он получается достаточно скучным, одноцветным и приходиться после выгрузки выполнять его форматирование в ручную.

Решение:
Библиотека xlsx-js-style, это версия библиотеки SheetJS, но с возможностью стилизации Excel.

Пример использования:

1. Добавим файл с библиотекой xlsx-js-style P.S Файл оставил во вложениях
2. Подключаем библиотеку в Виджет Код и можно работать.
3. Напишем функцию Экспорта в Excel без стилизации
   
   Код:

   
   declare const console: any
   declare const XLSX: any
   
   async function exportToXlsx(): Promise<void> {
       const dataForXlsx: any[] = [
           ['Название Клиента', 'Проект', 'Q1', '', 'Q2', '', 'Q3', '', 'Q4', '', '2023'],
           ['', '', 'План', 'Факт', 'План', 'Факт', 'План', 'Факт', 'План', 'Факт', 'План', 'Факт'],
       ]
   
       const worksheet = XLSX.utils.aoa_to_sheet(dataForXlsx, { cellDates: true })
   
       // Задаем ширину столбцов
       worksheet['!cols'] = [
           { wpx: 250 },
           { wpx: 250 },
           { wpx: 100 },
           { wpx: 100 },
           { wpx: 100 },
           { wpx: 100 },
           { wpx: 100 },
           { wpx: 100 },
           { wpx: 100 },
           { wpx: 100 },
           { wpx: 100 },
           { wpx: 100 },
       ]
   
       // Обьедeняем ячейки как надо
       const cellMerges = [
           { s: { r: 0, c: 2 }, e: { r: 0, c: 3 } },
           { s: { r: 0, c: 4 }, e: { r: 0, c: 5 } },
           { s: { r: 0, c: 6 }, e: { r: 0, c: 7 } },
           { s: { r: 0, c: 8 }, e: { r: 0, c: 9 } },
           { s: { r: 0, c: 10 }, e: { r: 0, c: 11 } },
       ]
   
       worksheet["!merges"] = cellMerges
   
       const workbook = XLSX.utils.book_new()
       XLSX.utils.book_append_sheet(workbook, worksheet, 'Page 1')
       XLSX.writeFile(workbook, 'styled excel.xlsx')
   }
   
   

4. Результат без стилизации: безлико, не по центру.
5. Напишем функцию которая добавит стилей в Excel:
   
   Код:

   
   // Функция принимает объект рабочего листа worksheet и стилизует ячейки Excel
   function styledXlsx(worksheet: any) {
       // Создадим объекты со стилями
       const alignment = { vertical: 'center', horizontal: 'center' }
   
       const styleHeaderTitle = {
           alignment: alignment,
           font: {
               bold: true,
               sz: 14,
               color: { rgb: "black" },
           },
       }
   
       const styleHeaderPlan = {
           alignment: alignment,
           font: {
               bold: true,
               sz: 14,
               color: { rgb: "5082e6" },
           },
       }
   
       const styleHeaderFact = {
           alignment: alignment,
           font: {
               bold: true,
               sz: 14,
               color: { rgb: "34a853" },
           },
       }
   
       // массивы с названием ячеек которые стилизуем
       const cellsTitls = ['C1', 'E1', 'G1', 'I1', 'K1',]
       const cellTitlsPlan = ['C2', 'E2', 'G2', 'I2', 'K2']
       const cellTitlsFact = ['D2', 'F2', 'H2', 'J2', 'L2']
   
       worksheet['A1'].s = { font: { bold: true, sz: 14, color: { rgb: "black" }, } }
       worksheet['B1'].s = { font: { bold: true, sz: 14, color: { rgb: "black" }, } }
   
       // Проходим циклами по ячейкам и добавляем им стили
       cellsTitls.forEach(cell => {
           worksheet[cell].s = styleHeaderTitle
       })
   
       cellTitlsPlan.forEach(cell => {
           worksheet[cell].s = styleHeaderPlan
       })
   
       cellTitlsFact.forEach(cell => {
           worksheet[cell].s = styleHeaderFact
       })
   }
   
   

6. Результат:

У всех заголовков появился жирный шрифт, у ячеек с названием Квартала "Q" и у ячеек с названием "План" и "Факт" появилось выравнивание по центру, а также ячейки с Планом и Фактом получили "Синий" и "Зеленый" цвета.

Вывод:

• Версия библиотеки SheetJS со стилями "xlsx-js-style" избавляет от рутинной работы при редактировании excel таблиц.
• Не мало важный момент!!! Достаточно поменять файл с библиотекой на файл библиотеки "xlsx-js-style" и подключить ее в Виджет Коде, при этом логика работы со старой версий библиотеки не сломается, все ее функции включены в новую. Можно дописать стилизацию ячеек допом к старому коду.

Материалы:

• Ссылка на инструкцию работы библиотеки: https://gitbrent.github.io/xlsx-js-style/