Открытие PDF в новом поле HTML на WebKit

1. Bonov 08.05.19 12:50 Сейчас в теме
Коллеги, в связи с внедрением WebKit в поле HMTL документа в платформе 8.3.14 появились новые возможности, но и перестали работать старые.
К сожалению, я не спец в WebKit и прошу помощи, как теперь отобразить PDF на поле HTML документа. Желательно без сохранения файла.

Раньше код был следующий:

				HTMLДокумент = "<ht ml>
								|	<head>
								|	</head>
								|	<body>
								|		<EMB ED width=100% height=100% type=""application/pdf"" src=""" + АдресФайла + """></EMBED>
								|	</body>
								|</html>";
Показать

Теперь же он уже не работает, а попытки его модификации ни к чему пока не привели. У кого какие есть идеи по решению вопроса?
По теме из базы знаний
Найденные решения
48. Bonov 16.12.20 00:11 Сейчас в теме
Итоговый код открытия PDF в новых версиях платформы 1С.
Тот же код найдёте и в приложенном файле для удобства использования, поскольку сайт портит теги скрипта, добавляя лишние пробелы.
Примечание: масштаб отображения можно регулировать, меняя переменную scale в коде скрипта.

СтрокаPDFФайла = ПолучитьBase64СтрокуИзДвоичныхДанных(ПолучитьИзВременногоХранилища(АдресФайла));
// Или, например:
// ДД = Новый ДвоичныеДанные(Результат.ПолноеИмяФайла);
// СтрокаPDFФайла = ПолучитьBase64СтрокуИзДвоичныхДанных(ДД);
HTMLДокумент = "<!DO CTYPE html>
				|<ht ml>
				|	<head>
				|		<met a http-equiv=""Content-Type"" content=""text/html; charset=UTF-8"" />
				|		<met a name=""viewport"" content=""width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no"">
				|		<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js""></sc ript>
				|		<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js""></sc ript>
				|		<canvas id=""the-canvas""></canvas>
				|		<sc ript>
				|			var currPage = 1; //Pages are 1-based not 0-based
				|			var numPages = 0;
				|			var thePDF = null;
				|			
				|			var loadingTask = pdfjsLib.getDocument({data: atob(`" + СтрокаPDFФайла + "`)});
				|			loadingTask.promise.then(function(pdf) {
				|			       
				|			     thePDF = pdf;
				|			     numPages = pdf.numPages;
				|			
				|			     pdf.getPage(1).then(handlePages);                      
				|			
				|			     function handlePages(page) { 
				|			        var scale = 1.5;
				|			
				|			        var viewport = page.getViewport({scale: scale});
				|			
				|			        var canvas = document.createElement( ""canvas"" );
				|			        canvas.style.display = ""block"";
				|			        var context = canvas.getContext('2d');
				|			        canvas.height = viewport.height;
				|			        canvas.width = viewport.width;
				|			
				|			        var renderContext = {
				|			              canvasContext: context,
				|			              viewport: viewport
				|			        };
				|			        var renderTask = page.render(renderContext);
				|			
				|			         document.body.appendChild( canvas );
				|			
				|			        currPage++;
				|			        if ( thePDF !== null && currPage <= numPages )
				|			        {
				|			            thePDF.getPage( currPage ).then( handlePages );
				|			        }
				|			       };
				|			
				|			});
				|		</sc ript>
				|	</body>
				|</html>";
Показать
Прикрепленные файлы:
Код открытия PDF в WebKit.txt
user2010816; Nizbel; Greeen4; DENSKR; goliath-itd; Romario_; Eaysmax; chillfeel; Дмитрий74Чел; fotov; Skylark; hottion; Ditron; aviks__; maikl007; timm00; daho; bamblbi; +18 Ответить
Остальные ответы
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
10. EVKash 14 30.05.19 12:39 Сейчас в теме
(1) самое интересное, что этот код -
                HTMLДокумент = "<ht ml>
                                |    <head>
                                |    </head>
                                |    <body>
                                |        <EMB ED width=100% height=100% type=""application/pdf"" src=""" + АдресФайла + """></EMBED>
                                |    </body>
                                |</html>";
РАБОТАЕТ!!!

Но криво работает. 1С как всегда в своем репертуаре...
Если в отладчике в событии ПолеХТМЛДокументаДокументСформирован в "вычислить выражение" посмотреть Элементы.ПолеХТМЛДокумента.Документ,
то при продолжении отладки содержимое pdf отлично показывается. НО!!! До перезапуска предприятия ломается сохранение любых табличных документов в pdf. Т.е. документ сохраняется, но просмотреть его не получается. Битый файл сохраняется.
Им бы баг репорт накатать... Кто может?
2. Sergitax 08.05.19 13:38 Сейчас в теме
Движок WebKit не поддерживает работу с PDF. В тонком клиенте для Windows раньше использовался Internet Explorer, который также не поддерживал работу с pdf-файлами. Однако при установке Adobe Acrobar Reader дополнительно устанавливался плагин к Internet Explorer, который и позволял просматривать pdf-файлы в полях HTML.
В случае веб-клиента 1С все будет зависеть от браузера. К примеру тот же хром поддерживает работу с pdf-файлами и вы сможете увидеть содержимое. Хромиум и Опера эту возможность не поддерживают.
3. Bonov 08.05.19 14:17 Сейчас в теме
(2) Да, я понимаю, что напрямую не поддерживает. Поэтому интересны пути обхода. Любые пути для решения вопроса.
4. Bonov 08.05.19 14:56 Сейчас в теме
Раз теперь есть поддержка HTML5 и JS, то, может, как-то можно прикрутить pdf.js?
https://github.com/mozilla/pdf.js
5. Bonov 08.05.19 17:15 Сейчас в теме
Я не силён в web, поэтому ни черта не понимаю... Должен, по идее, работать такой код, но не работает... Пример взят с сайта выше по ссылке.

