Сохранить картинку в html 1с

Обновлено: 06.01.2025

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

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

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

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

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

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

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

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

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

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

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

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

Теперь в функции ЗаполнитьHTMLПредставление будем описывать html документ. Начнем с обязательных тегов <html> и <head>. После чего перейдем к заполнению стилей (тег <style>), которые будут применяться во всем документе, а также в отдельных его блоках.

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

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

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

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

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

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

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

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

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

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

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

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

Разберем представленный код:
- Для создания ссылок используется тег <a>. Его атрибут href задает адрес ссылки. Для удобства работы создадим шаблон для вывода навигационной ссылки на физлицо. В параметр %1 будем выводить ссылку, а в параметр %2 текст ссылки;
- Для получения навигационной ссылки используем метод ПолучитьНавигационнуюСсылку(<Ссылка>);
- Заполним параметры шаблона, используя строковую функцию СтрШаблон;
Далее нам необходимо будет вывести еще один текстовый реквизит и еще один ссылочный. Для того чтобы не дублировать код вынесем добавление реквизита в html в отдельную, универсальную процедуру.

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

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

Осталось вывести таблицу контактной информации пользователя. Это делается довольно просто.
- Для вывода таблицы используется тег <table>;
- Для вывода строки таблицы тег <tr>;
- Тег <td> отвечает за вывод ячейки;
- Для вывода ячейки заголовка используется тег <th>.
На этом формирование поля html документа в 1с завершено. Осталось только закрыть теги и вернуть сформированный текст.

В итоге у нас получается html поле, заполненное следующим образом:

Обработка нажатия на ссылку

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

Иногда необходимо сохранить картинку напрямую в HTML, а не ссылку на картинку.
Для этого воспользуемся Base64 (метод кодирования информации в 64-разрядный код).
На практике можно передавать картинки номенклатуры в обмене xml-файлами между базами данных.

1. Выбираем файл картинки, которую нужно перевести в HTML.

2. Жмем кнопку ImageToHTML. В том же каталоге, где находится картинка, будет создан файл HTML.

3. Добавляем "_2" к имени файла картинки (S_2.jpg)(иначе будет перезаписан имеющийся файл). В каталоге будет создан новый файл S_2.jpg.

Специальные предложения

Воистину, публикация ради двух строчек. Да ещё и чтоб качали)))

а всего-то:
СтрокаКартинки=Base64Строка(МояКартинка.ПолучитьДвоичныеДанные());
МояКартинка=Новый Картинка(Base64Значение(СтрокаКартинки));
(1) Yashazz,
в этих строчках ты на выходе не получишь рабочий HTML. (3) ben_art,
Чтобы изменить имя файла-картинки, можно и не добавлять тогда перезапишется основная картинка.
А мне нравится, держи + чувак!

П.С, нужно быть добрее к людям :)

Просмотры 13916

Загрузки 17

Рейтинг 6

Создание 15.05.14 11:00

Обновление 30.09.14 13:34

№ Публикации 278227

Кому Для всех

Конфигурация Конфигурации 1cv8

Операционная система Windows

Вид учета Не имеет значения

Доступ к файлу Абонемент ($m)

Код открыт Не указано
Учебно-методический комплекс является уникальной разработкой с использованием «лучших практик», наработанных автором в проектах на предприятиях разных масштабов, отраслей и сфер деятельности Учебно-методический комплекс «Управление закупками: инструменты работы с требованиями»
См. также

Конвертация любых адресов, написанных в свободной форме, к ФИАС Промо

Допустим у нас есть база с адресами клиентов, и написаны они могут быть как душе угодно. С опечатками, без индексов, без разделителей, в совершенно любом формате. Вот было бы здорово иметь функцию, которая одним нажатием кнопки преобразует любую белиберду к строгому представлению адреса по ФИАС? Восстановит индекс, исправит опечатки и вернёт на 100% валидный адрес. Для всех, кто мечтательно сказал "ДА!", выкладываю данную обработку.

2 стартмани

30.06.2020 7695 68 XilDen 15

Управление платформенными обработками (расширение для типовых)

Расширение использует недокументированную возможность для управления платформенными обработками. Например, чтобы подменить "Активные пользователи" или доработать "Конструктор запросов".

1 стартмани

07.10.2021 3385 5 SeiOkami 23

Работа с картами в 1С на примере бесплатной библиотеки Leaflet

Разработка функционала отображения и выбора пунктов доставки на карте прямо в 1С с помощью бесплатной библиотеки Leaflet. Тестирование производилось на платформе 8.3.15.1534 на тонком клиенте.

