Как вывести HTML на форму в 1С: пошаговая инструкция

В управляемых формах 1С вывод HTML-разметки реализуется через специальный элемент формы «Поле HTML документа» (вид ПолеHTMLДокумента). Он отображает произвольную HTML-страницу: текст с форматированием, таблицы, картинки, ссылки и даже интерактивные элементы, сгенерированные прямо в коде конфигурации.

Типовые сценарии применения: красиво оформленные панели информации о контрагенте, визуализация статусов документа, отчёты с нестандартной раскраской, инструкции и подсказки внутри формы, простые дашборды без построения диаграмм средствами СКД.

Механизм одинаков во всех современных конфигурациях на управляемом приложении (БП, УТ, ERP, ЗУП и собственные разработки). Ниже разобраны подготовка формы, формирование HTML-строки, обработка кликов по ссылкам, ограничения встроенного браузера и типичные ошибки.

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

Откройте нужную форму в конфигураторе. В панели элементов нажмите «Добавить» и выберите тип Поле формы, а в свойстве «Вид» укажите Поле HTML документа. Элементу нужен источник данных — реквизит формы типа Строка неограниченной длины, например ПолеHTML.

Порядок действий в конфигураторе:

• создайте реквизит формы ПолеHTML с типом «Строка», длина неограниченная;
• перетащите реквизит в дерево элементов формы;
• в свойствах элемента установите Вид = «Поле HTML документа»;
• при необходимости отключите заголовок и настройте растягивание по высоте и ширине.

После этого достаточно присвоить реквизиту любую корректную HTML-строку — содержимое отобразится на форме автоматически. Присваивать можно в ПриСозданииНаСервере, ПриОткрытии или в ответ на действия пользователя.

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

Формирование HTML-строки в коде

Самый простой вариант — собрать строку конкатенацией. Для читаемости больших шаблонов удобнее использовать текстовый макет и подстановку параметров через СтрЗаменить.

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)

Шаблон = "<html><body style='font-family:Segoe UI; font-size:12px;'>"
+ "<h3 style='color:#2E6DA4;'>[Заголовок]</h3>"
+ "<p>Контрагент: <b>[Контрагент]</b></p>"
+ "<p>Задолженность: <span style='color:red;'>[Долг]</span></p>"
+ "</body></html>";

ТекстHTML = СтрЗаменить(Шаблон, "[Заголовок]", "Карточка клиента");
ТекстHTML = СтрЗаменить(ТекстHTML, "[Контрагент]", Объект.Контрагент);
ТекстHTML = СтрЗаменить(ТекстHTML, "[Долг]", Формат(ПолучитьДолг(), "ЧДЦ=2"));

ПолеHTML = ТекстHTML;

КонецПроцедуры

Для больших документов лучше завести общий макет типа «Текстовый документ» с HTML-шаблоном и читать его через ПолучитьМакет(). Так верстку сможет править человек без доступа к модулю формы, а код станет заметно чище.

Избегайте подстановки «сырых» пользовательских данных без экранирования: если в наименовании контрагента встретятся символы < или кавычки, разметка сломается. Минимальная защита — замена < на < и > на > в подставляемых значениях.

ПолеHTML = "<b>Привет, 1С!</b>";

Обработка нажатий на ссылки: событие ПриНажатии

HTML-документ на форме 1С — не просто картинка: ссылки внутри него интерактивны. Чтобы клик по ссылке выполнял действие в 1С (открытие документа, запуск команды), включите у элемента обработчик события ПриНажатии.

Внутри ссылок используйте собственную схему, например <a href="doc:ОткрытьЗаказ|12345">. В обработчике разберите href и выполните нужное действие:

&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)

СтандартнаяОбработка = Ложь;

Ссылка = ДанныеСобытия.href;
Если СтрНайти(Ссылка, "doc:") = 0 Тогда
Возврат;
КонецЕсли;

Части = СтрРазделить(Ссылка, "|");
Если СтрНайти(Части[0], "ОткрытьЗаказ") > 0 Тогда
ОткрытьЗаказПоИд(Части[1]);
КонецЕсли;