HTMLДокумент = "<!DO CTYPE html>
|<ht ml>
|<head>
|<met a http-equiv=""Content-Type"" content=""text/html; charset=UTF-8"" />
|<met a name=""viewport"" content=""width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no"">
|<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js""></sc ript>
|<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.min.js""></sc ript>
|<canvas id=""the-canvas""></canvas>

|<sc ript>
|// atob() is used to convert base64 encoded PDF to binary-like data.
|// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
|// Base64_encoding_and_decoding.)
|var pdfData = atob(" + ПолучитьBase64СтрокуИзДвоичныхДанных(ПолучитьИзВременногоХранилища(АдресФайла)) + ");
|  
|// Loaded via <sc ript> tag, create shortcut to access PDF.js exports.
|var pdfjsLib = window['pdfjs-dist/build/pdf'];

|// The workerSrc property shall be specified.
|pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

|// Using DocumentInitParameters object to load binary data.
|var loadingTask = pdfjsLib.getDocument({data: pdfData});
|loadingTask.promise.then(function(pdf) {
|  console.log('PDF loaded');
|  
|  // Fetch the first page
|  var pageNumber = 1;
|  pdf.getPage(pageNumber).then(function(page) {
|    console.log('Page loaded');
|    
|    var scale = 1.5;
|    var viewport = page.getViewport({scale: scale});

|    // Prepare canvas using PDF page dimensions
|    var canvas = document.getElementById('the-canvas');
|    var context = canvas.getContext('2d');
|    canvas.height = viewport.height;
|    canvas.width = viewport.width;

|    // Render PDF page into canvas context
|    var renderContext = {
|      canvasContext: context,
|      viewport: viewport
|    };
|    var renderTask = page.render(renderContext);
|    renderTask.promise.then(function () {
|      console.log('Page rendered');
|    });
|  });
|}, function (reason) {
|  // PDF loading error
|  console.error(reason);
|});
|</sc ript>
|</body>
|</html>";
Показать
Ja_V; Bosanya; KPAMOP; +3 Ответить
11. KPAMOP 19 22.10.19 08:28 Сейчас в теме
(5)
|var pdfData = atob(`" + ПолучитьBase64СтрокуИзДвоичныхДанных(ПолучитьИзВременногоХранилища(АдресФайла)) + "`);

Вашему примеру не хватает тильды в функции atob(``), без них на 8.3.15.1700 изображение не появлялось. А так: спасибо, был избавлен он мучительного поиска в сети.
Bosanya; Devi; Bonov; +3 Ответить
12. EVKash 14 22.10.19 09:03 Сейчас в теме
(11) насколько понимаю, без интернета не взлетит?
13. KPAMOP 19 22.10.19 09:17 Сейчас в теме
(12)Я уже не помню, когда на компьютере не было интернета. Не проверял такую ситуацию.
14. SlavaKron 22.10.19 09:21 Сейчас в теме
(12) Можно скопировать текст скриптов по указанным ссылкам и вставить в тело HTML документа.
56. Дмитрий74Чел 234 08.09.21 11:37 Сейчас в теме
(14) у меня не взлетело: тексты большие, прямое копирование в текстовый макет в конфигураторе зависает. Если же загрузить файлы в макеты двоичных данных - то ошибка xdto при клиент-серверном переходе. Как понял, скрипт worker содержит недопустимые xdto-символы.
15. Bonov 22.10.19 11:58 Сейчас в теме
(11) Да ладно?! Т.е. заработало?! Ура! Иду пробовать! :)
16. Bonov 22.10.19 13:01 Сейчас в теме
(11) Да, про то, что нужно тильды вставлять вместо апострофов, я бы никогда не догадался. Действительно, так заработало, но с большими ограничениями! Показывается только первая страница PDF, а так же недоступно масштабирование. Имейте в виду те, кто будет внедрять. А решение по полному отображению PDF со всеми страницами, масштабированию, да возможностью выделения/копирования текста - пока продолжаем искать.
18. KPAMOP 19 22.10.19 16:15 Сейчас в теме
(16)(9) Есть предложенное решение, но на печать попадают кнопки управления страницами.(9)
19. Bonov 22.10.19 19:36 Сейчас в теме
(18) Уверен, как-то можно частично портировать этот функционал: https://mozilla.github.io/pdf.js/web/viewer.html
21. deGreese 25.10.19 12:11 Сейчас в теме
(18)
Нужно добавить на страницу небольшую таблицу стилей

@media print{
  .noprint {
    display:none;
  }
}


и кнопкам, которые не нужно печатать присвоить соответствующие классы вот так