1 стартмани

31.03.2021 10501 31 Parsec1C 11

Универсальная обработка переноса данных из основной конфигурации в расширение

Обработка предназначена для разработчиков, для тех случаев, когда ранее дописанный функционал, перенесен в расширение и появляется необходимость перенести данные из объектов основной конфигурации в объекты расширения. Перенос осуществляется настройкой соответствия объектов основной конфигурации объектам расширения.

5 стартмани

05.10.2020 10429 65 biz-intel 71

Удаление и/или копирование сохраненных в 1С настроек (например настроек печати табличных форм) Промо

Иногда нужно удалить сохраненную в 1С "покореженную" настройку или скопировать "удачную" другому пользователю.

1 стартмани

01.09.2012 66890 1378 AnryMc 46

Улучшенная обработка универсального обмена данными в формате XML (УФ)

Улучшенная обработка "Универсальный обмен данными" с полноценными возможностями СКД для выборки данных (не только для отборов).

1 стартмани

23.06.2020 12978 136 Lem0n 1

Панель команд текущего объекта (документа, справочника и т.д.) со следующим возможностями: Редактор реквизитов, таблиц и движений текущего объекта, Анализ прав доступа к текущему объекту, Поиск ссылок на объект с отборами, Сторно движений документа, Выгрузка/загрузка текущего объекта между базами. Реализована всплывающей панелью в форме объекта. Подключается как расширение конфигурации (*.cfe) либо отдельными обработками.

1 стартмани

01.05.2020 15308 112 sapervodichka 1

Работа с файлами (обычная и управляемая форма)

Нужно загрузить файл с клиента на сервер или же, наоборот, файл загрузить с сервера на клиент, а впридачу все это на web-клиенте, да еще и асинхронно? Нет ничего проще, читай далее, как это сделать!

1 стартмани

10.06.2019 41659 222 Xershi 77

Групповая корректировка записей регистров (Управляемое приложение) v 2.1 Промо

Обработка предназначена для групповой корректировки записей регистров Накопления, Сведений и Бухгалтерии. Разработана специально для Управляемого приложения.

3 стартмани

06.09.2013 68810 321 kser87 59

Электронная таблица средствами 1С (Версия 2.0)

Функционал электронной таблицы для программ на платформе 1С реализован на основе табличных документов. Функционал реализован в виде обработки. Большую часть формы обработки занимают листы (закладки) с табличными документами, которые выполняет роль электронной таблицы. Листы могут быть добавлены, удалены или переименованы. Ограничение по количеству листов определяется возможностью платформы. В формулах электронной таблицы можно использовать любые языковые конструкции, процедуры и функции 1С, ссылки на другие ячейки электронной таблицы расположенные в том числе и на других листах. Допустимо обращаться к ячейкам электронной таблицы по имени именованной области. В случае использования в формулах электронной таблицы данных из самой таблицы пересчет зависимых ячеек с формулами производится автоматически. Электронную таблицу можно сохранить в файл.

1 стартмани

23.04.2019 23818 78 user706545_kseg1971 40

Удобная консоль регламентных и фоновых заданий

1 стартмани

06.02.2019 22211 211 Alxby 20

Редактор объектов информационной базы 8.3

Универсальная внешняя обработка для редактирования реквизитов и табличных частей объектов информационной базы, редактирование движений документов. Доступ ко всем реквизитам объектов, есть возможность выгрузки и загрузки данных (объекты и движения документов) через XML. Платформа 8.3, управляемые формы. Версия 1.1.0.57 от 09.10.2021

2 стартмани

23.01.2019 43329 486 ROL32 50

Установка предопределенных элементов: просмотр, исправление и поиск ошибок (задвоенных и отсутствующих) Промо

Простая обработка для просмотра и установки значений предопределенных элементов. Позволяет заменить значение предопределенного элемента с одного элемента справочника на другой, удалить предопределенный элемент (снять пометку предопределенности), установить пометку переопределенного элемента. Проверяет предопределенные данные на наличие задвоений и отсутствующих. Работает со справочниками, планами счетов, планами видов характеристик, планами видов расчетов.
Keyword1109 --> Keyword1109

Просмотр профиля Batchir --> Batchir

Просмотр профиля
В отладчике на строке ИзображениеНоменклатуры = Новый Картинка(ПозицияНоменклатуры.coverImage);
что показывает команда ТипЗнч(ПозицияНоменклатуры.coverImage)?

