Документ HTML в 1С: как использовать поле HTML-документа

Поле HTML-документа в 1С — это элемент формы, который отображает веб-страницу внутри окна программы. С его помощью выводят форматированные отчёты, справку, карты, диаграммы, интерактивные элементы и даже целые мини-приложения на JavaScript, не выходя из интерфейса 1С. Реквизит формы типа «Строка» содержит либо URL, либо сам HTML-текст, а платформа рендерит содержимое через встроенный браузерный движок.

Типичные сценарии использования: красивые печатные формы и дашборды, отображение карты с геолокацией, интеграция с веб-сервисами через JavaScript, показ справочной информации, интерактивные подборы товаров. Во всех случаях логика делится на две части: 1С формирует HTML и обрабатывает события, а браузерный движок отвечает за отображение.

Ключевой момент, который нужно понять сразу: поле HTML-документа — не просто «картинка». Это двусторонний канал. Клики по ссылкам внутри страницы можно перехватить в коде 1С через событие ПриНажатии (в обычных формах — onclick), а из 1С можно обратиться к DOM-документу и выполнить скрипт. Именно эта двусторонность делает элемент мощным инструментом интеграции.

Как добавить поле HTML-документа на форму

В управляемой форме добавьте реквизит типа «Строка» (неограниченная длина), затем перетащите его в дерево элементов формы и в свойствах элемента установите «Вид поля» = «Поле HTML-документа». Путь к данным должен указывать на строковый реквизит — платформа сама поймёт, что внутри: если строка начинается с http:// или https://, будет загружена страница по адресу, иначе текст трактуется как готовый HTML.

Для программного формирования содержимого заполните реквизит HTML-текстом в обработчике ПриСозданииНаСервере или по команде. Минимальный пример: HTMLТекст = "<html><body><h1>Отчёт</h1></body></html>";. После присваивания поле автоматически перерисуется.

В обычных формах (толстый клиент) логика аналогична, но элемент называется «Поле HTML-документа» в палитре элементов, а события настраиваются через палитру свойств. Учтите, что обычные формы используют движок Internet Explorer, а управляемые в современных версиях платформы — WebKit или Edge WebView2 в зависимости от настроек, поэтому поведение одного и того же HTML может отличаться.

1. 1
   Создайте реквизит формы типа Строка с неограниченной длиной
2. 2
   Добавьте элемент формы, установите вид «Поле HTML-документа» и привяжите к реквизиту
3. 3
   Заполните реквизит URL или HTML-текстом в коде
4. 4
   Назначьте обработчик события ПриНажатии для интерактивности
5. 5
   Проверьте отображение в тонком клиенте и в веб-клиенте отдельно

Вывод отчётов и форматированного текста

Самое частое применение — вывод произвольно оформленной информации, которой тесно в табличном документе. HTML позволяет использовать CSS-стили, цветовые индикаторы, сворачивающиеся блоки, изображения в формате base64 прямо внутри разметки. Типовой приём — сформировать строку HTML в запросе-цикле по данным и присвоить её полю.

Чтобы страница работала автономно, встраивайте стили прямо в тег <style> внутри документа, а картинки — через data:image/png;base64,.... Внешние ресурсы (CDN, шрифты) будут недоступны на компьютерах без интернета и замедлят открытие формы. Для картинок из двоичных данных 1С используйте Base64Строка() для кодирования.

Учитывайте кодировку: если страница отображается «кракозябрами», добавьте в начало HTML <meta charset="utf-8">. Это самая частая причина проблем с кириллицей при программной генерации разметки.

Перехват нажатий: событие ПриНажатии

Интерактивность строится на событии ПриНажатии (элемент формы → события). Когда пользователь кликает по ссылке внутри страницы, 1С получает это событие до того, как браузер выполнит переход. В параметрах обработчика доступны данные события, из которых можно извлечь href нажатой ссылки и элемент, по которому кликнули.

