При разработке интерфейсов в 1С:Предприятие с использованием элемента ПолеHTMLДокумента разработчики часто сталкиваются с проблемой неоднородного отображения контента на разных рабочих станциях. Основная причина кроется в различиях системных настроек масштабирования (DPI), версиях используемого браузерного движка и специфике самого HTML/SVG контента. В этой статье мы подробно разберем, как добиться стабильного масштаба страницы, проанализируем различные подходы и выясним, как обойти ограничения веб-клиента.
Наиболее простым и быстрым способом управления масштабом является прямое обращение к стилю тела документа через объектную модель DOM. Рассмотрим пример кода, который позволяет установить масштаб в 110%:
&НаКлиенте
Процедура УстановитьМасштаб()
// Обращаемся к свойству zoom через объектную модель документа
Элементы.ПолеHTML.Документ.body.style.zoom = "110%";
КонецПроцедуры
Важно помнить, что обращение к объекту Документ возможно только после того, как страница была полностью загружена в поле. Если вызвать этот код до завершения формирования страницы, система может выдать ошибку, так как объект еще не инициализирован. Поэтому проанализируем наиболее подходящее место для размещения этого кода.
Чтобы гарантировать наличие доступа к body документа, мы должны использовать специализированный обработчик события. Разберем по шагам, как это реализовать:
ПолеHTML в дереве элементов формы.ДокументСформирован.Пример реализации в модуле управляемой формы:
&НаКлиенте
Процедура ПолеHTMLДокументСформирован(Элемент)
// Масштаб применится сразу после загрузки контента
Элемент.Документ.body.style.zoom = "90%";
КонецПроцедуры
Обратите внимание: этот метод отлично работает в тонком и толстом клиентах на операционной системе Windows, где поле HTML использует движок Internet Explorer (Trident) или встроенный Chromium (CEF).
Хотя свойство zoom поддерживается многими браузерами, оно не является официальным стандартом CSS. В более современных версиях платформы 1С, использующих движок на базе WebKit/Chromium, более надежным методом будет использование transform: scale. Рассмотрим ситуацию, когда нам нужно уменьшить содержимое:
&НаКлиенте
Процедура ПолеHTMLДокументСформирован(Элемент)
// Устанавливаем масштаб 80%
Элемент.Документ.body.style.transform = "scale(0.8)";
// Важно зафиксировать точку трансформации в левом верхнем углу
Элемент.Документ.body.style.transformOrigin = "0 0";
КонецПроцедуры
Преимущество scale перед zoom заключается в более предсказуемом поведении при отрисовке сложных векторных элементов, таких как SVG-схемы из Visio. При использовании scale браузер корректно пересчитывает координаты всех вложенных элементов.
Если ваша задача — отобразить схему, экспортированную из Visio в формате SVG, прямое масштабирование body может привести к обрезанию краев или появлению лишних полос прокрутки. В этом случае мы рекомендуем управлять атрибутами самого контейнера svg. Проанализируем, что нужно изменить в HTML-коде:
<svg> отсутствуют жестко заданные параметры width и height в пикселях.viewBox, который определяет внутренние логические координаты схемы.preserveAspectRatio="xMinYMin meet" для адаптивного вписывания в область.В коде 1С это можно реализовать путем программной замены текста в строке HTML перед её выводом в поле:
ТекстHTML = СтрЗаменить(ИсходныйТекст, "<svg", "<svg width='100%' height='100%'");
Объект.ПолеHTMLДанные = ТекстHTML;
Выясним причину, по которой код Элементы.ПолеHTML.Документ может не работать в веб-браузере. В веб-клиенте действуют строгие правила безопасности (Same-Origin Policy). Если HTML-контент загружается с другого домена или через внешнюю ссылку, 1С не сможет получить прямой доступ к DOM-дереву из своего кода.
Решение: Внедряйте JavaScript-код непосредственно в текст страницы при её формировании на стороне сервера. Вместо того чтобы управлять масштабом «снаружи» (из 1С), мы заставим страницу масштабировать саму себя «изнутри».
Добавьте следующий скрипт в секцию <head> вашего HTML:
<script>
window.onload = function() {
document.body.style.zoom = '85%';
};
</script>
Этот метод универсален и работает даже тогда, когда программный доступ к объекту Документ из платформы ограничен политикой безопасности браузера.
Часто масштаб «плывет» из-за того, что на разных мониторах установлены настройки 125% или 150%. Выясним, как с этим бороться. В среде Windows 1С часто использует режим эмуляции старых версий Internet Explorer (например, IE7), который некорректно обрабатывает современные стили.
Для исправления ситуации на уровне системы можно прописать в реестре Windows (ветка FEATURE_BROWSER_EMULATION) использование IE11 для процесса 1cv8.exe. Это сделает интерпретацию параметров zoom идентичной на всех компьютерах. Однако, так как это требует прав администратора, более предпочтительным вариантом остается динамическое вычисление коэффициента в JavaScript:
var ratio = window.devicePixelRatio; // Получаем коэффициент масштабирования системы
document.body.style.zoom = (1 / ratio).toString(); // Пробуем компенсировать системный масштаб
Если вы хотите предоставить пользователю возможность самостоятельно менять масштаб (например, с помощью кнопок «+» и «-» на форме 1С), мы рекомендуем использовать следующий подход:
ТекущийМасштаб (число).
&НаКлиенте
Процедура ИзменитьМасштаб(Коэффициент)
// Пример: Коэффициент = 1.1 для увеличения на 10%
МасштабТекст = Формат(ТекущийМасштаб * 100, "ЧГ=0") + "%";
Попытка
Элементы.ПолеHTML.Документ.body.style.zoom = МасштабТекст;
Исключение
// Обработка случая, если документ еще не доступен
КонецПопытки;
КонецПроцедуры
Таким образом, комбинируя методы прямого управления DOM, внедрение скриптов и правильную подготовку SVG-контента, мы можем добиться идеального отображения HTML-страниц в любом клиенте 1С:Предприятие.