Расширение картинок одинаковое?
Как-то сталкивался с тем что сначала нужно было конвертить программно получаемую картинку с помощью сторонних средств перед тем как обрабатывать в 1С, по другому отказывалось работать.
pablo --> pablo

Просмотр профиля
И еще, опять же в отладчике, но после строки

Чему будет равен Картинка.Формат()?
Правильно поставленный вопрос содержит до 90% ответа. Keyword1109 --> Keyword1109

Просмотр профиля В отладчике на строке ИзображениеНоменклатуры = Новый Картинка(ПозицияНоменклатуры.coverImage);
что показывает команда ТипЗнч(ПозицияНоменклатуры.coverImage)?

Batchir --> Batchir

Просмотр профиля
А попробуйте теперь расширение с учетом регистра:
Keyword1109 --> Keyword1109

Просмотр профиля pablo --> pablo

Просмотр профиля Правильно поставленный вопрос содержит до 90% ответа. Batchir --> Batchir

Просмотр профиля Keyword1109 --> Keyword1109

Просмотр профиля
Не в формате изображения ошибка. Я с помощью Картинка.Преобразовать(<ФорматКартинки>) и в png преобразовал и сохранял как png, но ничего не срабатывает.

Может есть какой-нибудь еще способ отобразить изображение из двоичных данных в поле html-документа?
<img src="data:image/png;base64,iVBOR. Не предлагать.
Batchir --> Batchir

Просмотр профиля
У меня к сожалению нет тех двоичных данных что у Вас, но провел следующий эксперимент:

т.е.
1. Сохранил на диск картинку из спр. номенклатуры
2. Преобразовал её в двоичные данные
3. Сохранил эти двоичные данные как картинку с другим именем

В результате в каталоге временных файлов находятся обе картинки.
Поэтому возможно актуально:
Как-то сталкивался с тем что сначала нужно было конвертить программно получаемую картинку с помощью сторонних средств перед тем как обрабатывать в 1С, по другому отказывалось работать.
а конвертил с помощью компоненты GFLAx, ею же и приводил к стандартному размеру, т.к. картинки бывают разными
Keyword1109 --> Keyword1109

Просмотр профиля Keyword1109 --> Keyword1109

Просмотр профиля Batchir --> Batchir

Просмотр профиля
В отладчике на строке ИзображениеНоменклатуры = Новый Картинка(ПозицияНоменклатуры.coverImage);
что показывает команда ТипЗнч(ПозицияНоменклатуры.coverImage)?

Расширение картинок одинаковое?
Как-то сталкивался с тем что сначала нужно было конвертить программно получаемую картинку с помощью сторонних средств перед тем как обрабатывать в 1С, по другому отказывалось работать.
pablo --> pablo

Просмотр профиля
И еще, опять же в отладчике, но после строки

Чему будет равен Картинка.Формат()?
Правильно поставленный вопрос содержит до 90% ответа. Keyword1109 --> Keyword1109

Просмотр профиля В отладчике на строке ИзображениеНоменклатуры = Новый Картинка(ПозицияНоменклатуры.coverImage);
что показывает команда ТипЗнч(ПозицияНоменклатуры.coverImage)?

Batchir --> Batchir

Просмотр профиля
А попробуйте теперь расширение с учетом регистра:
Keyword1109 --> Keyword1109

Просмотр профиля pablo --> pablo

Просмотр профиля Правильно поставленный вопрос содержит до 90% ответа. Batchir --> Batchir

Просмотр профиля Keyword1109 --> Keyword1109

Просмотр профиля
Не в формате изображения ошибка. Я с помощью Картинка.Преобразовать(<ФорматКартинки>) и в png преобразовал и сохранял как png, но ничего не срабатывает.

Может есть какой-нибудь еще способ отобразить изображение из двоичных данных в поле html-документа?
<img src="data:image/png;base64,iVBOR. Не предлагать.
Batchir --> Batchir

Просмотр профиля
У меня к сожалению нет тех двоичных данных что у Вас, но провел следующий эксперимент:

т.е.
1. Сохранил на диск картинку из спр. номенклатуры
2. Преобразовал её в двоичные данные
3. Сохранил эти двоичные данные как картинку с другим именем

В результате в каталоге временных файлов находятся обе картинки.
Поэтому возможно актуально:
Как-то сталкивался с тем что сначала нужно было конвертить программно получаемую картинку с помощью сторонних средств перед тем как обрабатывать в 1С, по другому отказывалось работать.
а конвертил с помощью компоненты GFLAx, ею же и приводил к стандартному размеру, т.к. картинки бывают разными
Keyword1109 --> Keyword1109

Просмотр профиля

Читайте также: