Быстрый экспорт в Excel

Описание ниже

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

После установки модуля появится виджет:


По умолчанию это стандартная кнопка с текстом «Экспорт в excel», при клике на которую происходит экспорт.
Разберемся с настройками.

Блок «Кнопка».
Поле «Текст кнопки»
Здесь вы можете указать тот текст кнопки, который захотите. По умолчанию «Экспорт в excel».

Поле «Класс кнопки»
Имя класса для применения стилей CSS без точки. Вы можете добавить в свой виджет или страницу виджет «Код», в котором создадите класс для кнопки. Это нужно для кастомизации кнопки. Пример:



Виджет «Код»:


Блок «Файл»
Поле «Название страницы файла»
Текст, который будет отображаться в названии страницы файла. По умолчанию «Страница»

Поле «Имя генерируемого файла»
Текст, который будет отображаться в названии файла. По умолчанию «Таблица»

Блок «Получение данных таблицы»
Поле «Способ получения данных»
Здесь вы можете выбрать, каким способ получать данные для формирования таблицы.

Вариант «JSON» полезен, если вам не нужно выводить таблицу на страницу, а нужно просто выгрузить ее в файл.

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

Поле «Контекстная переменная с JSON»
Появляется, если в поле «Способ получения данных» выбран вариант «JSON». Обратите внимание, что переменная должна иметь тип «Произвольный тип» а также быть в формате массива с массивами, где каждый внутренний массив это одна строка, а каждый элемент в этой строке – ячейка. Пример:



Поле «Тип таблицы»
Появляется, если в поле «Способ получения данных» выбран вариант «DOM».

Вариант «Виджет» для таблиц, которые созданы с помощью виджета «Таблица»:


Вариант «Контекстная переменная» для таблиц, которые созданы в контекстной переменной:


Вариант «Кастомная» для таблиц, которые прописаны вами в HTML в виджете «Код»:


Выбор типа необходим для поиска таблицы на странице.

Поле «Селектор»
Необходимо для поиска таблицы на странице. Вы можете пропустить это поле, но это может быть опасно тем, что со страницы будут подтянуты данные всех размещенных на ней таблиц.

Если в поле «Тип таблицы» выбран тип «Кастомная», нам нужно просто добавить уникальный класс или id тегу table, как показано на скриншоте выше и указать селектор в этом поле:


Если в поле «Тип таблицы» выбран тип «Виджет», мы не можем задать тегу table класс или id. В таком случае нам необходимо просто добавить виджет «Код» прямо перед выводимой таблицей, который будет содержать тег с уникальным классом или id:




Если выбран тип «Контекстная переменная», то необходимо указать в ее настройках класс:



Блок «Типы данных столбцов»
Поле «Ширина столбцов»
Если вам необходимо настроить ширину столбцов, введите ширину в пикселях для каждого столбца по порядку. Например: «100, 150, 50»

Если в таблице все столбцы одной ширины, вы можете ввести данные в формате «количество столбцов: ширина». Например, если в таблице 7 столбцов и все они должны быть шириной в 100 пикселей, вы можете ввести просто «7: 100»

Обратите внимание, если вы столкнетесь с подобной картиной, то это значит, что данные в формате «Дата» не помещаются в ячейку, в таком случае укажите для данной колонки подходящую ширину:


Поле «Способ обработки данных»
Необходимо для поиска типов данных и их преобразования. Особенно полезно, если вы получаете данные таблицы из DOM, где все данные будут приведены к типу «Строка», а вам нужно, например, чтобы в файле можно было складывать ячейки с определенными данными, для чего необходимо привести их к типу «Число», «Дата» или «Время».

Вариант «Автоматически» будет сам искать ячейки, которые можно преобразовать в какой-либо формат из доступных, которые описаны ниже.

Вариант «Не обрабатывать» оставит данные в исходном формате.

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

Поле «Типы данных столбцов»
Если вы выбрали пользовательский способ обработки данных, вы можете указать желаемый тип данных для каждого столбца. Их необходимо ввести в строку по порядку через запятую для каждого столбца:


Доступные типы:
1. «num». Преобразовывает строки в числа. Понимает дробные числа через точку.
2. «date». Преобразовывает строки в дату. Понимает форматы:

• dd.mm.yyyy
• dd.mm.yy
• dd-mm-yyyy
• dd-mm-yy
• dd/mm/yyyy
• dd/mm/yy
• 28 апреля 2023 г
• 28 апреля 2023 г.
• 28 апреля 2023 года
• 28 апреля 23 года

3. «range». Преобразовывает промежуток времени, длительность в часах. Понимает форматы:

• 10 ч. 15 мин.
• 10 часов 15 минут
• 10ч 15м
• 10:15

4. «string». Преобразовывает данные в строку.
5. «none». Оставляет данные в исходном формате.

Поле «Если не удалось преобразовать данные ячейки»
Вы можете выбрать, что делать с данными ячейки, если их не удалось преобразовать в указанный вами формат – очистить ячейку или оставить исходные данные.

Поле «Количество строк в шапке»
Необходимо при выборе способа обработки данных «пользовательский» для того, чтобы определить какие строки являются заголовками, следовательно, не нуждаются в обработке.

Блок «Объединение ячеек»
В этом блоке вы можете определить объединение ячеек в колонках и строках, введя значения в формате «номер строки или колонки: количество слитых ячеек в одной для каждой ячейки»

В поле «Объединение ячеек в строке (colspan)» введите данные для слияния ячеек по горизонтали.
В поле «Объединение ячеек в колонке (rowspan)» введите данные для слияния ячеек по вертикали.

Например, если нам необходимо добавить слияние 2 и 3 ячейки в шапке и 2 и 3 ячейки в первой колонке:
Colspan: «1: 1, 2» // мы указали, что первая ячейка в строке остается нетронутой, то есть в ней всего одна ячейка, а вторая включает в себя 2 ячейки
Rowspan: «1: 1, 2»

Пример посложнее:


Обратите внимание, что такой способ не подходит для объединения ячеек в строках и колонках одновременно, например, в квадрат 2х2. Если вам необходимы настройки сложнее, вы можете выбрать способ «JSON» и добавить их в следующем формате, где каждый объект в массиве это диапазон слияния, s – start, e – end, r – row (индекс строки ячейки), c – column (индекс колонки ячейки):



Например, если мы хотим объединить ячейки A1, A2, B1 и B2:


Координаты первой ячейки в диапазоне 0;0, координаты последней ячейки в диапазоне 1;1:
[{s: {r: 0, c: 0}, e: {r: 1, c: 1}}]