1с как вывести html документа

Источник

1С html. Cоздание поля html документа

В статье на примере будут описаны все этапы создания поля html документа. В 1с html поле позволяет представить данные, которые не требуется редактировать, в более эстетичном виде. Разработчик может применить возможности html для создания и настройки формы справочника или бизнес-процесса (как делается в конфигурации Документооборот).

Рассмотрим пример. Разработаем обработку, которая будет представлять элемент справочника Пользователи в виде поля html документа. Для разработки примера я использовал демо БСП 3.1 (управляемое приложение).

Выведем в документ следующие поля справочника:

• Наименование и Комментарий в виде текста;
• ФизическоеЛицо и Подразделение в виде ссылок;
• Фотографию пользователя;
• Контактную информацию в виде таблицы.

Размещение реквизитов на форме

Для начала создадим внешнюю обработку и добавим форму. На форме создадим два реквизита Пользователь (тип СправочникСсылка.Пользователи) и ПредставлениеHTML (тип Строка неограниченной длины). Перетащим реквизиты в дерево элементов. Для элемента ПредставлениеHTML выберем вид Поле HTML документа и отключим отображение заголовка. Должно получится так:

Теперь поработаем над программной частью формы:

• Заполнять html поле данными будем при изменении пользователя. Поэтому создадим для него обработчик события ПриИзменении;
• Работа же с самим полем потребует перехода на сервер, так как нам необходимо выполнять запрос и получать данные из хранилища значений. Поэтому для заполнения данных html создадим функцию ЗаполнитьHTMLПредставление с директивой НаСервереБезКонтекста. В качестве параметра передадим в нее ссылку на пользователя;

В итоге должно получиться следующее:

Получение данных

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

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

Заполнение стилей 1с html поля