КонецПроцедуры

Обязательно устанавливайте СтандартнаяОбработка = Ложь, иначе встроенный браузер попытается перейти по несуществующему адресу и покажет страницу ошибки. Также учтите, что свойство href может прийти с преобразованным регистром и дополненным протоколом — надёжнее искать подстроку через СтрНайти, чем сравнивать строку целиком.

Событие ДокументСформирован и работа с DOM

Присваивание текста реквизиту не означает мгновенной готовности документа: браузеру нужно время на разбор разметки. Если код сразу обращается к элементам документа, он получит пустой результат. Событие ДокументСформирован сигнализирует, что DOM построен и доступен.

&НаКлиенте
Процедура ПолеHTMLДокументСформирован(Элемент)

Документ = Элемент.Документ;
Документ.getElementById("status").innerText = "Данные загружены";

КонецПроцедуры

Через Элемент.Документ доступна объектная модель документа: можно находить элементы по id, менять их текст и стили, подписываться на события. Это удобно для частичного обновления содержимого без полной перегенерации HTML.

Однако не злоупотребляйте манипуляциями DOM на каждое действие пользователя — в тонком клиенте обращения к объектам документа относительно дорогие. Если содержимое меняется целиком, проще заново сформировать строку и присвоить реквизиту.

Ограничения встроенного браузера

Вид отображаемого HTML зависит от движка, который использует платформа на конкретном клиенте. В зависимости от версии платформы и настроек это может быть Internet Explorer (устаревший движок) или WebKit/современный браузерный компонент. Практические следствия:

• современные возможности CSS (flexbox, grid, переменные) могут не работать на старых движках — используйте простую табличную и блочную вёрстку;
• JavaScript поддерживается ограниченно; сложные библиотеки могут не запуститься;
• веб-клиент имеет дополнительные ограничения на доступ к DOM и локальным файлам;
• локальные картинки по пути file:// часто заблокированы — встраивайте изображения через base64.

Перед внедрением проверьте отображение на всех целевых клиентах: тонкий клиент, толстый клиент и веб-клиент могут показать один и тот же HTML по-разному. Тестирование только на машине разработчика — частая причина «съехавшей» вёрстки у пользователей.

Картинки, картинки из базы и base64

Типовая задача — показать в HTML фото товара или логотип, хранящийся в базе. Прямой ссылки на файл внутри информационной базы нет, поэтому изображение кодируют в base64 и вставляют через data-URI:

Двоичные = ХранилищеКартинки.Получить();
СтрокаBase64 = Base64Строка(Двоичные);
ТегКартинки = "<img src='data:image/jpeg;base64," + СтрокаBase64 + "' width='120'/>";

Учтите, что base64 увеличивает объём данных примерно на треть. Десяток крупных фотографий в одном документе сделает форму тяжёлой и замедлит её открытие. Для списков используйте уменьшенные копии изображений или показывайте фото только выбранного элемента.

Для небольших иконок и служебной графики base64 — оптимальный вариант: картинка путешествует вместе с HTML-строкой, не требует файловой системы и одинаково работает во всех клиентах.

Альтернативы полю HTML-документа

HTML-поле — не единственный способ вывести форматированную информацию на форму. В ряде случаев другие средства подходят лучше:

Если задача — только показать цветной статус или подсказку, декорация с настроенным цветом фона справится проще и надёжнее. HTML оправдан там, где нужна произвольная компоновка блоков или кликабельные элементы внутри контента.

Типичные ошибки и проверка результата

Чаще всего проблемы сводятся к нескольким повторяющимся сценариям. Пустое поле на форме обычно означает, что реквизиту присвоена пустая строка или присваивание выполнено в серверной процедуре, а диагностируется на клиенте после перезаписи. «Съехавшая» вёрстка у части пользователей — признак разных браузерных движков. Неработающие ссылки — следствие отсутствия обработчика ПриНажатии или забытой строки СтандартнаяОбработка = Ложь.

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