Вставляем Pdf viewer – PDF.js на wordpress (плагин и код)

Здравствуйте, сегодня будем вставлять на сайт wordpress Javascript библиотеку PDF.js – это можно сделать с помощью кода или же использовав wordpress плагин.

Скачать исходники для статьи можно ниже

1. Плагин wordpress для подключения Pdf.js

Плагин называется – “PDF.js Viewer Shortcode”, сведения о плагине:
Сайт плагина: “wordpress.org/plugins/pdfjs-viewer-shortcode/”
Также можно скачать плагин с моего сайта – здесь.
Количество активных установок: 10,000+
Последнее обновление: 3 года назад.
Автор плагина: Ben Lawson

Устанавливаем и активируем плагин через панель управления wordpress: в левом меню админки выбираем пункт “Плагины”, подпункт “Добавить новый”, в строку поиска вводим “PDF.js Viewer Shortcode”.

После активации плагина в Редакторе записи/страницы появится новая кнопочка Add PDF:

С помощью неё загружаем/вставляем pdf файл на сайт.

Также pdf файл можно вставить с помощью шорткода:

[pdfjs-viewer url=http://www.website.com/test.pdf viewer_width=600px viewer_height=700px fullscreen=true download=true print=true]

, где:

– url (required): direct url to pdf file
– viewer_width (optional): width of the viewer (default: 100%)
– viewer_height (optional): height of the viewer (default: 1360px)
– fullscreen (optional): true/false, displays fullscreen link above viewer (default: true)
– download (optional): true/false, enables or disables download button (default: true)
– print (optional): true/false, enables or disables print button (default: true)

Pdf viewer на сайте будет выглядеть следующим образом:

2. Вставляем Pdf.js на сайт с помощью кода.

Сайт библиотеки:
“github.com/mozilla/pdf.js”

Или же можете скачать библиотеку pdf.js с моего сайта – здесь.

Код для подключения библиотеки:

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js">
</script>

Код скрипта:

<script>
function viewPDF (event) {
          var link = encodeURI(event.target.href);
          var ifrm= document.createElement('iframe');
          var width = 800;
          var left = 100;
          
          ifrm.src = link;
/// для примера
          ifrm.src  = 'http://u733006.s03.wh1.su/wp-content/plugins/pdfjs-viewer-shortcode/pdfjs/web/viewer.php?file=http%3A%2F%2Fu733006.s03.wh1.su%2Ffiles%2F2019%2F07%2Fp111.pdf';
          ifrm.setAttribute('style', 'z-index: 9999;width: '+width+'px; height: 500px; position: fixed; top: 100px; left: '+left+'px;');
          var close = document.createElement('button');
          close.setAttribute('type', 'button');
          close.innerHTML = 'Закрыть';
          close.onclick = function() {
                 document.body.removeChild(ifrm);
                 document.body.removeChild(close);
          }
          close.setAttribute('style', 'z-index: 9999;position: fixed; top: 100px; left: '+  (left+width+20) +'px;');
          document.body.appendChild(ifrm);
          document.body.appendChild(close);
}
</script>

Здесь в параметре ifrm.src нужно указать ссылку на pdf файл, но сначала указывается ссылка на pdf viewer (в данном примере он находится по адресу: “http://u733006.s03.wh1.su/wp-content/plugins/pdfjs-viewer-shortcode/pdfjs/web/viewer.php”, так как я устанавливал плагин “PDF.js Viewer Shortcode”, но можно этот pdf viewer выдернуть из плагина и разместить в нужное вам место на сайте) потом ставиться “?file=” и указывается адрес pdf файла, где все знаки “/” заменены на “%2F”, а двоеточие на “%3A” (в данном примере адрес pdf файла “http://u733006.s03.wh1.su/files/2019/07/p111.pdf”)

И код ссылки, которая вызывает загрузку скрита с pdf файлом:

<a href="#" style="color: green;" onclick="viewPDF (event);">Читать PDF файл</a>

Чтобы использовать JavaScript на сайте wordpress можно воспользоваться плагином CSS & JavaScript Toolbox (стараница плагина на “wordpress.org” – “ru.wordpress.org/plugins/css-javascript-toolbox/”)

Прикрепить скрипт к какой-нибудь записи: