Предварительный просмотр PDF с помощью PDF.js на WebKit

25.09.20

Один из вариантов отображения pdf файла в поле формы вида "ПолеHTMLДокумента".

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование		По подписке [?]	Купить один файл
ППФ .cfe 4,41Mb ver:1.0.0.0 60	60	Скачать (1 SM)	Купить за 1 850 руб.

В данной статье рассматриваются механизм формирования html страницы для отображения pdf файлов с помощью pdf.js viewer.

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

file:///C:/pdfjs/web/viewer.html?file=file:///C:\Temp\preview.pdf

Первая часть - это путь к файлу viewer.html из каталога pdf.js.

file:///C:/pdfjs/web/viewer.html

Вторая часть - ничто иное как путь к файлу pdf,

file:///C:\Temp\preview.pdf

который является параметром для страницы viewer.html. Сам параметр:

?file=

Путь к файлу в сетевом каталоге выглядит так:

file:////Temp/preview.pdf

Размещение каталога pdf.js возможно в сетевом каталоге и в локальном каталоге пользователя.

Ниже представлено расширение, построенное на основе БСП версии 3.1.3.276.

Что в расширении:

1. Механизм установки компоненты предпросмотра (разворачивание pdf.js в локальном каталоге)

2. Отображения файлов предпросмотра (pdf, jpg, txt, png ... можно расширить)

3. Фоновое формирование страницы предпросмотра при объёмном файле и сетевое хранение больших файлов предпросмотра

Механизм реализован для типовой обработки "РаботыСФайлами".

Тестировалось на версии 8.3.16.1148. Для отображения pdf использовалась pdf.js Prebuilt (ES5-compatible) версий 2.5.207 и 2.3.200.

Ссылки на исходники:

https://mozilla.github.io/pdf.js/ - ссылка на проект pdf.js

https://github.com/mozilla/pdf.js/releases/download/v2.5.207/pdfjs-2.5.207-es5-dist.zip - прямая ссылка на версию 2.5.207

pdf.js webkit pdf предпросмотр

+20 –

См. также

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Системный администратор Программист Платформа 1С v8.3 Управляемые формы 1C:Бухгалтерия Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016 55640 17 23

Универсальный редактор картинок 1С, хранимых в базе, с возможностью рисования

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы 1C:Бухгалтерия Платные (руб)

Универсальный редактор картинок 1С предназначен для обработки изображений в режиме «Предприятие», с возможностью рисовать на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015 63954 45 60

Управление дашбордами

Работа с интерфейсом Программист Платформа 1С v8.3 1C:Бухгалтерия 1С:ERP Управление предприятием 2 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020 19949 28 6

Дизайн Гайд для создания форм на 1С. Когда и как использовать различные элементы, примеры и антипримеры по использованию

Работа с интерфейсом Программист Стажер Платформа 1С v8.3 Бесплатно (free)

Это инструкция по дизайну форм в среде 1С. Гайд охватывает рекомендации и стандарты для оптимизации пользовательского интерфейса. В гайде содержатся указания по использованию элементов интерфейса, включая как основные, так и продвинутые аспекты. Предоставляются также примеры и антипримеры для наглядного понимания принципов дизайна

20.08.2024 23563 mrXoxot 44

130

Прогресс-бар в поле динамического списка

Работа с интерфейсом Программист Платформа 1С v8.3 Бесплатно (free)

Пример простого и симпатичного прогресс-бара в динамическом списке, без картинок, используя редактирование запроса.

27.05.2024 12080 smielka 37

105

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023 18376 1228 elcoan 53

125

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Программист Платформа 1С v8.3 1C:Бухгалтерия Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

3 стартмани

10.04.2023 12900 167 acces969 31

126

Модель состояния для MVC

Работа с интерфейсом Программист Платформа 1С v8.3 1C:Бухгалтерия Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022 8021 kalyaka 6

Комментарии

Подписаться на ответы Инфостарт бот

Свернуть все

1. malikov_pro 1328 25.09.20 09:41 Сейчас в теме

Использовать фиксированный каталог не лучшая идея.

Варианты
1. https://infostart.ru/public/1292433/,
2. либо скомпоновать в один файл из макетов.
3. использовать временный каталог на стороне клиента

Идея предпросмотра из списка файлов хороша.

2. samvani 36 25.09.20 11:00 Сейчас в теме

(1)
1. Хорошая идея, надо проработать вопрос http сервиса. Но возникает проблема расходования лицензий при обращении к нему.
2. Можно рассказать подробнее?
3. В расширении он и используется, в статье приведены условные пути, чтобы показать как должна формироваться строка для html страницы предпросмотра. Из-за того что используется webkit пришлось поиграться с путями к pdf.js и к самому файлу

5. 7OH 70 08.11.20 02:43 Сейчас в теме

(2) а не поделитесь ?
Пробовал - не взлетает.
Через браузер отлично показывает pdf прямо из временного хранилища по "прямому" пути "http://адрес_базы/e1c/tempstorage/....", а вот при работе через сервер или файл - увы и ах.

6. samvani 36 08.11.20 20:43 Сейчас в теме

(5) в контексте сервера если сформировать, то на клиенте pdf не отобразиться. Принцип работы в том, чтобы создавать pdf на клиенте и на клиенте, используя локальные пути к файлу и pdf.js, отображать. Я правильно понял вопрос?

7. 7OH 70 08.11.20 20:54 Сейчас в теме

(6) у меня в браузере через tempstorage показывает на клиенте, сформированное на сервере.
Вопрос был больше по пункту 3.
Я поклал на диск с, но даже в обычном браузере указанная в примере строка не работает.

8. 7OH 70 09.11.20 23:57 Сейчас в теме

(6) разобрался. работает, если PDF файл лежит в пределах основной папки скрипта.
Можно покласть отдельно pdfjs на ИИС или АПАЧ и 1С-кой временные файлы туда складывать, когда надо.
Или "хранить файлы в томах на диске" в бсп и каталог хранения сделать внутри и подсовывать относительные пути.
В общем - взлетело.
Остальное уже варианты.

9. samvani 36 10.11.20 16:27 Сейчас в теме

(5)

Через браузер отлично показывает pdf прямо из временного хранилища по "прямому" пути "http://адрес_базы/e1c/tempstorage/...."

Во временное хранилище помещаются двоичные данные файла, как Вы просматриваете pdf по прямому пути? как выглядит исходный код html страницы?

3. malikov_pro 1328 25.09.20 11:27 Сейчас в теме

(2)
1. Лицензии на HTTP сервис не контролируются, можно организовать через сервисного пользователя https://infostart.ru/1c/articles/1258813/
Лучше статику на уровне локального HTTP сервера положить.
2. https://webo.in/articles/habrahabr/29-all-about-data-url-images/, возможно с PDF сработает

4. samvani 36 25.09.20 13:36 Сейчас в теме

(3) спасибо. Время появится - сделаю

10. milanse 40 02.02.21 16:25 Сейчас в теме

В просмотре pdf при нажатии на кнопку полного экрана открывается на полный экран, при закрытии крашится 1С целиком. Платформа 8.3.17.1851.
Может кто сталкивался / знает как лечить ?

11. samvani 36 02.02.21 19:39 Сейчас в теме

(10) есть такая проблема. Как лечить не знаю. Возможно, есть решение в ветке pdf.js на github.

12. lisrws 145 08.04.21 13:24 Сейчас в теме

Есть ряд существенных недостатков:
1) Не печатаются спецсимволы, например "№"
2) Нет предварительного просмотра
3) Картинка размером на А5 распечаталась на первой странице, а потом принтер затянул еще и второй лист, но ничего на нем не распечатал. видимо криво границы печати отрабатывают

13. samvani 36 08.04.21 18:37 Сейчас в теме

(12)Для начала я бы уточнил версию платформы 1с. Если текущая версия не на движке webkit, тогда могут быть проблемы.
1. Никто не мешает печатать из 1с. Если Вы печатали из pdf js тогда Вам прямой путь на github и к интеграторам движка webkit в 1с.
2. Что имеется в виду?
3. Что и откуда Вы печатали?

14. lisrws 145 08.04.21 18:39 Сейчас в теме

версия 8.3.15.1778

15. samvani 36 08.04.21 22:19 Сейчас в теме

(14)должно работать. Предпросмотр по крайней мере

16. hitalik 07.01.22 21:22 Сейчас в теме

1Сники вам говорили что вы извращенцы 🙂, зачем что то городить?
Webkit на борту имеет все что нужно.

Удичи вам прекратите изобретать велосипед

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
        
    СтрокаPDFФайлаBase64 = ПолучитьBase64СтрокуИзДвоичныхДанных(ПолучитьОбщийМакет("PDF"));
    Реквизит1 = "<ht ml><head>
    |<body style='zoom: 1;'> 
    |<ifr ame id='framefile' frameborder='0' scrolling='auto' height='700px' width='100%'></iframe>
    |<sc ript>
    |document.addEventListener('DOMContentLoaded', () => {
    |   var blob = new Blob([Uint8Array.from(atob(`"+СтрокаPDFФайлаBase64+"`), c => c.charCodeAt(0))], {type: 'application/pdf'})
    |   var url = URL.createObjectURL(blob)
    |    var divfreime = document.getElementById('framefile')
    |    divfreime.src = url
    |  })
    |</sc ript></body></html>";     
     
КонецПроцедуры

Показать

Реквизит1 это html макет

17. 7OH 70 08.01.22 23:04 Сейчас в теме

(16)
Ничего не произошло - что-то подумало себе и ничего.
Платформа 20-я, клиент сервер.
Сохраненный HTML не показал ни эдж, ни лиса (чисто для проверки).
Вы бы хоть с таким сарказмом то - обработку рабочую выложили, которая покажет и многостраничный документ с масштабированием и документ с подписью внутри.

26. Itilive.ru 43 22.06.23 16:49 Сейчас в теме

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

22. samvani 36 10.01.22 11:56 Сейчас в теме

(16) 1Сники сами те еще извращенцы. Посмотрите как реализован предпросмотр pdf в ДО 3.0 - увы и ах...

18. hitalik 09.01.22 00:00 Сейчас в теме

Вы правы есть тонкости, найду время обязательно в деталях опишу все тонкости, но если Вам для тестов установите Pdf-XChange Viewer. на клиент и WEBKIT подтянет с него activx.
Думаю результат Вас приятно удивит.

Есть иной способ без установки чего либо, но настроен более глубоко задеть эту тему, прилюдно разобрать исходники Webkit чтоб было наглядно почему все именно так работает.
С новым годом!

19. samvani 36 10.01.22 11:30 Сейчас в теме

(16) Боремся за универсальность применения На клинте под windows открывается adobe reader. А что будет если не установлен adobe reader, Что будет на клиенте под linux?

20. 7OH 70 10.01.22 11:43 Сейчас в теме

(19) а что ещё будет если это в браузере запущено ?

21. samvani 36 10.01.22 11:52 Сейчас в теме

(20) на этот случай тоже есть решение. в pdf.js можно формировать pdf из строки base64. Можно доработать формирование в веб-клиенте https://mozilla.github.io/pdf.js/examples/

23. hitalik 10.01.22 12:18 Сейчас в теме

(21)
Тут не факт что Adobe, в тот момент когда формируется blob, webkit дёргает с реестра все axtivx с подписью type: 'application/pdf', сортирует их в алфавитном порядке, далее если не один не установлен по умолчанию дёргает первый,

На вопрос что будет на linux и pdf.Js
из коробки у 1С webkit не поддерживает плагины, но хром и операра на основе этой библиотеки внутри себя в виде плагина с завода содержит удобную и локаничную гляделу, мысль написать расширение для webkit чтоб подтянуть уже готовое решение, и в итоге логика будет следующая, если мы не нашли axtivx то дергаем плагин, я правда не уверен что там с авторскими правами)

Я к чему колеги за нас уже давно всё сделали, я ужаснулся от предложенных реализаций на форуме, возможно потому что я не селен в 1С, моя стихия семейство Си и там подобные подходы не допустимы и считаются кастылем.

понимаю что разработчиков, компания 1С в этом плане бросила,
И вы пытаетесь как то выйти из этого положения, пытаюсь подсказать что
просто нужно допилить сам webkit.

24. chng 16.11.22 09:58 Сейчас в теме

