Просмотр .pdf .xls и .doc файла прямо на сайте

Давеча столкнулся с необходимостью вставить просмотр .pdf файла прямо на сайте под CMS WordPress клиента (Прайс-лист).

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

Представленный ниже код аналогично позволит вывести и файлы .xls, .doc. Т.е. данное решение универсально.

Код не мой и свободно гуляет по сети. Смотрите на результат его работы.

Если файл не подгрузится, то отобразится соответствующее сообщение и ссылка на "Скачать". Т.е. в любом случае посетитель сайта получит информацию. Не подгрузиться может из-за периодических глюков обработки самим Google, либо при большом объеме файла ваш сервер может отдать ошибку.

Посетитель сможет листать страницы, если их несколько, приближать/удалять, а так же вывести в полноэкранном режиме.

Так или иначе, сделав возможность онлайн просмотра документа вы повысите юзабельность сайта, что скажется на поведенческих факторах. Подобное можно отнести к раскрутке сайта без ссылок: контент + юзабилити.

Переходим к внедрению просмотрщика pdf, xls и doc на ваш сайт. Открываем файл functions.php (лежит в папке с шаблоном на хостинге) и сразу после <?php переходим на новую строку, где вставляем следующий код:

//Просмотр pdf прямо на сайте
function pdf_viewer($attr, $url) {
    return '<iframe
                    src="http://docs.google.com/viewer?url=' . $url . '&embedded=true"
                    style="width:' .$attr['width']. '; height:' .$attr['height']. ';"
                    frameborder="0">Ваш браузер не поддерживает фреймы</iframe>';
}
add_shortcode('pdfview', 'pdf_viewer');

Сейчас мы создали шорткод. Чтобы отобразился файл pdf на сайте, необходимо ссылку на этот файл разместить внутри такого шорткода (вставляете в свою статью или на страницу):

[pdfview width="600px" height="500px"]http://mojwp.ru/wp-content/uploads/2014/09/iphones5S6Plus.pdf[/pdfview]

Обратите внимание где указана ссылка на файл. Так же здесь вы можете задать ширину (width) и высоту (height) блока, чтобы гармонично вписать в страницу.

Если высота и ширина у вас будет всегда одного размера, то можно избавить себя от подбора цифр. Модифицируем немного код просмотрщика:

//Просмотр pdf прямо на сайте
function pdf_viewer($attr, $url) {
    return '<iframe
                    src="http://docs.google.com/viewer?url=' . $url . '&embedded=true"
                    style="width: 600px; height: 500px;"
                    frameborder="0">Ваш браузер не поддерживает фреймы</iframe>';
}
add_shortcode('pdfview', 'pdf_viewer');

Соответственно, отображать на странице будем уже так:

[pdfview]http://mojwp.ru/wp-content/uploads/2014/09/iphones5S6Plus.pdf[/pdfview]

А теперь немного упростим себе жизнь. Если помните, то раньше уже научились добавлять в панель редактирования статьи свои кнопки. Статья Как выделить текст жирным, курсивом и подчеркиванием без стандартных тегов HTML. Теперь останется внедрить свою кнопку, которая будет выглядеть так:

QTags.addButton( 'pdf', 'PDF', '[pdfview width="600px" height="500px"]', '[/pdfview]');

Либо так, в случае с уже заданными параметрами высоты и ширины:

QTags.addButton( 'pdf', 'PDF', '[pdfview]', '[/pdfview]');

Соответственно, название шорткода pdfview вы можете заменить на свое в нужных местах кода. Аналогично и в названии ссылки панели форматирования. Это на случай, если вам понадобится отображать .xls или .doc.

На этом все. Побольше вам целевого трафика.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 18 комментариев
  1. Артём Черкасов (83 комм.) says:
    http://zarabotka.guru/

    Прикольно, закину в закладочки, вдруг пригодится =)

  2. Андрей (129 комм.) says:
    http://zarobitok.ru/

    Удобная штука, сделать скан сохранить в PDF и разместить на сайте и получится в некой мере слайдер. Виталий такой вопрос, на каких тематических площадках данное действие больше всего используется Вами или вообще?

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Мной впервые такое было опробовано. В начале статьи писал, что прайс-лист клиента разместил таким образом.
      Ранее обычно прайс просто ссылкой на скачивание был.
      А использовать можно на всех сайтах. Здесь могут быть не только прайсы, но и презентации товара, объектов, либо же услуг.

  3. helen (2 комм.) says:

    а у меня не получилось. вставила function pdf_viewer и сразу админка ВП перестает загружаться. лог нужно запрашивать, Поэтому не знаю что там. убираю функцию - начинает работать.

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Значит где-то что-то не так вставили. Рабочий пример видите на этой странице.
      Внимательно посмотрите куда вставляете код.

  4. helen (2 комм.) says:

    Спасибо! получилось! http://petergof.me/?page_id=177 🙂

  5. Антон (1 комм.) says:

    Благодарю!
    Отличное решение!
    Как раз удалил плагин, который отвечал за эту функцию и не знал, чем заменить.
    Развития вашему полезному сайту!

  6. Март (1 комм.) says:

    Не в курсе почему екселевский документ в книжкной ориентации отображается здесь как в альбомной?

  7. SergCasper (2 комм.) says:
    http://www.serg-casper.ru

    не хочет код вставляться ((

    • Яна (1 комм.) says:

      ГУгл докс не работают походу

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Если внимательно прочитаете статью, то сразу после примера есть абзац, в котором сказано об ошибках, возникающих в процессе использования.

      • SergCasper (2 комм.) says:
        http://www.serg-casper.ru

        Посмотрите аналог.сервис: Office Web Viewer.
        Пример и о сервисе у меня в статье:
        http://www.serg-casper.ru/prosmotr-xls-i-doc-faylov-dokumentov-office-pryam/

  8. trizna (1 комм.) says:

    Не работает.
    Пишет: "Предварительный просмотр недоступен"
    И пустое серое поле iframe.

  9. Роман (2 комм.) says:
    http:kraevedpol.ru

    Здравствуйте! Я вас хочу спросить, как сделать чтобы word-документы открывались на сайте? я нажимаю ссылку она скачивается а не открывается!

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Добрый.
      Вы пробовали способ, описанный в статье.

      • Роман (2 комм.) says:
        http://kraevedpol.ru

        Да пробовал. Что-то не получается с Word'ом

  10. Андрей Зенков (4 комм.) says:
    http://start-luck.ru

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

  11. сеошник (4 комм.) says:
    http://seoshnik.pro

    реально работает!
    Плагины лишние могут помимо полезных функций создать и дыру в безопасности, а тут так - работает!

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 14MB | MySQL:81 | 0,529sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html