Печать документов при использовании веб-инструментов на Технологии 1С:Элемент

Разрабатывая решения на 1С:Элемент, разработчики часто сталкиваются с необходимостью функциональности печати отчетов, документов или других произвольный печатных форм.

На выбор есть следующие варианты:

• Стандартные механизмы печати, предоставляемые Платформой 1С (подходит, когда приложение на 1С:Элемент интегрировано с другим решением, например, бэкофис)

• Программное формирование табличных документов с использованием встроенного языка 1С:Элемент

• Заполнение параметров по макету .mxl (макет формируется с помощью конфигуратора на Платформе 1С:Предприятие)

• Очень редко — генерация PDF через внешние системы.

Макет в формате Word адаптировать под формат MXL-шаблона бывает трудно без потерь стиля и структуры. Если задача технически и решаема, то может оказаться трудозатратной для разработчика.

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

Данный материал - рассуждение на тему: почему бы нам не использовать для целей печати HTML и CSS, которые позволяют с высокой точностью воспроизвести любые дизайнерские решения — будь то сложная таблица, многоуровневая стилизация текста или сложная разметка страницы. А заодно и пример использования этих инструментов в реальном приложении – формировании печатной формы для анкет.

Пример использования макета в формате html

Конвертируем полученную печатную форму Word в веб-страницу:

Получается файл, который можно редактировать в формате html. Важно учитывать, что MS Word по умолчанию создаст файл в кодировке windows-1251.

Данные для заполнения будущих печатных форм мы будем брать по ссылке на документ – анкету, которую заполняет условный кандидат. Поскольку статья рассчитана на практикующих разработчиков на 1С:Элемент, формирование запроса и получение структуры данных из объекта я оставляю за кадром:

Итого перед формированием печатной формы я имею три переменных – Данные (шапки) и данные двух табличных частей.

Ещё одна особенность конвертации doc в html – вся графика архивируется в отдельный файл, адрес, до которого прописывается в итоговой верстке, если не обработать эту ситуацию, то наш макет не сможет отобразить картинки. Если графика и макет нетяжелые, то можно сохранить также графику как ресурс, прочитать как байты и кодировать в base64 строку, заменив результатом исходную часть макета подобным образом:

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

По итогу в переменной результат будет находится строка, воспринимающееся читающееся браузером как html и готовое к отображению:

Как реализовать заполнение макета данными нашего документа? С помощью замены служебного идентификатора на итоговые данные, например:

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

Как реализовывать табличные части?

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

Здесь это оправдано, потому что шаблон для строки табличной части образование выглядит так:

Такая сложная разметка может образовываться при конвертации .doc в html – если требуется поддержать первоначальное форматирование документа, то целесообразно переносить получившуюся строку целиком, без упрощений.

Как печатать

Отлично, наш макет отображается в Контейнере, заполняется данными нужного документа, пора вывести его на печать. Для этого я добавил метод на JavaScript, который вызывает уже готовое API браузера для печати:

Дополнительно можно настроить отступы по умолчанию, оформление макета и параметры предпросмотра с помощью CSS:

1С:Предприятие.Элемент позволяет взаимодействовать с любым JS кодом внутри типа КонтейнерHtml с помощью «ВызватьМетод»:

За счет этого появляется возможность навесить обработчик на команду уже на самой форме печати.

Результат

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

Интерактивные печатные формы

Поскольку общаться с JavaScript кодом 1С:Элемент умеет, в том числе передавая произвольные аргументы, становится возможным реализовать интерактивные печатные формы.

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

С помощью JavaScript можно обработать выбор пользователя, и выбранное значение превратится в значение поля, итоговую печатную форму можно уже отправлять на печать.

Встраивая элементы классических веб-инструментов в приложение на 1С:Элемент, вы получаете почти безграничные возможности в части интерактивных взаимодействий с любым компонентом. Конечно, большая часть сценариев не потребует использования дополнительных технологий, однако если у вас появится нестандартная задача – вы всегда можете экспериментировать с JavaScript и CSS.