Изображения в справке 1С

Программирование - Практика программирования

Картинка Изображение Справка Помощь

24
Иногда полезно сделать скриншот и вставить его в справку. К счастью, картинку можно преобразовать в строку base64 и вставить в тег img. Выглядит это так: img src="data:image/jpg;base64,-=СТрокаИзображения=-" /img. Для редактирования можно использовать объект "форматированный документ" (реквизит формы). Данный объект может выгрузить свое содержимое в формате html и все картинки в структуру. Далее останется только преобразовать картинки в строку base64 и заменить исходные теги img.

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

&НаКлиенте
Процедура ВыполнитьПреобразованиеФорматированногоДокументаВГиппертекст()
	//в данной структуре буду картинки
	КолекцияСтруктурКартинок = Новый Структура;
	//будущий html
	Текстовка = "";
	//Извлекаем из форматированного документа гиппертекст и картинки
	Док.ПолучитьHTML(Текстовка, КолекцияСтруктурКартинок);
	//обход коллекции картинок
	Для Каждого КлючЗначение Из КолекцияСтруктурКартинок Цикл
		//преобразуем объект "картинка" в строковое представление base64
		Стрим = Новый ПотокВПамяти;
		КлючЗначение.Значение.Записать(Стрим);
		Бинарник = Стрим.ЗакрытьИПолучитьДвоичныеДанные();
		ДанныеСтрокой = Base64Строка(Бинарник);
		//заменяем ссылку на файл картинки, картинкой в строковом представлении
		Текстовка = СтрЗаменить(Текстовка, "src=""" + КлючЗначение.Ключ + """", "src=""data:image/jpg;base64," + ДанныеСтрокой + """");
	КонецЦикла;
	Объект.РезультатHTML = Текстовка;
КонецПроцедуры

Весь код прокомментирован и трудностей не должно возникнуть даже у новичков. Сформированный html можно скопировать в буфер (средствами IE) и вставить в справку.

Делаем скриншот:

Открываем обработку из этой статьи пишем текст и вставляем картинку:

Преобразуем в формат html, копируем результат преобразования и открываем редактор справки :

Вставляем данные:

И получаем результат:

Обработка, приложенная к статье в формате управляемой формы, версия платформы 8.3.13, но будет работать и с более старыми. В дополнение могу также упомянуть, что таким образом можно даже свой шрифт подгрузить в тело html страницы (css). СSS очень придирчив к переносам строк, так что чтобы все завелось, строка base64 должна быть без переносов.

24

Скачать файлы

Наименование Файл Версия Размер
Изображения в справке 1С:
.epf 103,24Kb
13.11.18
2
.epf 103,24Kb 2 Скачать

См. также

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

Комментарии
Избранное Подписка Сортировка: Древо
1. azhilichev 148 13.11.18 17:17 Сейчас в теме
Мне кажется, что вставлять скриншоты непосредственно в справку без преобразований менее трудозатратно. Или ошибаюсь?
5. Rustig 1031 14.11.18 09:15 Сейчас в теме
(1) Получилось! Эврика!
попробовал через конфигуратор - в режиме редактирования - Меню Элементы - Картинка - вставляю любую картинку - и маленькую и большую. Все идеально. Тестировал на платформе 1С:Предприятие 8.3 (8.3.13.1513)
Прикрепленные файлы:
2. makc2k 87 13.11.18 17:50 Сейчас в теме
Суть данного метода в формировании монолитного файла html в который инкапсулированы изображения.
8. azhilichev 148 14.11.18 14:05 Сейчас в теме
(2) Монолитность может раскрошиться о кроссплатформенность :)
3. PerlAmutor 33 13.11.18 20:38 Сейчас в теме
Стоит отметить одну неприятную особенность связанную с IE версии ниже 9 и base64. Размер строки base64 не должен превышать 32кб, в противном случае, картинка выводится обрезанной. Как будто не прогруженной полностью. Столкнулись уже с этим при выводе новостей для пользователей в ERP. В итоге вылилось в то, что до кого-то приказ по предприятию донесся, а кто-то ничего не увидел, пожал плечами и забыл.
triviumfan; +1 Ответить
4. Hans 101 14.11.18 08:49 Сейчас в теме
почему в справке 1с нет даже скриншотов в 21 веке?
TreeDogNight; zqzq; Rustig; +3 Ответить
6. Доня 273 14.11.18 10:40 Сейчас в теме
Автору
А можно показать - как картинка выглядит в справке наглядно
12. Rustig 1031 15.11.18 18:52 Сейчас в теме
(6) последняя картинка в публикации - как раз такой пример, Доня
я сам не сразу понял, но надо приглядеться....
7. feva 131 14.11.18 12:51 Сейчас в теме
Занятная статья! Спасибо!
9. Поручик 4169 14.11.18 15:44 Сейчас в теме
ПотокВПамяти появился в 8.3.9. То есть на более старых версиях работать не будет
10. SlavaKron 14.11.18 16:03 Сейчас в теме
(9) Поток там вообще не нужен. У картинки есть собственный метод ПолучитьДвоичныеДанные()
11. Поручик 4169 14.11.18 16:29 Сейчас в теме
(10) Автор решил повыпендриваться.
Оставьте свое сообщение