(19) На линуксе крашит:
Ошибка при вызове метода контекста (Записать)
{ППФ ОбщийМодуль.ППФ_ПредварительныйПросмотрФайлаКлиент.Модуль(98)}:ДвоичныеДанныеФайла.Записать(УникальныйПутьФайла);
{ППФ ОбщийМодуль.ППФ_ПредварительныйПросмотрФайлаКлиент.Модуль(148)}:СформироватьПредпросмотр(Форма, СтруктураданныхДляПредпросмотра);
{ППФ Обработка.РаботаСФайлами.Форма.ПрисоединенныеФайлы.Форма(59)}:ЭтаФорма, ППФ_ПолучитьДанныеДляПредпросмотраФайла(ЭтаФорма.ППФ_ТекущийФайлПредпросмотра, УникальныйИдентификатор));
{ППФ ОбщийМодуль.ППФ_ПредварительныйПросмотрФайлаКлиент.Модуль(59)}:Форма.ППФ_ОбновитьПредпросмотрВФорме();
{ППФ Обработка.РаботаСФайлами.Форма.ПрисоединенныеФайлы.Форма(40)}:ППФ_ПредварительныйПросмотрФайлаКлиент.ОтобразитьФайл(ЭтаФорма);
{ОбщаяКоманда.ПрисоединенныеФайлыБП.МодульКоманды(43)}:ОткрытьФорму("Обработка.РаботаСФайлами.Форма.ПрисоединенныеФайлы",

по причине:
Ошибка доступа к файлу '/tmp/1C/Preview'. 13(0x0000000D): Permission denied

25. samvani 36 17.11.22 11:12 Сейчас в теме

(24)

Permission denied

Расширение пытается записать файл в каталог /tmp/1C/Preview. У пользователя не хватает прав либо на создание каталога, либо на создание файла в этом каталоге. Все это выполняется на машине пользователя

27. user592447_emshanov.y 02.08.23 15:45 Сейчас в теме

Коллеги, добрый день.
Скажите пожалуйста, кто нибудь делал позиционирование открываемого pdf на заранее заданном фрагменте текста?

Кейс 1. Имеем многостраничный pdf, нужно в нем найти подстроку и открыть файл на просмотр на нужной странице. В идеале - выделить найденную подстроку.

Кейс 2. Имеем многостраничный pdf, и набор строк. Пользователь выделяет первую строку - ищем ее в pdf, показываем пользователю страницу с найденным фрагментом. Пользователь выделяет вторую строку - ищем ее в pdf, показываем пользователю страницу с найденным фрагментом. И так далее.

По идее это можно сделать через pdf.js, но не понятно как передать параметр и вызвать метод поиска. Может у кого-то есть примеры?

28. Dimel 09.08.23 13:47 Сейчас в теме

(27) У объекта PDFViewerApplication есть компонента поиска. Вызов с JS делается так:

PDFViewerApplication.findController.executeCommand('find', {
caseSensitive: false,
findPrevious: undefined,
highlightAll: true,
phraseSearch: true,
query: "Форма"
});

Но так как мы не можем передавать объект в JS надо писать простенькую функцию, в которую можно передать параметры и вставить её в файл Viewer.js (где то между других функций типа "open: function open(file, args)"):

FindText: function FindText(StrSearch, ParCaseSensitive, ParFindPrevious, ParHighlightAll, ParEntireWord, ParPhraseSearch) {

this.findController.executeCommand('find', {
caseSensitive: ParCaseSensitive,
findPrevious: ParFindPrevious,
highlightAll: ParHighlightAll,
entireWord: ParEntireWord,
phraseSearch: ParPhraseSearch,
query: StrSearch
});
},

Ну и соответственно по событию её вызвать с 1С:

ОбъектHTML = Элементы.HTML.Document.DefaultView;

//Команды которые поддерживаются findController
//"find",
//"findagain",
//"findhighlightallchange" - При изменении подсветки
//"findcasesensitivitychange" - При изменении чувствительности к регистру

//Настройки поиска
СУчетомРегистра = Ложь;
НайтиПредыдущий = Неопределено;
ПодсветитьВсе = Истина;
СловаЦеликом = Истина;
ПоискФраз = Истина;

ОбъектHTML.PDFViewerApplication.FindText(СтрокаПоиска, СУчетомРегистра, НайтиПредыдущий, ПодсветитьВсе, СловаЦеликом, ПоискФраз);

Ну и такую обертку можно написать для всех 4-х функций PDFfindController .
Удачи в разработке.