Формат табличных документов MXL (MoXeL) десятилетиями является стандартом де-факто для формирования печатных форм и аналитических отчетов в экосистеме 1С. Однако при разработке современных веб-приложений, B2B-порталов или личных кабинетов часто возникает задача отобразить готовую форму 1С или дать пользователю возможность редактировать макет без использования тяжелой платформы. В данной статье мы разберем по шагам, как спроектировать и реализовать клон редактора MXL, работающий в браузере, и обеспечивающий совместимость с существующими наработками 1С.
Прежде чем приступать к написанию кода на TypeScript, необходимо понять, с чем мы имеем дело. Исторически файлы MXL представляют собой контейнер OLE Compound Document. Это бинарный формат, внутри которого данные хранятся в виде потоков. Основная сложность заключается в специфической сериализации объектов 1С, где параметры ячеек, шрифты и границы описываются внутри фигурных скобок.
Проанализируем структуру данных. Для успешного импорта нам потребуется парсер, который сможет извлечь из бинарного файла следующие компоненты:
r1, c1, r2, c2, определяющий объединенные области.Для реализации парсера на современном стеке можно рассмотреть перенос логики из существующих Open-Source проектов, таких как Yoxel (C#) или библиотек на Java. Переведя алгоритм разбора бинарного потока на TypeScript или написав микросервис-конвертер на C#/Go, мы получим возможность преобразовывать MXL в промежуточный JSON-формат, с которым удобно работать во фронтенде.
Рассмотрим архитектуру фронтенд-части. В отличие от стандартных библиотек типа Excel-подобных гридов, наш редактор должен поддерживать логику макета отчета. Это означает, что визуальное представление должно разделяться на "режим конструктора" и "режим просмотра".
В режиме конструктора мы должны реализовать:
Шапка, Строка, Подвал). Это критически важно для последующего заполнения данными.[Параметр]).Выясним причину, почему обычные HTML-таблицы плохо подходят для этой задачи. Стандартный table в браузере ведет себя непредсказуемо при попытке точно задать ширину колонок в миллиметрах, что важно для печатных форм. Поэтому для рендеринга лучше использовать CSS Grid или абсолютно позиционированные div-элементы для каждой ячейки (виртуальный скроллинг) при работе с большими документами.
Одной из мощных фишек 1С является наличие модуля отчета, где описывается алгоритм вывода секций. В нашем веб-клоне мы можем внедрить аналогичный подход, используя TypeScript в качестве встроенного языка логики.
Рассмотрим пример того, как может выглядеть программный интерфейс формирования отчета в нашем движке:
// Пример модуля формирования отчета на стороне фронтенда
async function GenerateReport(Layout, Data) {
const ResultDoc = new SpreadsheetDocument();
// Получаем область шапки из импортированного MXL
const HeaderArea = Layout.GetArea("Шапка");
HeaderArea.Parameters.Date = Data.CurrentDate;
HeaderArea.Parameters.Organization = Data.Company;
ResultDoc.Put(HeaderArea);
// Цикл по строкам данных
for (const item of Data.Items) {
const RowArea = Layout.GetArea("Строка");
RowArea.Parameters.ItemName = item.Name;
RowArea.Parameters.Quantity = item.Qty;
RowArea.Parameters.Price = item.Price;
ResultDoc.Put(RowArea);
}
return ResultDoc;
}
Такой подход позволяет полностью отвязаться от бэкенда при генерации документа. Бэкенд только поставляет сырые данные (JSON), а вся "красота" и компоновка происходят в браузере. Это значительно снижает нагрузку на сервер и делает интерфейс мгновенным для пользователя.
Проанализируем процесс отрисовки итогового документа. Чтобы отчет выглядел "как в 1С", нужно реализовать поддержку специфических свойств:
canvas для измерения ширины текста методом measureText().MXL может лежать значение расшифровки. В веб-версии мы можем реализовать это через data-атрибуты. При клике на ячейку фронтенд перехватывает событие и вызывает функцию-обработчик (например, открывает вложенный отчет или карточку товара).position: sticky в CSS.Поскольку мы создаем независимое решение, оно должно легко встраиваться в любые проекты. Рассмотрим вариант упаковки бэкенд-части в Docker-контейнер. Бэкенд на базе Node.js или .NET Core может отвечать за хранение дерева отчетов, управление правами доступа (через интеграцию с AD/LDAP) и выполнение тяжелых задач по экспорту.
Для экспорта в PDF и Excel (XLSX) можно использовать готовые библиотеки:
HTML-представление отчета и "распечатать" его в PDF с идеальной точностью.Выясним, как работать с отчетами, которые могут содержать десятки тысяч строк. Стандартный подход с созданием DOM-элементов для каждой ячейки приведет к зависанию браузера.
Решением является Виртуализация (Virtual Scrolling). Мы рендерим только те ячейки, которые попадают в видимую область экрана плюс небольшой запас сверху и снизу. При скроллинге данные в ячейках подменяются. Это позволяет открывать документы практически любого размера (ограничением будет только оперативная память для хранения самой модели данных в JavaScript).
Подведем итог: создание собственного веб-редактора MXL — это амбициозная задача, требующая глубокого понимания бинарных форматов и мастерства владения современными веб-технологиями. Однако результат в виде независимого, быстрого и функционального инструмента отчетности окупает все затраты, особенно в проектах по импортозамещению и автоматизации бизнеса, где пользователи привыкли к интерфейсам 1С, но нуждаются в гибкости веб-платформ.