... <input type=button class=noprint ...
vankacal; acanta; KPAMOP; +3 Ответить
22. KPAMOP 19 25.10.19 13:12 Сейчас в теме
(21)Тогда может найдёте время и силы и выложите окончательный скрипт?
Я очень не силён в них, а потенциал вашей работы виден.
23. deGreese 28.10.19 11:02 Сейчас в теме
(22) Дописал немного. При печати скрывается блок с кнопками и номером страницы.
Прикрепленные файлы:
Смотрелка PDF.epf
Bosanya; vankacal; Dosperanso; lokli; KPAMOP; +5 Ответить
6. Bonov 08.05.19 17:33 Сейчас в теме
Скопировал код напрямую в текст, страничка стала отображаться, причем, даже в веб-клиенте(!), так что решение возможно, нужны только познания в этой области, чтобы правильно прописать код странички, да наладить взаимодействие.
Web-спецы, ауу!! :)
7. Sergitax 13.05.19 10:54 Сейчас в теме
(6)
Я не веб спец, но как уже писал выше в веб-клиенте оно и будет работать при поддержке pdf самим браузером. Мои коллеги (веб-программисты) посмотрели этот скрипт и сказали, что здесь идет преобразование pdf в картинку и только 1 листа. Для вывода много страничного документа необходимо сделать цикл.
8. Bonov 13.05.19 12:46 Сейчас в теме
(7) Ваши коллеги могут посмотреть исходный код библиотеки выше по ссылке на github? Там есть примеры онлайн просмотра и многостраничного документа с кучей элементов управления, т.е. аналог Acrobat Reader на JS. Нужно преобразовать этот код под реалии 1С, т.е. запихнуть всё в один файл. Выше я привел лишь пример одностраничного кода, не говорил же, что это результат.

И да, работать будет во всех современных браузерах вне зависимости от поддержки PDF.

Вот прямая ссылка на онлайн просмотр PDF силами JS: https://mozilla.github.io/pdf.js/web/viewer.html
Доступно и выделение текста, и просмотр всех страниц, и печать, в общем - полноценная работа с файлом.
9. deGreese 16.05.19 10:02 Сейчас в теме
Накидал обработку на УФ. Проверял в CRM.
В макете обработки страница для рисования и второй макет - собственно pdf для просмотра. Сам принцип думаю понятен, дальше можно адаптировать как угодно.

Взял один из примеров на сайте, где постранично выводится файл и немного адаптировал пример.
Прикрепленные файлы:
Смотрелка PDF.epf
KPAMOP; Sancho-R; +2 Ответить
17. Bonov 22.10.19 14:15 Сейчас в теме
Вот в идеале то, что хотелось бы получить:
https://mozilla.github.io/pdf.js/web/viewer.html
20. KPAMOP 19 23.10.19 10:40 Сейчас в теме
(17)В идеале хорошо. Вот что я смог добиться от своих программистов. Показывает все страницы!
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	
	Если ЭтоАдресВременногоХранилища(Параметры.Адрес) Тогда
		
		ДвоичныеДанные = ПолучитьИзВременногоХранилища(Параметры.Адрес);
		
		Если не ПустаяСтрока(Параметры.Заголовок) Тогда
			АвтоЗаголовок = Ложь;
			Заголовок = Параметры.Заголовок;
		КонецЕсли;
		
		Поле =
		"<!DO CTYPE html>
		|<ht ml>
		|<head>
		|<met a http-equiv=""Content-Type"" content=""text/html; charset=UTF-8"" />
		|<met a name=""viewport"" content=""width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no"">
		|<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js""></sc ript>
		|<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.min.js""></sc ript>
		|<div id=""holder""></div>
		|<sc ript>
		|// atob() is used to convert base64 encoded PDF to binary-like data.
		|// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
		|// Base64_encoding_and_decoding.)
		|var pdfData = atob(`" + ПолучитьBase64СтрокуИзДвоичныхДанных(ДвоичныеДанные) + "`);
		|// Loaded via <sc ript> tag, create shortcut to access PDF.js exports.
		|var pdfjsLib = window['pdfjs-dist/build/pdf'];
		|// The workerSrc property shall be specified.
		|pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
		|// Using DocumentInitParameters object to load binary data.
		|var loadingTask = pdfjsLib.getDocument({data: pdfData});
		|loadingTask.promise.then(function(pdf) 
		|{
		|	var canvasContainer = document.getElementById('holder');
		|	console.log('PDF loaded');
		|  
		|	for(var pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++){
		|		console.log(pageNumber);
		|  
		|		pdf.getPage(pageNumber).then(function(page) {
		|		console.log('Page loaded');
		|    
		|		var scale = 1.0;
		|		var viewport = page.getViewport({scale: scale});
		|		var canvas = document.createElement('canvas');
		|		var context = canvas.getContext('2d');
		|		canvas.height = viewport.height;
		|		canvas.width = viewport.width;
		|		var renderContext = {
		|			canvasContext: context,
		|			viewport: viewport
		|		};
		|	canvasContainer.appendChild(canvas);
		|	var renderTask = page.render(renderContext);
		|	renderTask.promise.then(function () {
		|		console.log('Page rendered');
		|		});
		|	});
		|}
		|}, 
		|function (reason) {
		|  // PDF loading error
		|  console.error(reason);
		|});
		|</sc ript>
		|</body>
		|</html>";		
		
	Иначе
		
		Отказ = Истина;
		
	КонецЕсли;
	
