1с поле html документа картинка
1С html. Cоздание поля html документа
В статье на примере будут описаны все этапы создания поля html документа. В 1с html поле позволяет представить данные, которые не требуется редактировать, в более эстетичном виде. Разработчик может применить возможности html для создания и настройки формы справочника или бизнес-процесса (как делается в конфигурации Документооборот).
Рассмотрим пример. Разработаем обработку, которая будет представлять элемент справочника Пользователи в виде поля html документа. Для разработки примера я использовал демо БСП 3.1 (управляемое приложение).
Выведем в документ следующие поля справочника:
Размещение реквизитов на форме
Для начала создадим внешнюю обработку и добавим форму. На форме создадим два реквизита Пользователь (тип СправочникСсылка.Пользователи) и ПредставлениеHTML (тип Строка неограниченной длины). Перетащим реквизиты в дерево элементов. Для элемента ПредставлениеHTML выберем вид Поле HTML документа и отключим отображение заголовка. Должно получится так:
Теперь поработаем над программной частью формы:
В итоге должно получиться следующее:
Получение данных
Во входные параметры функции ЗаполнитьHTMLПредставление мы передаем только ссылку на пользователя, поэтому для начала надо собрать все данные, необходимые для вывода в html документ. Для этого воспользуемся запросом, который вынесем в отдельную процедуру. Приводить текст процедуры здесь я не буду, чтобы не занимать много места. Ознакомиться с ним можно во внешней обработке, ссылка на которую находится внизу статьи.
Функция возвращает структуру, в которой содержится две выборки. Первая, ВыборкаДанных — содержит одну строку с основными данными пользователя. Вторая, ВыборкаКонтактов — содержит контактную информацию пользователя, в разрезе двух полей: Вид и Представление. Вызов функции получения данных выглядит так:
Заполнение стилей 1с html поля
Рассмотрим заполнение стилей более подробно:
Создание тела html документа в 1с 8
Вывод изображения в html
Начнем с вывода фотографии пользователя. В элементе справочника она хранится в реквизите Фотография, в виде хранилища значения. Его мы получили вместе с остальными данными пользователя, при помощи запроса.
Разберем представленный код:
Для того чтобы отделить изображение от следующей информации, используем тег
. Он означает начало нового абзаца. При описании стилей мы указали, что перед началом нового абзаца устанавливается отступ в 10 пикселей.
Вывод текстового реквизита в html
После фотографии выведем основные данные пользователя в следующем формате:
Начнем с имени пользователя:
Разберем представленный код:
Вывод ссылки в html
Теперь выведем в документ физлицо пользователя. Так как оно представлено ссылочным типом, оформим его в виде ссылки.
Разберем представленный код:
Далее нам необходимо будет вывести еще один текстовый реквизит и еще один ссылочный. Для того чтобы не дублировать код вынесем добавление реквизита в html в отдельную, универсальную процедуру.
Вывод всех реквизитов будет выглядеть следующим образом:
Вывод таблицы в html 1с
Осталось вывести таблицу контактной информации пользователя. Это делается довольно просто.
На этом формирование поля html документа в 1с завершено. Осталось только закрыть теги и вернуть сформированный текст.
В итоге у нас получается html поле, заполненное следующим образом:
Обработка нажатия на ссылку
В нашей обработке мы используем не веб ссылки, а на навигационные ссылки 1с. По этой причине система не может корректно обработать их нажатие. Это можно исправить, создав обработчик события ПриНажатии, для Поля HTML документа.
В обработчике мы анализируем текст ссылки, на которую произошло нажатие. Если это навигационная ссылка, обрабатываем ее по отдельному алгоритму. Получаем текст и осуществляем переход. Таким образом при нажатии на ссылку, у нас произойдет переход на форму элемента справочника.
Скачать обработку формирования html поля можно здесь: СозданиеHTMLПоля
Редактор HTML-документа
HTML-редактор используется для создания пользовательских описаний в виде HTML-документов. Окно редактора содержит три закладки, позволяющие осуществлять просмотр и редактирование документа.
На закладке Редактирование документ отображается в текстовом и графическом виде:
На закладке Текст разработчик имеет возможность редактировать HTML-текст документа:
Закладка Просмотр предназначена для отображения документа в том виде, в котором он будет показан пользователю:
Работа с HTML-документом напоминает работу в обычном текстовом редакторе, однако HTML-редактор предоставляет ряд дополнительных возможностей, которые обусловлены использованием формата HTML:
Форматирование текста
Текст HTML-документа можно форматировать: устанавливать его стиль, абзацные отступы, выбирать размер шрифта, параметры, гарнитуру и т. д.:
При копировании текста из других текстовых редакторов (например, Word) HTML-редактор сохраняет исходное форматирование текста.
Таблицы
В HTML-документ можно вставлять таблицы и редактировать как параметры отдельных ячеек таблицы, так и изменять внешний вид и параметры всей таблицы:
Картинки
В HTML-документе могут быть размещены картинки. Разработчик имеет возможность задавать размеры картинки, ее положение и толщину рамки вокруг картинки:
Надписи
HTML-редактор позволяет использовать в документах надписи — специальные объекты HTML-документа. В надписи можно разместить текст, таблицу, картинку или другую надпись. При просмотре документа вложенные объекты надписи будут непрерывно прокручиваться справа налево:
При этом последний функционал необходимо полностью доработать до возможности использования в Общем модуле, из которого будем вызывать экспортную процедуру с Формы (Управляемой или Обычной). Хотя есть уже до этого публикация Вставка снимка экрана (screenshot) в форматированный документ, тем не менее не очень удобно переносить 3 процедуры в каждую форму.
Вставка картинки в HTML поле положения курсора при помощи JavaScript.
Рассмотрим следующие режимы:
Для Обычного приложения код выглядит так:
Для управляемых форм код не будет особо отличаться, и в целом будет похож на предыдущий случай. И будет выглядеть таким образом.
Вставка картинки в Форматированный Документ компонентой ДО в Управляемых Формах.
Однако, взамен 1С дописала удобный для разработчиков интерфейс, благодаря чему можно обойтись без вызовов javascript, правда и расширить функционал можно только за счет внешних компонент. В данном случае код вставки будет выглядеть таким образом:
Следует отметить, что все процедуры, кроме ВставитьКартинкуВФорматированныйДокумент можно вставить в модуль и осуществить вызов из модуля, для этого последнюю достаточно сделать экспортной, и также необходимо добавить туда наименование какого-либо события, если вставку картинки в Форматированный Документ необходимо контролировать.
Итоговый код для упрощения процедуры вставки
Для Форматированного Документа:
Для HTML поля обычные Формы:
Изображения в справке 1С
Все преобразование выглядит до смешного простым. Благо разработчики платформы встроили весь функционал внутрь.
Весь код прокомментирован и трудностей не должно возникнуть даже у новичков. Сформированный html можно скопировать в буфер (средствами IE) и вставить в справку.
Открываем обработку из этой статьи пишем текст и вставляем картинку:
Преобразуем в формат html, копируем результат преобразования и открываем редактор справки :
И получаем результат:
Обработка, приложенная к статье в формате управляемой формы, версия платформы 8.3.13, но будет работать и с более старыми. В дополнение могу также упомянуть, что таким образом можно даже свой шрифт подгрузить в тело html страницы (css). СSS очень придирчив к переносам строк, так что чтобы все завелось, строка base64 должна быть без переносов.
Скачать файлы
Специальные предложения
Обновление 13.11.18 15:01
См. также
FormCodeGenerator Программная доработка форм. Часть 2 (Режим работы «Режим сравнения форм») на примере ERP 2.5 Промо
Данная публикация является продолжением описания функционирования обработки «FormCodeGenerator » в режиме сравнения форм и генерирования кода на основании сравнения. Подходит для перевода уже доработанных форм с интерактивной доработки на программную. Данный режим работы обработки снизит издержки при дальнейших обновлениях конфигураций.
21.12.2020 8894 26 huxuxuya 11
Интерактивная справка по объектам 1С (подключаемое расширение)
База знаний, подключаемая к объектам основной базы. Пополняется интерактивно, формируется в виде статей прямо в 1С (текст, картинки, таблицы, ссылки). Есть возможность прикрепления файлов, привязки к объектам 1С, возможности рейтинга и комментирования пользователями.
29.09.2020 14625 76 sapervodichka 43
Конвейер проверки качества кода
Jenkinsfile для выполнения проверки качества кода. Собирает информацию с АПК, EDT и BSL-LS. Сопоставляет ошибки с гит-репозиторием, выгруженным ГитКонвертором. Отправляет в Сонар.
04.09.2019 36310 27 Stepa86 46
Алгоритмы поиска пути в графе
Реализуем алгоритмы поиска пути в графе на платформе 1С 8.3, такие как алгоритм А*, поиск в ширину, жадный поиск, алгоритм Дейкстры и вконце волновой.
09.07.2019 22551 12 RonX01 10
Вам нравятся запросы в 1С? Промо
Речь не только о том, что простейший запрос с «легальным» оформлением растянется на пол-экрана, речь еще обо всем, что нужно написать «в нагрузку» к тексту запроса. Все эти «Новый Запрос», «УстановитьПараметр» и последующие пляски с обработкой результата. Пора с этим заканчивать!
03.07.2019 27466 7 m-rv 91
Работа с публикациями «Инфостарт»
Работа с рублевыми публикациями на сайте «Инфостарт»: ведение клиентов, заказов, обновление файлов публикации, рассылка обновлений.
13.09.2018 28143 14 RocKeR_13 16
HTTP Сервисы: Путь к своему сервису. Часть 3
Продолжение статьи «HTTP Сервисы: Путь к своему сервису. Часть 2». В предыдущих частях мы использовали только Get, в этой части поговорим о других методах и длительных операциях.
27.08.2018 53357 68 dsdred 17
Позиционирование в помещении с помощью нейросети по сигналу Wi-Fi. Интерактивная карта склада в 1С с показом позиции
09.08.2018 35891 31 informa1555 30
ВСТАВИТЬ В Справочник.Номенклатура (Код, Наименование) ЗНАЧЕНИЯ («001», «Новый товар») Промо
Вас не обманывают ваши глаза, это запрос на изменение данных! И это работает без прямого доступа к БД, регистрации и смс.
01.06.2018 36436 94 m-rv 58
Работа с данными выбора
17.07.2018 65621 25 kalyaka 17
Полезные примеры составления схемы компоновки данных #2
Еще один набор примеров как решить частные задачи в СКД
22.05.2018 39883 11 SITR-utyos 13
Печатная форма, сделанная как расширение конфигурации для БП 3.0. Новые возможности БСП
Печатные формы на внешних обработках скоро канут в лету. На смену им приходят ПФ, реализованные в виде расширений конфигурации. Не нашел на сайте примеров таких расширений. Привожу пример подобного расширения для БП 3.0.
06.12.2017 32753 58 kwazi 6
Заполняем по шаблону (по умолчанию) Промо
Простой в подключении, универсальный и достаточно удобный механизм заполнения реквизитов произвольных документов/справочников значениями по умолчанию. Реализован в расширении, но может быть и непосредственно включен практически в любую конфигурацию на управляемых формах простым копированием одной формы и двух команд. Весь код в статье.
08.02.2018 34384 20 mvxyz 17
Паузы при исполнении кода (Sleep для 1С)
Решил проверить все найденные варианты паузы для 1С. В результате получилась обработка для тестирования и небольшая статья с итогом.
28.11.2017 66374 17 swimdog 53
Макет СКД: наглядное представление того, что, как и куда выводится при типовых настройках.
09.11.2017 27134 80 freelancer 4
Telegram-боты
Описание теории, разбор архитектуры и пример реализации telegram-ботов. Сразу скажу, со структурированием изложения мало что могу поделать. 🙂 редакция от 18.07.2018 Правки последней редакции выделены жирным.
01.09.2017 41731 148 PLAstic 68
Нечеткий поиск одним запросом Промо
Использование механизма полнотекстового поиска в 1С не всегда оправдано, т.к. построение индекса и поддержание его в актуальном состоянии может значительно нагружать систему. Предлагаемая реализация нечеткого поиска методом N-грамм выполняется одним запросом, что позволяет производить поиск в любой таблице и не требует предварительного построения индекса.
28.12.2015 34171 73 vasvl123 9
Умный дом на 1С + ардуино
Конфигурация для автоматизации быта программиста 1C и не только. В данной статье будет рассказано, как можно использовать 1С для задач, не входящих в стандартные рамки этой платформы. Например, управление домом. В качестве периферии для подключения будет использован микроконтроллер (МК) Ардуино, но на нём не будет никакой логической нагрузки, весь процесс будет проходить на сервере 1С. Работа с пинами ввода/вывода происходит напрямую из 1С.
07.08.2017 27730 21 sasha777666 64
Расширения конфигураций 1С: учимся перехватывать методы
В этой статье я на примерах разберу некоторые механизмы расширений конфигураций 1С. А именно «перехваты» методов модуля объекта и «перехваты» событий формы и элементов формы. Данная статья написана с учебными целями, чтобы показать, как при помощи расширений конфигурации можно делать такие доработки, ради которых раньше приходилось снимать конфигурацию с поддержки.
30.05.2017 163871 13 signum2009 48
Регулярные выражения – это просто. Построитель и отладчик регулярных выражений
Предлагается к использованию построитель регулярных выражений. Выполненный в виде внешней обработки, он позволит строить сложно-структурированные выражения на основе параметрического описания, тестировать их, и в результате получить программный код 1С.
13.03.2017 38546 123 romasna 52
1С: Предприятие + корпоративный чат, как наладить оперативные уведомления за 10 минут Промо
Как сделать автоматические уведомления о разных событиях из 1С в корпоративный чат MyChat для сотрудников компании
14.08.2016 54552 36 Demanoidos 60
Распознавание текста с помощью нейросетей Google Cloud Vision и 1С
Возможности Google Cloud Vision в распознавании текста.
08.02.2017 37943 145 kiv1c 18
Графическая схема. Управление при помощи XDTO.
В статье описывается методика программного управления элементами графической схемы при помощи механизма XDTO. Приложена готовая к использованию библиотека функций для создания и удаления графических объектов, а также для связи элементов схемы соединительными линиями.
16.01.2017 28908 125 Alxby 25
Простой редактор плана помещения JavaScript
На ресурсе сейчас очень много решений, которые позволяют редактировать карты, используя географические схемы. Так же много решений, которые позволяют редактировать объекты онлайн веб-карт. Мне же нужно было простое решение, для того чтобы расставить квадратные объекты на плане, показать их пользователю. Ну и распечатать, опять же. Я решил написать простенький редактор на JavaScript с использованием библиотеки Raphael.
23.11.2016 26611 104 igel9780 23
Быстрое определение интервалов в запросе Промо
В статье описывается новый метод определения интервалов между данными различных записей в запросе. В отличие от общеизвестного метода, время работы предлагаемого метода зависит от объема данных ЛИНЕЙНО. Это обеспечивает ему значительный выигрыш по быстродействию на больших объемах данных. В качестве иллюстрации возможностей метода приведен отчет, показывающий гистограмму распределения времени между продажами.
01.10.2015 60248 35 ildarovich 41
Работа с двоичными данными на примере чтения файлов изображений. Новые возможности 8.3.9
14.11.2016 34316 17 Anton64 24
Загрузка файлов на сервер с прогрессом и докачкой
Пример использования новых возможностей платформы 8.3.9 по низкоуровневой работе с двоичными данными для инкрементальной передачи файлов на сервер.
04.10.2016 16993 57 mrstomak 21
Несколько шаблонов для доработки типовых конфигураций
Предлагаю несколько каркасов для создания новых объектов в типовых конфигурациях. Это выжимка из кода нескольких конфигураций, которая позволит быстро и красиво создавать и дорабатывать объекты метаданных с соблюдением идеологии исходной системы
03.10.2016 41478 98 json 25
HTTP-сервис: отчеты [Расширение]
Это HTTP-сервис, который возвращает почти любой отчет в HTML, XLSX или в JSON. Сохраните вариант отчета, получите на него ссылку и можно получить данные без захода в 1С. Работает в конфигурациях на основе БСП 2.3.3+, для отчетов на СКД и в 1С 8.3.8+
30.08.2016 33378 149 Stepa86 16
Использование методов глобального контекста в системе компоновки данных или недокументированные возможности СКД
Прочитал на форуме, что СтрРазделить() и ТекущаяДата() работают в языке выражений системы компоновки данных. Почитал справку, там ничего не нашёл, поэтому не поверил. Посмотрел на практике – и правда работает… В данной статье попытался привести весь перечень методов, работающих в СКД, но не описанных в документации.
05.08.2016 42786 27 klinval 40
Недокументированное использование стандартных форм Upd.
Вам не хватает возможностей в платформе 1С или у Вас нет времени на углубленное изучение платформы 1С? Рассмотрены возможности использования стандартных форм, вызываемых из платформы.
26.07.2016 33447 96 ZhokhovM 65
Хранение файлов в томах на диске (для УПП 1.3)
Доработка типовой УПП 1.3 в плане хранения присоединенных файлов вне базы данных
05.06.2016 67183 11 wowik 32
БСП 2.3 и БСП 3.0: Просто про выполнение внешней обработки в фоне (c индикацией прогресса выполнения)
Простое пояснение о том, как сделать внешнюю обработку с фоновым выполнением и индикацией процесса для любой конфигурации на основе БСП 2.3.2. UPDATE 20/09/19: добавлен вариант обработки с индикацией процента выполнения и статусом выполнения для БСП 3.0.
18.05.2016 73950 215 rozer 67
Остатки на каждый день в запросе
Запрос формирует остатки товаров на каждый день в пределах выбранного периода.
26.04.2016 76009 21 arakelyan 25
Еще один способ расчета остатков на каждый день в запросе
Предлагается новый способ расчета остатков на каждый день (час, минуту, секунду) в запросе. Способ не требует предварительного формирования таблицы дат и также подходит для расчета курсов валют, цен номенклатуры и других периодических сведений на каждую дату периода. На больших объемах данных предлагаемый способ может превосходить по быстродействию ранее известные методы из-за линейной (в лучшем случае) зависимости трудоемкости от длины периода.
24.04.2016 40545 55 ildarovich 23
Вывод печатных форм с запросом данных в форму «Печать документов» из подсистемы БСП «Печать».
Все не раз видели, как в типовых конфигурациях, построенных на основе БСП (Библиотека стандартных подсистем), печатные формы, построенные на основе Табличного документа, выводятся в специальную форму «ПечатьДокументов». Эта форма входит в состав подсистемы «Печать» из БСП. При разработке своих печатных форм, иногда необходимо запросить у пользователя дополнительные данные необходимые для печати. Тут встает вопрос, как в этом случае вывести печатную форму в форму «Печать документа». В этой статье я рассмотрю, как реализовать вывод печатной формы в упомянутую форму из подсистемы «Печать», в случае если мы хотим перед выводом печатной формы запросить у пользователя дополнительные данные. Здесь будут рассмотрены два случая: когда реализуется печатная форма с использованием подсистемы «Дополнительные отчеты и обработки» и когда печатная форма добавляется в конфигурацию в режиме конфигуратора, т.е. вносятся изменения в типовую конфигурацию.
29.03.2016 110903 213 lopatin 15
Профессия — 1С
рубрики: Работа с формами | Дата: 10 августа, 2018
Скачать обработку с примерами из статьи: professia1c_html_document.epf
Платформа: 8.3; Тип формы: управляемая.
Сегодня рассмотрим такой элемент форм 1С как Поле HTML документа.
Название его говорит само за себя и предназначено это поле для отображения кода в формате html. Первое, что приходит на ум это конечно же организовать просмотр сайтов. И такая возможность действительно есть. И второе — для тех кто немного знаком с html и css есть возможность самим написать код для отображения в html поле. Учитывая, что у css3 достаточно широкие возможности стилизации, и в том числе присутствует возможность анимации, может получится достаточно живая и красочная картинка. Плюс, как известно, в html можно включать и код на языке java script. И тут уже возможности ограничиваются только вашей фантазией. Рассмотрим на примере оба вышеперечисленных варианта. Для демонстрации создадим внешнюю обработку на управляемых формах.
Просмотр веб страницы через поле HTML документа
Эта возможность реализуется очень просто. В реквизиты формы добавим реквизит Сайт с типом «Строка»: 
Разместим этот реквизит на форме и в свойствах выберем вид — «Поле HTML документа»: 
И конечно же добавим строку для ввода адреса сайта.
Остальное делается практически одной строчкой кода, которую мы вставим в обработчик события ПриИзменении адресной строки сайта:
Теперь опробуем обработку в режиме 1С:Предприятия. Ввожу адрес своего сайта www.professia1c.ru и получаю вот такое сообщение об ошибке: 
Это связано с тем, что по умолчанию поле HTML документа работает в режиме совместимости с древней версией браузера Internet Explolrer. И естественно, что очень многие владельцы сайтов уже не заморачиваются с поддержкой старых версий. Хотя если ввести адрес сайта самой 1С — www.1c.ru, мы увидим, что он успешно отобразится в нашем поле. В сети предлагается несколько разных способов как победить эту ошибку. От редактирования настроек браузера IE, до редактирования реестра. Мне на моей домашней 32-разрядной версии Windows 10 помогло редактирование реестра. Для этого необходимо найти ветку «HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION» и добавить в нее параметр 1Cv8c.exe со значением 11000 в десятичной системе исчисления. 
После этого все встает на свои места и сайт отображается корректно. Понятно, что когда речь идет о крупном предприятии, то отредактировать реестр на десятках и сотнях машин может быть проблематично. Но в каких-то отдельных случаях может выручить.
На самом деле не совсем понятно где это может пригодится, если есть стандартный браузер. Ну с фирмой 1С все понятно — она таким образом рекламу нам показывает каждый раз когда мы 1С:Предприятие запускаем)).
Метатег X-UA-Compatible
Когда речь не идет о просмотре сайтов и мы пишем полностью свой код для поля html документа, то нам нет необходимости редактировать реестр для того чтобы воспользоваться всеми прелестями CSS3 и HTML5. Для этого воспользуемся метатегом X-UA-Compatible. Это специфический метатег предназначенный для браузера Internet Explorer. Он позволяет устанавливать режим совместимости для IE. Если быть точным, то X-UA-Compatible — это значение аттрибута http-equiv, который в свою очередь используется вместе с аттрибутом content. Короче говоря нам необходимо в разделе head нашего html документа прописать вот такую строчку:
которая говорит браузеру Internet Explorer, что он должен работать в режиме совместимости с самой последней его версией. В которой нам конечно же доступны CSS3 и HTML5.
Пишем свой код для поля HTML документа
А теперь создадим свою мини веб страничку и отобразим ее в другом поле HTML документа. По аналогии с предыдущим примером создадим реквизит СтилиCSS и разместим его в отдельной закладке на форме. 
Далее перейдем к написанию кода html. Минимально необходимый код, так сказать заготовка нашей странички выглядит следующим образом:
Внутри тега обычно прописывают различные метатеги, а также мы поместим в него тег в котором пропишем стили css. Как правило стили css размещают в отдельном файле, но поскольку у нас нет такой возможности воспользуемся тегом style. Содержимое же самой страницы размещают внутри тега