Как создать HTML-макет в 1С

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

В отличие от табличного макета, HTML-вариант даёт гибкую вёрстку: стили, таблицы, картинки, ссылки. Обратная сторона — отсутствие встроенного механизма областей и параметров, как у табличных документов, поэтому подстановку данных приходится делать вручную через строковые замены.

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

Где в конфигураторе создаётся HTML-макет

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

Макет также можно создать локально — у конкретного объекта, например у справочника или отчёта, на закладке «Макеты». Локальный макет доступен только через менеджер этого объекта, а общий — из любого места кода. Если шаблон нужен в нескольких объектах, размещайте его в общих макетах.

Встроенный редактор HTML в конфигураторе минимален: подсветки синтаксиса и проверки ошибок в нём нет. Удобнее писать разметку во внешнем редакторе (Notepad++, VS Code) и вставлять готовый текст в макет. Сохраните конфигурацию после добавления — иначе макет не будет виден при обращении из кода.

Как подготовить HTML-шаблон с метками для данных

Шаблон должен быть самодостаточным: вся разметка и стили — в одном файле, без внешних CSS и скриптов, потому что поле HTML-документа в 1С не подгружает внешние ресурсы из локальных файлов. Стили описывайте инлайн или в блоке <style> внутри <head>.

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

<html>
<head><style>
body { font-family: Arial; font-size: 12px; }
table { border-collapse: collapse; }
td, th { border: 1px solid #999; padding: 4px; }
</style></head>
<body>
<h2>Счёт № [НомерДокумента] от [ДатаДокумента]</h2>
<p>Покупатель: [Контрагент]</p>
<table><tr><th>Товар</th><th>Сумма</th></tr>
[СтрокиТаблицы]
</table>
</body>
</html>

Избегайте ActiveX, JavaScript с обращением к внешним объектам и фреймов — поле HTML-документа работает на движке Internet Explorer в тонком клиенте под Windows, и многие современные возможности HTML5 там недоступны. Проверяйте вёрстку в простом, «старом» стиле: таблицы, базовые шрифты, простые стили.

Как получить макет программно и подставить данные

Общий макет получается функцией ПолучитьОбщийМакет("МакетПисьма"), макет объекта — через менеджер: Документы.СчетНаОплату.ПолучитьМакет("МакетHTML"). Для HTML-макета результатом будет объект, из которого текст читается методом ПолучитьТекст() либо напрямую, если макет возвращается как строка — зависит от контекста вызова.

Подстановка данных выполняется последовательными заменами. Чтобы не пропустить метку, держите список замен в одном месте процедуры и после всех замен проверяйте, не осталось ли в тексте необработанных меток — это удобно делать поиском характерного символа открывающей скобки.

ТекстHTML = ПолучитьОбщийМакет("МакетПисьма").ПолучитьТекст();
ТекстHTML = СтрЗаменить(ТекстHTML, "[НомерДокумента]", НомерДокумента);
ТекстHTML = СтрЗаменить(ТекстHTML, "[ДатаДокумента]", Формат(ДатаДокумента, "ДЛФ=D"));
ТекстHTML = СтрЗаменить(ТекстHTML, "[Контрагент]", Строка(Контрагент));

СтрокиТаблицы = "";
Для Каждого СтрокаТовара Из Товары Цикл
СтрокиТаблицы = СтрокиТаблицы + "<tr><td>" + СтрокаТовара.Номенклатура
+ "</td><td>" + Формат(СтрокаТовара.Сумма, "ЧДЦ=2") + "</td></tr>";
КонецЦикла;
ТекстHTML = СтрЗаменить(ТекстHTML, "[СтрокиТаблицы]", СтрокиТаблицы);

Если в подставляемых данных могут встречаться символы <, >, & (например, в наименованиях контрагентов), экранируйте их заменой на HTML-сущности, иначе разметка «сломается» и часть текста пропадёт или отобразится некорректно.

1. 1
   В конфигураторе создайте общий макет с типом «HTML-документ»
2. 2
   Вставьте в макет самодостаточную HTML-разметку со стилями внутри
3. 3
   Расставьте уникальные метки вида [ИмяПоля] в местах подстановки данных
4. 4
   В коде получите макет через ПолучитьОбщийМакет() и прочитайте текст
5. 5
   Выполните СтрЗаменить() для каждой метки, таблицы соберите в цикле
6. 6
   Присвойте итоговый текст реквизиту формы типа «Поле HTML-документа»
7. 7
   Откройте форму и проверьте отображение в нужном клиенте

Как вывести HTML на форму

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

// в модуле формы
&НаСервере
Процедура СформироватьНаСервере()
ТекстHTML = СформироватьТекстПисьма(Параметры.Документ);
КонецПроцедуры

Поле HTML-документа поддерживает событие ПриНажатии, через которое можно перехватывать клики по ссылкам и открывать, например, карточки объектов 1С вместо перехода по адресу. Для этого в шаблоне ссылкам задают специальные href вида <a href="doc:Счет.000123">, а в обработчике события разбирают значение и отменяют стандартную обработку.

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

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

Альтернативы HTML-макету и когда их выбрать

HTML-макет — не единственный способ форматированного вывода в 1С. Для печатных форм и отчётов чаще подходят другие инструменты, и выбор зависит от задачи.

Сравнение вариантов вывода

HTML-макет

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

Табличный макет

Стандарт для печатных форм: области, параметры, точная печать. Ограничение: слабые возможности оформления, нет интерактивности.

СКД (схема компоновки данных)

Лучший выбор для отчётов с группировками и отборами. Ограничение: требует знания схемы компоновки, не для произвольной вёрстки.

Внешний HTML-файл из базы

Шаблон хранится в справочнике или константе и редактируется без обновления конфигурации. Ограничение: нужно проектировать хранение и права доступа.

Если шаблон должны править пользователи без конфигуратора, храните HTML-текст не в макете, а в справочнике «Шаблоны» или в константе — тогда изменение шаблона не потребует обновления конфигурации и прав разработчика. Макет в конфигураторе выбирайте, когда шаблон стабилен и меняется только вместе с релизом.

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

После подстановки данных откройте форму и проверьте три вещи: все ли метки заменены, не сломана ли разметка спецсимволами в данных, корректно ли отображается документ в целевом клиенте. Быстрый способ найти незаменённые метки — вывести итоговый текст в сообщение или файл и поискать символ открывающей квадратной скобки.

Контрольные точки

Как проверить результат

Отображение меток

Норма

В выведенном документе нет конструкций вида [ИмяПоля]

Тревожный признак

На экране видны необработанные метки — замена не выполнена

Целостность разметки

Норма

Таблицы и текст отображаются как в шаблоне

Тревожный признак

Часть текста пропала или «разъехалась» — вероятны неэкранированные символы

Работа в целевом клиенте

Норма

Документ корректен в том клиенте, где работают пользователи

Тревожный признак

В веб-клиенте стили или структура отличаются от тонкого

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

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

Можно ли использовать параметры и области, как в табличном макете?

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

Почему картинки из макета не отображаются в поле HTML-документа?

Поле HTML-документа не подгружает внешние файлы по относительным путям. Изображение нужно либо встроить в разметку в формате base64 через тег img с data-URI, либо ссылаться на доступный веб-адрес.

Как дать пользователям возможность менять шаблон без конфигуратора?

Храните HTML-текст в справочнике шаблонов или в реквизите объекта, а не в макете конфигурации. Код при этом почти не меняется: вместо ПолучитьОбщийМакет() текст берётся из реквизита, дальше работают те же замены меток.

Почему в веб-клиенте документ выглядит иначе, чем в тонком?

В тонком клиенте под Windows используется движок Internet Explorer, а в веб-клиенте — браузер пользователя. Они по-разному поддерживают CSS и HTML5. Используйте простую табличную вёрстку и базовые стили, а результат проверяйте в обоих клиентах.

Можно ли из HTML-макета сделать печатную форму?

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

Как обработать клик по ссылке внутри HTML на форме?

Используйте событие «ПриНажатии» поля HTML-документа. В шаблоне задайте ссылкам служебные адреса, в обработчике разберите переданное значение, отмените стандартный переход и выполните нужное действие — например, откройте карточку документа.