КонецПроцедуры
Показать
Zarikus26; lokli; +2 Ответить
40. Alv_prog 06.05.20 10:41 Сейчас в теме
(20) На платформе 8.3.16.1063 кнопки отображаются, изображения нет
42. Kovekh 29.05.20 09:13 Сейчас в теме
(40)Дело не в платформе, дело в мозилле. Они поменяли библиотеку и в версии 2.4.456 от 20 марта не работает всё в WebKit и IE/Edge. Лечится использованием старых библиотек.

Допустим, в строках
<sc ript src="https://mozilla.github.io/pdf.js/build/pdf.js"></sc ript

и
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js'


Нужно написать
<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.js""></sc ript>

и
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.worker.js'


У меня с этими изменениями всё заработало в 8.3.15.1830)


Суммарно такой HTML получается:
<!do ctype html>
		<ht ml>
		<head>
		<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.js""></sc ript>

		<sc ript>
		addEventListener('load',e=>{
		  var BinData = atob(`<ba se64pdf>`);
		  // Loaded via <sc ript> tag, create shortcut to access PDF.js exports.
		  var pdfjsLib = window['pdfjs-dist/build/pdf'];
		  // The workerSrc property shall be specified.
		  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.worker.js';

		  var pdfDoc = null,
		      pageNum = 1,
		      pageRendering = false,
		      pageNumPending = null,
		      scale = 0.8,
		      canvas = document.getElementById('the-canvas'),
		      ctx = canvas.getContext('2d');

		  /**
		   * Get page info from document, resize canvas accordingly, and render page.
		   * *param num Page number.
		   */
		  function renderPage(num) {
		    pageRendering = true;
		    // Using promise to fetch the page
		    pdfDoc.getPage(num).then(function(page) {
		      var viewport = page.getViewport({scale: scale});
		      canvas.height = viewport.height;
		      canvas.width = viewport.width;

		      // Render PDF page into canvas context
		      var renderContext = {
		        canvasContext: ctx,
		        viewport: viewport
		      };
		      var renderTask = page.render(renderContext);

		      // Wait for rendering to finish
		      renderTask.promise.then(function() {
		        pageRendering = false;
		        if (pageNumPending !== null) {
		          // New page rendering is pending
		          renderPage(pageNumPending);
		          pageNumPending = null;
		        }
		      });
		    });

		    // Update page counters
		    document.getElementById('page_num').textContent = num;
		  }

		  /**
		   * If another page rendering in progress, waits until the rendering is
		   * finised. Otherwise, executes rendering immediately.
		   */
		  function queueRenderPage(num) {
		    if (pageRendering) {
		      pageNumPending = num;
		    } else {
		      renderPage(num);
		    }
		  }

		  /**
		   * Displays previous page.
		   */
		  function onPrevPage() {
		    if (pageNum <= 1) {
		      return;
		    }
		    pageNum--;
		    queueRenderPage(pageNum);
		  }
		  document.getElementById('prev').addEventListener('click', onPrevPage);

		  /**
		   * Displays next page.
		   */
		  function onNextPage() {
		    if (pageNum >= pdfDoc.numPages) {
		      return;
		    }
		    pageNum++;
		    queueRenderPage(pageNum);
		  }
		  document.getElementById('next').addEventListener('click', onNextPage);

		  /**
		   * Asynchronously downloads PDF.
		   */
		  pdfjsLib.getDocument({data: BinData}).promise.then(function(pdfDoc_) {
		    pdfDoc = pdfDoc_;
		    document.getElementById('page_count').textContent = pdfDoc.numPages;

		    // Initial/first page rendering
		    renderPage(pageNum);
		  });
		});
		</sc ript>
		<st yle>
		*media print{
		  .noprint {
		    display:none;
		  }
		}
		</style>
		</head>
		<body>
		<div class=noprint>
		  <button id=""prev"">Предыдущая</button>
		  <button id=""next"">Следующая</button>
		     
		  <span>Page: <span id=""page_num""></span> / <span id=""page_count""></span></span>
		</div>

		<canvas id=""the-canvas""></canvas>
		</body>
		</html>
Показать
24. Dosperanso 2 19.11.19 17:40 Сейчас в теме
Немного дополнил код от @deGreese. Теперь страницы на русском и добавил кнопки увеличения и уменьшения масштаба.
<!do ctype html>
<ht ml>
<head>
<sc ript src="https://mozilla.github.io/pdf.js/build/pdf.js"></sc ript>

