При разработке отчетов и печатных форм в 1С часто возникает необходимость выгрузки табличных документов, содержащих сложные визуальные элементы, в формат HTML5. Это позволяет отображать отчеты в удобном интерактивном виде прямо на управляемой форме с помощью элемента управления Поле HTML-документа. Однако разработчики нередко сталкиваются с неприятным багом: на экране монитора документ с диаграммой выглядит безупречно, но при попытке открыть предварительный просмотр или отправить документ на печать вместо красивой цветной диаграммы появляется сплошной черный квадрат.
В этой статье мы подробно разберем, почему возникает этот эффект, исследуем структуру генерируемого платформой HTML-кода и рассмотрим несколько практических способов решения проблемы, включая полную автоматизацию исправления на встроенном языке 1С.
Для того чтобы понять природу возникновения «черного квадрата», обратимся к структуре HTML-документа, который генерирует платформа 1С при сохранении табличного документа с диаграммой в формате HTML5.
Современные версии платформы 1С преобразуют графики и диаграммы в векторный формат SVG (Scalable Vector Graphics). Это отличное решение, так как векторная графика масштабируется без потери качества. Код SVG внедряется непосредственно в тело HTML-документа. Стили оформления (цвета заливки, границы, параметры шрифтов) выносятся в отдельный блок <style> внутри тега <defs> самого SVG-контейнера.
Давайте проанализируем фрагмент стандартного кода, генерируемого платформой:
<style type="text/css" media="screen">
<![CDATA[
.S6 { fill:rgb(255,255,255); }
.S7 { stroke:rgb(169,169,169); fill:none; }
.S8 { font-family:MS Shell Dlg; font-size:16px; fill:rgb(51,51,51); }
.S9 { stroke:rgb(28,85,174); stroke-width:2; fill:none; }
.S10 { fill:rgb(28,85,174); }
]]>
</style>
Обратите внимание на атрибут media="screen" в теге <style>. Согласно спецификации консорциума W3C, данный атрибут указывает браузеру (или встроенному в 1С движку отображения HTML), что описанные внутри стили должны применяться исключительно при выводе на экран монитора.
Когда пользователь нажимает кнопку «Печать» или открывает «Предварительный просмотр», контекст отображения страницы меняется со screen (экран) на print (печать). В этот момент происходит следующее:
media="screen" и полностью игнорирует весь блок стилей, расположенный внутри этого тега..S6, .S7, .S8 и т.д.), которые отвечали за цвета секторов, линий и подложки диаграммы, перестают работать.fill через инлайновые атрибуты, оно сбрасывается к значению по умолчанию. По умолчанию значением свойства fill для фигур в SVG является черный цвет (black).<rect class="S6" ...>, который должен быть белым, при отключении стилей он окрашивается в дефолтный черный цвет, перекрывая собой все остальные элементы. Мы получаем тот самый черный квадрат.Самый простой и эффективный способ исправить данное поведение — программно обработать полученный из табличного документа текстовый файл HTML перед его выводом в ПолеHTMLДокумента. Нам необходимо заменить ограничивающий атрибут media="screen" на универсальный media="all" (применять для всех типов устройств, включая принтеры) либо на media="screen, print". Также можно просто удалить этот атрибут.
Рассмотрим по шагам, как реализовать этот алгоритм на встроенном языке 1С:
// Шаг 1. Создаем временный файл для сохранения отчета в формате HTML5
ИмяВременногоФайла = ПолучитьИмяВременногоФайла("html");
ТабличныйДокумент.Записать(ИмяВременногоФайла, ТипФайлаТабличногоДокумента.HTML5);
// Шаг 2. Читаем созданный файл в текстовый документ с кодировкой UTF-8
ТекстовыйФайл = Новый ТекстовыйДокумент();
ТекстовыйФайл.Прочитать(ИмяВременногоФайла, "UTF-8");
ТекстHTML = ТекстовыйФайл.ПолучитьТекст();
// Шаг 3. Производим замену "неправильного" атрибута медиа-запроса
// Заменяем media="screen" на media="all", чтобы стили применялись и при печати
ТекстHTML = СтрЗаменить(ТекстHTML, "media=""screen""", "media=""all""");
// Дополнительно можно выполнить другие преобразования (например, картинок в base64)
// ...
// Шаг 4. Записываем измененный текст обратно в файл или передаем напрямую в Поле HTML
ТекстовыйФайл.УстановитьТекст(ТекстHTML);
ТекстовыйФайл.Записать(ИмяВременногоФайла, "UTF-8");
// Шаг 5. Загружаем исправленный файл в элемент управления на форме
Элементы.ПолеHTMLДокумента.УстановитьТекст(ТекстHTML);
// Не забываем удалить временный файл после использования
Попытка
УдалитьФайлы(ИмяВременногоФайла);
Исключение
// Обработка исключения, если файл занят другим процессом
КонецПопытки;
Благодаря использованию функции СтрЗаменить, мы мгновенно исправляем все вхождения некорректного тега. После этой несложной манипуляции при отправке на печать или открытии предпросмотра диаграмма будет отображаться в своем исходном цветном виде.
Если вашей конечной задачей является получение печатной формы для отправки клиенту или сохранения в архив, использование HTML-формата как промежуточного звена может быть избыточным. Браузеры могут по-разному интерпретировать разметку страниц, масштабы и шрифты при печати.
В качестве надежной альтернативы рассмотрим сохранение табличного документа напрямую в формат PDF. Платформа 1С имеет встроенный высококачественный движок генерации PDF-документов, который отлично справляется с векторной графикой и диаграммами, не искажая цвета и пропорции при печати. Это исключает любые проблемы с CSS-стилями:
ИмяФайлаPDF = ПолучитьИмяВременногоФайла("pdf");
ТабличныйДокумент.Записать(ИмяФайлаPDF, ТипФайлаТабличногоДокумента.PDF);
// Далее можно открыть файл системным просмотрщиком или отправить на принтер
В некоторых случаях (например, при отправке писем по электронной почте в формате HTML) получатели могут использовать почтовые клиенты, которые вообще не поддерживают отображение встроенных SVG-элементов или блокируют их из соображений безопасности. В такой ситуации идеальным решением будет преобразование диаграммы из интерактивного объекта в обычную статическую картинку (например, формата PNG или JPEG) еще на этапе формирования табличного документа.
Рассмотрим, как заменить объект диаграммы на рисунок в табличном документе:
ТабличныйДокумент.Рисунки.ТипРисункаТабличногоДокумента.Диаграмма.ПолучитьКартинку() извлекаем визуальное представление диаграммы в виде растрового изображения.ТипРисункаТабличногоДокумента.Картинка, помещаем его на те же координаты (строки/колонки) и удаляем исходный объект диаграммы.После такого преобразования при экспорте в HTML платформа сгенерирует стандартный тег <img> с растровым изображением. Оно гарантированно распечатается в любом браузере и на любом принтере без каких-либо "черных квадратов", поскольку растровые картинки не зависят от медиа-запросов стилей SVG.
Если вы применили Решение 1 (заменили стили на media="all"), но цвета на печати все равно блекнут, либо некоторые элементы диаграммы отсутствуют, обязательно проверьте настройки самого веб-браузера или операционной системы, из которой производится печать.
В современных браузерах (Chrome, Яндекс.Браузер, Opera, Edge) в диалоговом окне печати присутствует важная опция: «Фоновая графика» (или «Печать фоновых изображений»). Если этот флажок снят, браузер в целях экономии чернил принтера может принудительно отключать заливку фоновых областей элементов CSS и SVG. Для корректного вывода цветных графиков эта галочка обязательно должна быть установлена.