Теперь в функции ЗаполнитьHTMLПредставление будем описывать html документ. Начнем с обязательных тегов и . После чего перейдем к заполнению стилей (тег | «;

Рассмотрим заполнение стилей более подробно:

• body — описание стилей тела документа. Так как заголовки у нас отсутствуют, стили будут действовать для всего документа.
  

  Свойство	Описание
  margin-top	Отступ от верхнего края документа
  margin-left	Отступ от левого края документа
  font-family	Шрифт
  font-size	Размер шрифта

• table — описание стилей таблиц.
  

  Свойство	Описание
  border	Описание границы (толщина: 1px, одинарная линия: solid)
  border-collapse	Отображение границы вокруг ячеек таблицы (collapse: одна линия между ячейками)

• td — описание стилей ячеек таблиц. th — описание стилей заголовочных ячеек таблиц.
• a:link — описание стилей ссылок, a:hover — описание стилей ссылок, на которые наведен курсор.
  

  Свойство	Описание
  color	Цвет текста
  text-decoration	Оформление текста подчеркиванием (underline — подчеркнутый текст)

• p — описание стилей абзацев. Margin-top в данном контексте, означает отступ сверху абзаца.
• img — описание стилей изображений. Задавать стили можно и для каждого отдельного изображения. Но если изображение одно (как у меня) или все они однотипные, то удобнее описать их в общем блоке стилей.
  

  Свойство	Описание
  width	Ширина
  height	Высота

Создание тела html документа в 1с 8

После описания стилей займемся формированием тела документа. Для этого используем тег .

Вывод изображения в html

Начнем с вывода фотографии пользователя. В элементе справочника она хранится в реквизите Фотография, в виде хранилища значения. Его мы получили вместе с остальными данными пользователя, при помощи запроса.

Разберем представленный код:

• Хранилище содержит двоичные данные изображения, их необходимо получить. Используем для этого метод Получить(), который распаковывает данные хранилища;
• В html мы можем вывести изображение либо указав ссылку на него, либо использовав его двоичные данные, в кодировке base64. Для этого используем метод Base64Строка;
• После подготовки данных, можно выводить их в документ.
  • Используем тег , применяемый для вывода изображений;
  • Атрибут src указывает адрес выводимого изображения или его данные. У нас это двоичные данные, поэтому в дополнение к ним необходимо использовать префикс data:image/ и указание типа данных base64.

Для того чтобы отделить изображение от следующей информации, используем тег

. Он означает начало нового абзаца. При описании стилей мы указали, что перед началом нового абзаца устанавливается отступ в 10 пикселей.

Вывод текстового реквизита в html

После фотографии выведем основные данные пользователя в следующем формате:

Начнем с имени пользователя:

Разберем представленный код:

• Для того, чтобы имя реквизита не сливалось с его содержанием, выделим его другим цветом. Для этого используем свойство , позволяющее изменять характеристики текста. В нашем случае это цвет color.
• После вывода данных используем тег
  . Он предназначен для перехода на следующую строку.

Вывод ссылки в html

Теперь выведем в документ физлицо пользователя. Так как оно представлено ссылочным типом, оформим его в виде ссылки.

Разберем представленный код:

Далее нам необходимо будет вывести еще один текстовый реквизит и еще один ссылочный. Для того чтобы не дублировать код вынесем добавление реквизита в html в отдельную, универсальную процедуру.

Вывод всех реквизитов будет выглядеть следующим образом:

Вывод таблицы в html 1с

Осталось вывести таблицу контактной информации пользователя. Это делается довольно просто.

• Для вывода таблицы используется тег
  ;
  Для вывода строки таблицы тег
  
  ;
  Тег

  отвечает за вывод ячейки; Для вывода ячейки заголовка используется тег

  . На этом формирование поля html документа в 1с завершено. Осталось только закрыть теги и вернуть сформированный текст. В итоге у нас получается html поле, заполненное следующим образом: Обработка нажатия на ссылку В нашей обработке мы используем не веб ссылки, а на навигационные ссылки 1с. По этой причине система не может корректно обработать их нажатие. Это можно исправить, создав обработчик события ПриНажатии, для Поля HTML документа. В обработчике мы анализируем текст ссылки, на которую произошло нажатие. Если это навигационная ссылка, обрабатываем ее по отдельному алгоритму. Получаем текст и осуществляем переход. Таким образом при нажатии на ссылку, у нас произойдет переход на форму элемента справочника. Скачать обработку формирования html поля можно здесь: СозданиеHTMLПоля Источник Поле HTML документа в управляемом и обычном приложении в 1С 8.3, 8.2 Поле HTML документа – этот элемент позволяет выводить на форму HTML страницы, полученные по URL адресу. ПолеHTMLДокумента в обычном приложении Для примера, во внешней обработке, создаём реквизит формы – ПолеHTMLДокумента1. Для перехода на страницу в интернете, воспользуемся методом “Перейти”. ПолеHTMLДокумента в управляемом приложении Для примера, во внешней обработке, создаём реквизит формы – ПолеHTMLДокумента1 (с типом – строка). На самой форме создаём элемент, указывающий на наш, только что созданный реквизит. Вид его указываем – Поле HTML документа. В управляемом приложении метод “Перейти” недоступен. По этой причине, для перехода на страницу, URL-адрес установим не полю формы, а реквизиту формы. Веб браузер в 1С Давайте создадим простейший веб браузер на 1С, используя, только что полученные знания. Весь прикол в том, что Поле HTML документа – это всеми любимый Internet Explorer, только в режиме совместимости с IE7. Поэтому, в некоторых случаях, вас будет ждать такое уведомление))) Поиск по сайту Okolokompa в Яндекс Дзен Все материалы и продукты на этом сайте выложены в целях ознакомления для зарегистрированных пользователей фирм производителей материала или продукта, или его авторов. Помните, что скачанные материалы или продукты, Вы используете на свой страх и риск. Автор и администрация этого сайта не несет никакой ответственности за использование этих материалов или продуктов третьими лицами. В случае, если вы используете один из перечисленных здесь материалов или продуктов, Вы обязаны официально приобрести его у фирмы производителя или автора. Источник Оцените статью Вам также может понравиться Как вывести цемент с ткани Как отстирать от одежды цемент, удалить затвердевший Можно ли стирать кожзам куртку вручную Как в домашних условиях постирать куртку из кожзама Что отмоет черные полосы с линолеума Все секреты чистки линолеума Казалось бы, линолеум Что отмоет черную краску для волос с рук Секреты и советы, как и чем смыть краску для волос Что будет если не чистить кондиционер после зимы Что будет если не чистить кондиционер после зимы При Чем можно отмыть пожелтевший пластик Доступные и недорогие способы, как убрать желтизну Чем можно отмыть мотор машины Чем отмыть двигатель от масла и грязи в домашних условиях Чем можно отмыть клейкую ленту с пластиковых окон Средства для удаления следов скотча на пластиковом Правообладателям Политика конфиденциальности Контакты