<sc ript>
addEventListener('load',e=>{
  var BinData = atob(`<ba se64pdf>`);
  // Loaded via <sc ript> tag, create shortcut to access PDF.js exports.
  var pdfjsLib = window['pdfjs-dist/build/pdf'];
  // The workerSrc property shall be specified.
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

  var pdfDoc = null,
      pageNum = 1,
      pageRendering = false,
      pageNumPending = null,
      scale = 1,
      canvas = document.getElementById('the-canvas'),
      ctx = canvas.getContext('2d');

  /**
   * Get page info from document, resize canvas accordingly, and render page.
   * @param num Page number.
   */
  function renderPage(num) {
    pageRendering = true;
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function(page) {
      var viewport = page.getViewport({scale: scale});
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // Render PDF page into canvas context
      var renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      var renderTask = page.render(renderContext);

      // Wait for rendering to finish
      renderTask.promise.then(function() {
        pageRendering = false;
        if (pageNumPending !== null) {
          // New page rendering is pending
          renderPage(pageNumPending);
          pageNumPending = null;
        }
      });
    });

    // Update page counters
    document.getElementById('page_num').textContent = num;
  }

  /**
   * If another page rendering in progress, waits until the rendering is
   * finised. Otherwise, executes rendering immediately.
   */
  function queueRenderPage(num) {
    if (pageRendering) {
      pageNumPending = num;
    } else {
      renderPage(num);
    }
  }

  /**
   * Displays previous page.
   */
  function onPrevPage() {
    if (pageNum <= 1) {
      return;
    }
    pageNum--;
    queueRenderPage(pageNum);
  }
  document.getElementById('prev').addEventListener('click', onPrevPage);

  /**
   * Displays next page.
   */
  function onNextPage() {
    if (pageNum >= pdfDoc.numPages) {
      return;
    }
    pageNum++;
    queueRenderPage(pageNum);
  }
  document.getElementById('next').addEventListener('click', onNextPage);

/**
   * Zoom Out.
   */
  function onZoomOut() {
    scale = scale - 0.2;
    queueRenderPage(pageNum);
  }
  document.getElementById('ZoomOut').addEventListener('click', onZoomOut);

/**
   * Zoom In.
   */
  function onZoomIn() {
    scale = scale + 0.2;
    queueRenderPage(pageNum);
  }
  document.getElementById('ZoomIn').addEventListener('click', onZoomIn);

  /**
   * Asynchronously downloads PDF.
   */
  pdfjsLib.getDocument({data: BinData}).promise.then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    document.getElementById('page_count').textContent = pdfDoc.numPages;

    // Initial/first page rendering
    renderPage(pageNum);
  });
});
</sc ript>
<st yle>
@media print{
  .noprint {
    display:none;
  }
}
</style>
</head>
<body>
<div class=noprint>
  <button id="prev">Предыдущая</button>
  <button id="next">Следующая</button>
     
  <span>Страница: <span id="page_num"></span> из <span id="page_count"></span></span>
     
  <button id="ZoomOut">-</button>
  <button id="ZoomIn">+</button>
</div>

<canvas id="the-canvas"></canvas>
</body>
</html>
Показать
Bosanya; nightsun; vankacal; friend0; Zarikus26; +5 Ответить
25. blazevic 10.12.19 22:53 Сейчас в теме
(24) К сожалению, на 8.3.16.1063 данный код перестал работать. Не знаете с чем это может быть связано?
codewriter; +1 Ответить
26. friend0 23.12.19 17:03 Сейчас в теме
(25) У меня работает. Если удалить кучу неизвестно откуда взявшихся лишних пробелов.
30. ZeDikuSss 20.02.20 08:20 Сейчас в теме
(26) А о каких именно пробелах вы говорите?
31. friend0 20.02.20 12:24 Сейчас в теме
(30)например "<!do ctype html>" показывается как "<!do ctype html>" и прочее
27. plyshu 13.01.20 04:53 Сейчас в теме
Обработка для компьютеров без доступа к интернету
Прикрепленные файлы:
Смотрелка PDF (1).epf
aharin; Bosanya; nightsun; +3 Ответить
29. nosferat 13.02.20 16:39 Сейчас в теме
(27) на 15 платформе почему-то пустой экран. ПДФ не отображается
Дмитрий74Чел; codewriter; +2 Ответить
32. ZeDikuSss 27.02.20 11:42 Сейчас в теме
(29) Собственно, немного переделал для собственных нужд, однако оно работает
Добавил открытие файлов с компьютера (doc, xls, pdf)
Добавил кнопки масштаба
Прикрепленные файлы:
ОткрытиеPDF.epf
SCEPU; Дмитрий74Чел; user1416967; 7OH; vodolazua; axelerleo; liv; wolha; hansel; alexex; nastrou1c; +11 Ответить
41. Alv_prog 06.05.20 10:43 Сейчас в теме
(32) На платформе 8.3.16.1063 кнопки отображаются, изображения нет
55. kako1toxren 09.08.21 11:58 Сейчас в теме
(41)
На платформе 8.3.16.1063 кнопки отображаются, изображения нет
Тоже столкнулся с такой же ошибкой. Удалось ли Вам ее победить?
60. Дмитрий74Чел 234 08.09.21 16:16 Сейчас в теме
(55) 8.3.18.1520, все работает. Единственное автор писал код не под клиент-серверную архитектуру, в клиент-серверной базе выходит ошибка файла (если клиент не там же где служба 1С). Но если запустить на сервере - то все ок.
46. 7OH 69 10.12.20 17:53 Сейчас в теме
(32) А можно сделать, чтобы масштаб менялся у всей страницы (через ctrl-mouse) ?
Сейчас меняется масштаб только у кнопок управления масштабом.
Сам документ остаётся на месте
28. terrorion 92 22.01.20 10:27 Сейчас в теме
По адресу https://mozilla.github.io/pdf.js/ можно скачать архив, содержимое скопировать в папку сайта, опубликованного в локальной сети.

Пример кода

