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

25.09.20

Разработка - Работа с интерфейсом

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

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

Наименование Файл Версия Размер
ППФ
.cfe 4,41Mb
55
.cfe 1.0.0.0 4,41Mb 55 Скачать

В данной статье рассматриваются механизм формирования 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 предпросмотр

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

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

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

6000 руб.

16.01.2015    61797    43    59    

80

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

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

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

5000 руб.

14.01.2016    54403    16    21    

42

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

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

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

2400 руб.

29.06.2020    16698    21    4    

35

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

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

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

27.12.2023    10738    750    elcoan    45    

106

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

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

2 стартмани

10.04.2023    9615    151    acces969    31    

118

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

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

1 стартмани

05.07.2022    3666    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12082    1    5    

10
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. malikov_pro 1292 25.09.20 09:41 Сейчас в теме
Использовать фиксированный каталог не лучшая идея.

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

Идея предпросмотра из списка файлов хороша.
2. samvani 35 25.09.20 11:00 Сейчас в теме
(1)
1. Хорошая идея, надо проработать вопрос http сервиса. Но возникает проблема расходования лицензий при обращении к нему.
2. Можно рассказать подробнее?
3. В расширении он и используется, в статье приведены условные пути, чтобы показать как должна формироваться строка для html страницы предпросмотра. Из-за того что используется webkit пришлось поиграться с путями к pdf.js и к самому файлу
5. 7OH 69 08.11.20 02:43 Сейчас в теме
(2) а не поделитесь ?
Пробовал - не взлетает.
Через браузер отлично показывает pdf прямо из временного хранилища по "прямому" пути "http://адрес_базы/e1c/tempstorage/....", а вот при работе через сервер или файл - увы и ах.
6. samvani 35 08.11.20 20:43 Сейчас в теме
(5) в контексте сервера если сформировать, то на клиенте pdf не отобразиться. Принцип работы в том, чтобы создавать pdf на клиенте и на клиенте, используя локальные пути к файлу и pdf.js, отображать. Я правильно понял вопрос?
7. 7OH 69 08.11.20 20:54 Сейчас в теме
(6) у меня в браузере через tempstorage показывает на клиенте, сформированное на сервере.
Вопрос был больше по пункту 3.
Я поклал на диск с, но даже в обычном браузере указанная в примере строка не работает.
8. 7OH 69 09.11.20 23:57 Сейчас в теме
(6) разобрался. работает, если PDF файл лежит в пределах основной папки скрипта.
Можно покласть отдельно pdfjs на ИИС или АПАЧ и 1С-кой временные файлы туда складывать, когда надо.
Или "хранить файлы в томах на диске" в бсп и каталог хранения сделать внутри и подсовывать относительные пути.
В общем - взлетело.
Остальное уже варианты.
9. samvani 35 10.11.20 16:27 Сейчас в теме
(5)
Через браузер отлично показывает pdf прямо из временного хранилища по "прямому" пути "http://адрес_базы/e1c/tempstorage/...."

Во временное хранилище помещаются двоичные данные файла, как Вы просматриваете pdf по прямому пути? как выглядит исходный код html страницы?
3. malikov_pro 1292 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 35 25.09.20 13:36 Сейчас в теме
(3) спасибо. Время появится - сделаю
10. milanse 38 02.02.21 16:25 Сейчас в теме
В просмотре pdf при нажатии на кнопку полного экрана открывается на полный экран, при закрытии крашится 1С целиком. Платформа 8.3.17.1851.
Может кто сталкивался / знает как лечить ?
11. samvani 35 02.02.21 19:39 Сейчас в теме
(10) есть такая проблема. Как лечить не знаю. Возможно, есть решение в ветке pdf.js на github.
12. lisrws 143 08.04.21 13:24 Сейчас в теме
Есть ряд существенных недостатков:
1) Не печатаются спецсимволы, например "№"
2) Нет предварительного просмотра
3) Картинка размером на А5 распечаталась на первой странице, а потом принтер затянул еще и второй лист, но ничего на нем не распечатал. видимо криво границы печати отрабатывают
13. samvani 35 08.04.21 18:37 Сейчас в теме
(12)Для начала я бы уточнил версию платформы 1с. Если текущая версия не на движке webkit, тогда могут быть проблемы.
1. Никто не мешает печатать из 1с. Если Вы печатали из pdf js тогда Вам прямой путь на github и к интеграторам движка webkit в 1с.
2. Что имеется в виду?
3. Что и откуда Вы печатали?
14. lisrws 143 08.04.21 18:39 Сейчас в теме
15. samvani 35 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 макет
Itilive.ru; +1 1 Ответить
17. 7OH 69 08.01.22 23:04 Сейчас в теме
(16)
Ничего не произошло - что-то подумало себе и ничего.
Платформа 20-я, клиент сервер.
Сохраненный HTML не показал ни эдж, ни лиса (чисто для проверки).
Вы бы хоть с таким сарказмом то - обработку рабочую выложили, которая покажет и многостраничный документ с масштабированием и документ с подписью внутри.
26. Itilive.ru 43 22.06.23 16:49 Сейчас в теме
(17) все работает если быть чуть внимательнее к тому что вставляешь в конфигуратор )
22. samvani 35 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 35 10.01.22 11:30 Сейчас в теме
(16) Боремся за универсальность применения На клинте под windows открывается adobe reader. А что будет если не установлен adobe reader, Что будет на клиенте под linux?
20. 7OH 69 10.01.22 11:43 Сейчас в теме
(19) а что ещё будет если это в браузере запущено ?
21. samvani 35 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 35 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 .
Удачи в разработке.
30. user592447_emshanov.y 06.09.23 13:11 Сейчас в теме
(28)Дмитрий, еще раз спасибо. Благодаря вашему совету поиск удалось реализовать.
29. user592447_emshanov.y 09.08.23 14:14 Сейчас в теме
(28) Дмитрий, спасибо! Буду пробовать.
Оставьте свое сообщение