Стандартный приём — кодировать команды в адресах ссылок: <a href="action:open&id=123">Открыть</a>. В обработчике разбираете строку href, извлекаете команду и параметры, выполняете нужное действие (открыть карточку товара, провести документ) и обязательно отменяете стандартную обработку, чтобы браузер не пытался перейти по несуществующему адресу. Для этого в данных события устанавливается отказ от стандартной обработки (свойство вида СтандартнаяОбработка = Ложь либо аналог через объект события, зависит от версии платформы).

&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    СтандартнаяОбработка = Ложь;
    Адрес = ДанныеСобытия.href;
    Если СтрНайти(Адрес, "action:open") > 0 Тогда
        ОткрытьЗначение(ПолучитьСсылкуИзПараметров(Адрес));
    КонецЕсли;
КонецПроцедуры

Проверяйте в обработчике, что ДанныеСобытия и его свойства заполнены: событие может срабатывать и при клике по пустой области, когда href отсутствует. Обращение к несуществующему свойству вызовет ошибку выполнения.

Обмен данными между 1С и JavaScript

Для вызова JavaScript из 1С используется объектная модель документа, доступная через свойство Документ поля HTML (в управляемых формах доступность зависит от версии платформы и режима совместимости). Можно получить элементы по идентификатору, изменить содержимое, вызвать функцию через parentWindow.execScript или eval. Однако в тонком и веб-клиенте прямой доступ к DOM сильно ограничен — там надёжнее работает схема «1С формирует новый HTML и перезагружает поле».

Обратная связь — из JavaScript в 1С — всегда идёт через навигацию: скрипт устанавливает document.location.href = "cmd:...", а 1С перехватывает это в ПриНажатии или событии изменения содержимого. Это работает во всех клиентах одинаково, поэтому кроссплатформенные решения строят именно на ссылках.

Ограничения движков и различия клиентов

Главный подводный камень — разные браузерные движки в разных клиентах. Толстый клиент в обычном приложении использует Internet Explorer, тонкий клиент современных версий — WebKit или WebView2, веб-клиент — браузер пользователя. Современный CSS (flexbox, grid) и ES6-скрипты могут не работать в старых конфигурациях. Перед внедрением проверяйте, в каких клиентах будет запускаться решение, и тестируйте в каждом.

Второе ограничение — производительность. Поле HTML-документа перерисовывается целиком при смене содержимого, поэтому частые обновления (например, каждую секунду) вызывают мерцание и нагрузку. Для динамических данных обновляйте поле по событию, а не по таймеру, либо обновляйте DOM через JavaScript без полной перезагрузки, если клиент это позволяет.

Типичные ошибки и их устранение

Первая ошибка — забытая отмена стандартной обработки в ПриНажатии: после выполнения команды поле переходит по служебной ссылке и показывает страницу ошибки, затирая сформированный отчёт. Вторая — экранирование кавычек: при сборке HTML конкатенацией строк кавычки внутри атрибутов нужно удваивать по правилам строковых литералов 1С, иначе разметка разваливается. Удобнее использовать шаблоны с подстановкой или текстовые документы с макетами.

Третья группа ошибок — работа с внешними страницами. Если поле отображает сайт, помните: события внутри чужого домена могут быть недоступны из-за политики безопасности, а сайт может блокировать показ во фрейме. Для интеграции с веб-сервисами надёжнее получать данные через HTTP-запросы 1С и формировать собственный HTML, чем встраивать живой сайт.

Когда поле HTML не подходит: альтернативы

Не каждую задачу стоит решать через HTML. Для печатных форм и регламентированных отчётов правильнее использовать табличный документ — он корректно выгружается в Excel и печатается. Для графиков и диаграмм есть встроенные диаграммы и диаграмма Ганта. Для карт в типовых конфигурациях часто уже есть готовые механизмы геолокации. Поле HTML оправдано, когда нужна нестандартная вёрстка, интерактивность или готовая JS-библиотека, которую невыгодно переписывать.

Частые вопросы