ПолеHTML = "http://IPАдресСайта/pdfjs/web/viewer.html?file=pdfdocs/" + ИмяФайлаPDF;
sergo_pss; +1 Ответить
34. Azamatex 12 11.03.20 08:49 Сейчас в теме
(28)ИмяФайлаPDF - в каком формате должно быть?
35. terrorion 92 11.03.20 09:25 Сейчас в теме
36. Azamatex 12 11.03.20 09:27 Сейчас в теме
(35)прошу прощения, я имел ввиду путь к файлу. C:/Users/g/Desktop/v8_3835_5.pdf - не работает.
37. terrorion 92 11.03.20 09:35 Сейчас в теме
(36) папка "pdfdocs" должна быть вложенной типа D:\www\pdfjs\web\pdfdocs, и в эту папку нужно положить файл
Azamatex; +1 Ответить
38. terrorion 92 11.03.20 09:37 Сейчас в теме
33. plyshu 11.03.20 02:02 Сейчас в теме
Кстати, у кого-нибудь получилось добавить кнопку печати?
Код <button on click="window.print()"> Print</button> печатает только то, что изображено на html (впрочем не удивительно).
Был бы признателен, если кто-то подкинул идею, как можно это реализовать и в каком направлении копать
fakturauz; +1 Ответить
39. user624439_ivanovaf 13.03.20 18:08 Сейчас в теме
Обработка класс! но не работает в линуксе. Куда смотреть, что можно поправить ?
52. akR00b 22 22.03.21 10:53 Сейчас в теме
(39)с линуксом получилось?
43. samvani 35 25.09.20 08:52 Сейчас в теме
44. bamblbi 24.11.20 09:53 Сейчас в теме
Была такая же задача. Представляю упрощённый вариант на основе ответов выше. Получилось вывести все страницы с прокруткой мышью без использования доп.кнопок

ДД = Новый ДвоичныеДанные(Результат.ПолноеИмяФайла);
		
		ксфТекущаяПечатнаяФормаПдф = "<!DO CTYPE html>
									|<ht ml>
										|<head>
											|<met a http-equiv=""Content-Type"" content=""text/html; charset=UTF-8"" />
											|<met a name=""viewport"" content=""width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no"">
											|<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js""></sc ript>
											|<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.min.js""></sc ript>
											|<canvas id=""the-canvas""></canvas>

											|<sc ript>
												|var currPage = 1; //Pages are 1-based not 0-based
												|var numPages = 0;
												|var thePDF = null;
												|
												|var loadingTask = pdfjsLib.getDocument({data: atob(`" + ПолучитьBase64СтрокуИзДвоичныхДанных(ДД) + "`)});
												|loadingTask.promise.then(function(pdf) {
												|  	 
												|	 thePDF = pdf;
						        				|	 numPages = pdf.numPages;
												|
												|	 pdf.getPage(1).then(handlePages);  					
												|
												|	 function handlePages(page) { 
												|    	var scale = 1.5;
												|
												|    	var viewport = page.getViewport({scale: scale});
												|
												|    	var canvas = document.createElement( ""canvas"" );
						    					|		canvas.style.display = ""block"";
						    					|		var context = canvas.getContext('2d');
						    					|		canvas.height = viewport.height;
						    					|		canvas.width = viewport.width;
												|
												|    	var renderContext = {
												|      		canvasContext: context,
												|      		viewport: viewport
												|    	};
												|    	var renderTask = page.render(renderContext);
												|
						    					|	 	document.body.appendChild( canvas );
												|
						    					|		currPage++;
						    					|		if ( thePDF !== null && currPage <= numPages )
						    					|		{
						        				|			thePDF.getPage( currPage ).then( handlePages );
						    					|		}
												|  	 };
												|
												|});
											|</sc ript>
											
										|</body>
									|</html>";
Показать
Bonov; servs; vodolazua; +3 Ответить
45. vodolazua 07.12.20 21:35 Сейчас в теме
(44) Работает на платформе 8.3.17.1851 при условии если убрать из приведенного кода пробелы.
Прикрепленные файлы:
47. Bonov 15.12.20 23:55 Сейчас в теме
(44) Супер! Вы молодец! Протестировал и заменил свои прежние решения. Но доработал и Ваше, заменив версию библиотеки на новую 2.4.456. Крайне рекомендую и Вам это сделать, поскольку открытие больших файлов надолго подвешивало программу, а в новых же версиях они сделали постепенную подгрузку. Не смотря на то, что выше писали, что эта версия не работает, у меня на 8.3.18.1208 всё отлично.
57. Дмитрий74Чел 234 08.09.21 11:44 Сейчас в теме
(47) у меня 2.4.456 на 8.3.18.1563 тоже работает. Но не работает ни одна версия скриптов старше указанной.
59. Bonov 08.09.21 15:30 Сейчас в теме
(57) Попробовал на текущей версии - не работает. Видимо, что-то поменяли. Надо разбираться что именно и думать, как поправить скрипт. Если у кого будет время - будем благодарны.
48. Bonov 16.12.20 00:11 Сейчас в теме
Итоговый код открытия PDF в новых версиях платформы 1С.
Тот же код найдёте и в приложенном файле для удобства использования, поскольку сайт портит теги скрипта, добавляя лишние пробелы.
Примечание: масштаб отображения можно регулировать, меняя переменную scale в коде скрипта.

СтрокаPDFФайла = ПолучитьBase64СтрокуИзДвоичныхДанных(ПолучитьИзВременногоХранилища(АдресФайла));
// Или, например:
// ДД = Новый ДвоичныеДанные(Результат.ПолноеИмяФайла);
// СтрокаPDFФайла = ПолучитьBase64СтрокуИзДвоичныхДанных(ДД);
HTMLДокумент = "<!DO CTYPE html>
				|<ht ml>
				|	<head>
				|		<met a http-equiv=""Content-Type"" content=""text/html; charset=UTF-8"" />
				|		<met a name=""viewport"" content=""width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no"">
				|		<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js""></sc ript>
				|		<sc ript src=""https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js""></sc ript>
				|		<canvas id=""the-canvas""></canvas>
				|		<sc ript>
				|			var currPage = 1; //Pages are 1-based not 0-based
				|			var numPages = 0;
				|			var thePDF = null;
				|			
				|			var loadingTask = pdfjsLib.getDocument({data: atob(`" + СтрокаPDFФайла + "`)});
				|			loadingTask.promise.then(function(pdf) {
				|			       
				|			     thePDF = pdf;
				|			     numPages = pdf.numPages;
				|			
				|			     pdf.getPage(1).then(handlePages);                      
				|			
				|			     function handlePages(page) { 
				|			        var scale = 1.5;
				|			
				|			        var viewport = page.getViewport({scale: scale});
				|			
				|			        var canvas = document.createElement( ""canvas"" );
				|			        canvas.style.display = ""block"";
				|			        var context = canvas.getContext('2d');
				|			        canvas.height = viewport.height;
				|			        canvas.width = viewport.width;
				|			
				|			        var renderContext = {
				|			              canvasContext: context,
				|			              viewport: viewport
				|			        };
				|			        var renderTask = page.render(renderContext);
				|			
				|			         document.body.appendChild( canvas );
				|			
				|			        currPage++;
				|			        if ( thePDF !== null && currPage <= numPages )
				|			        {
				|			            thePDF.getPage( currPage ).then( handlePages );
				|			        }
				|			       };
				|			
				|			});
				|		</sc ript>
				|	</body>
				|</html>";
Показать
Прикрепленные файлы:
Код открытия PDF в WebKit.txt
user2010816; Nizbel; Greeen4; DENSKR; goliath-itd; Romario_; Eaysmax; chillfeel; Дмитрий74Чел; fotov; Skylark; hottion; Ditron; aviks__; maikl007; timm00; daho; bamblbi; +18 Ответить
49. Bonov 16.12.20 13:29 Сейчас в теме
(48) Изменение масштаба лично у себя счёл удобнее сделать через поле на форме без встраивания кнопок в код страницы. Изменение масштаба работает путем подмены этого места кода в тексте страницы и перерисовкой. Даже на больших файлах работает быстро. По крайней мере обошлось без повторного чтения файла с сервера/диска.

На форме реквизит МасштабДокументаPDF с предустановленным списком, реквизит МасштабСтрокой для сохранения предыдущего значения и команда ИзменитьМасштаб.

&НаКлиенте
Процедура ИзменитьМасштаб(Команда)
	Если МасштабДокументаPDF = 0 Тогда
		МасштабДокументаPDF = 150;
	КонецЕсли;
	СтрокаПоиска = "var scale = " + МасштабСтрокой;
	МасштабСтрокой = Формат(МасштабДокументаPDF / 100, "ЧРД=.");
	СтрокаЗамены = "var scale = " + МасштабСтрокой;
	HTMLДокумент = СтрЗаменить(HTMLДокумент, СтрокаПоиска, СтрокаЗамены);
КонецПроцедуры
Показать
maikl007; +1 Ответить
50. Bonov 16.12.20 16:26 Сейчас в теме
(48) В процессе тестов на многостраничных файлах выяснилось, что подгрузка страниц работает только в тонком и толстых клиентах, а в веб-клиенте при открытии, например, через Google Chrome, библиотека пытается рендерить весь файл целиком и только потом его показывает. Этот момент может свести пользователей с ума. Происходит это по той причине, что не надо подгружать сразу библиотеку pdf.worker.js. Она подгрузится автоматически, нужно лишь указать путь к ней. Исправленный код во вложении.
Прикрепленные файлы:
Код открытия PDF в WebKit.txt
chillfeel; Pipapalamm; timm00; Gisborn; bamblbi; user1503726; +6 Ответить
61. chillfeel 12.10.21 22:38 Сейчас в теме
(50) Огромное спасибо, сильно помогли ваши труды! В вебе и правда отображаться стало. Но я столкнулся с последующей проблемой, я гружу ПДФ файл в элемент справочника, вашим кодом показываю его в ХТМЛ-поле и все здорово. НО(!) когда с веба открываю уже записанный элемент с моей ПДФ-кой, валится ошибка "Несоответствие типов (параметр номер '1')". При работе на платформе таких проблем не возникает, элемент открывается, ПДФ снова отображается, имею возможность сохранить/открыть на устройстве. Не сталкивались с подобным? Может кто подскажет куда копать, что почитать на сей счет?
62. Bonov 13.10.21 11:49 Сейчас в теме
(61) Мне кажется, ошибку стоит искать в вашем коде, а не в коде компоненты. Что-то не так с извлечением данных из справочника.
63. hitalik 07.01.22 19:54 Сейчас в теме
(48)
в 2022 можно так ))) 1С:Предприятие 8.3 (8.3.15.1700)

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
		
    Строка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>";	 
	 
КонецПроцедуры
Показать
76. Prelude 29 02.02.24 07:37 Сейчас в теме
Как полностью получить код?
66. hitalik 07.01.22 21:13 Сейчас в теме
(48) коллеги вы не туда повернули
51. ask530 21.03.21 13:45 Сейчас в теме
Добрый день!

Кто-нибудь пробовал решить вопрос поворота pdf на 90 градусов, аналогично масштабированию - кнопкой из управляемой формы
65. hitalik 07.01.22 21:12 Сейчас в теме
(51) да коллеги вы не туда повернули
) webkit имеет на борту все что нужно
53. user1600314 16.07.21 10:48 Сейчас в теме
небольшое замечание нет тегов
открывающий <body>
закрывающий </head>


а так всё норм
я это использую для отображения файла ПДФ с этикетками, который генерит мой экзешник который я запускаю внутри 1С
58. Bonov 08.09.21 15:28 Сейчас в теме
(53) Это, я так понимаю, предназначалось мне. Да, проглядел, действительно, нужно добавить перед тегом "</body>" еще и "</head<body>".
54. user1600314 21.07.21 15:20 Сейчас в теме
не могу сделать нормальный разрыв страницы при печати из поля ХТМЛдокумента для принтера этикеток
64. hitalik 07.01.22 20:04 Сейчас в теме
Задался задачей в 2022 году отобразить pdf, платформа 1С:Предприятие 8.3 (8.3.15.1700) встроенный браузер webkit.

Я не являюсь опытным разработчиком 1С. моя стихия это веб и c#. в свое время подобное реализовал на этих языках и просто прикрутил свои старые наработки.

Вот Вам вариант без всяких костылей. по мимо этого реализовал через NetObjectToIDispatch45 оптимизатор PDF способный на лету при загрузки без временных файлов, формировать из чего угодно PDF. на вход объект на выход Base64, но это уже я так понимаю не входит в рамки данного обсуждения.
Удачи друзья.

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
		
    Строка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>";	 
	 
КонецПроцедуры
Показать
67. Bonov 10.01.22 13:35 Сейчас в теме
(64) Здорово! Именно Вас мы и искали! Но пока Ваш пример не работоспособен, к сожалению. По крайней мере на платформе 8.3.20.1674.
77. Prelude 29 02.02.24 07:43 Сейчас в теме
(68)Здравствуйте! Как получить рабочий код Ваш? Ссылка не работает на Google Диск.
78. hitalik 02.02.24 08:23 Сейчас в теме
(77) добрый день, 89220030777 не бываю на этом сайте пишите в личку.
69. user1600314 10.03.22 16:04 Сейчас в теме
1С:Предприятие 8.3 (8.3.20.1549) переустановка акробата не помогла(((


код который чуть выше не сработал
70. elabor 06.04.22 11:49 Сейчас в теме
У кого ни будь есть рабочий код? на 1С:Предприятие 8.3 (8.3.18.1741) все выше перечисленное не работает.
71. laperuz 46 06.04.22 11:57 Сейчас в теме
72. Дмитрий74Чел 234 08.04.22 10:45 Сейчас в теме
(70) Работает. 8.3.18.1520
На 8.3.18 работают версии pdf.js 2.2.2 и 2.4.456. Версии свежее - не работают (и ошибку webkit не выдает). При этом в Chrome все работает; видимо проблема в необновляемом webkit встроенном в 1С.
Во вложении обработка, в которой можно выбирать разные версии pdf.js
Для реальной работы этот js лучше всего скачать и залить в текстовый макет. В заливке есть нюанс: ctrl+с ctrl+v не работают если копируешь сжатый вариант pdf.js т.к. в нем непечатаемые символы. Нужен исходник. Исходники 2.4.199 во вложении
Прикрепленные файлы:
WorkerJS.txt
MainJS.txt
Тест открытия pdf-мой.epf
73. user1364680 24.01.23 10:17 Сейчас в теме
камрады, приветствую.
спасибо за ваш труд)
может еще подскажете, как вывести последовательно несколько документов пдф, один под другим, многолистовых?
74. user1906363 08.02.23 17:52 Сейчас в теме
Добрый день. Можете пожалуйста подсказать, почему даже если я использую scale=1.0 при сохранении документа в файл его внешний вид размывается ? Я же по идее никак его не меняю. Если загрузил с оригинальным размером то и выгружаться он должен так же.
75. user592447_emshanov.y 02.08.23 15:44 Сейчас в теме
Коллеги, добрый день.
Скажите пожалуйста, кто нибудь делал позиционирование открываемого pdf на заранее заданном фрагменте текста?

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

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

По идее это можно сделать через pdf.js, но не понятно как передать параметр и вызвать метод поиска. Может у кого-то есть примеры?
Оставьте свое сообщение
Вакансии
1С аналитик
Москва
зарплата от 210 000 руб.
Полный день

Руководитель направления 1С
Москва
зарплата от 350 000 руб.
Полный день

1С Программист
Москва
зарплата от 180 000 руб.
Полный день

Программист 1С
Москва
зарплата от 180 000 руб. до 220 000 руб.
Полный день

Аналитик 1С / Бизнес-аналитик
Нижний Новгород
зарплата от 100 000 руб. до 250 000 руб.
Временный (на проект)