Как вставить файл PDF в статью?



Как вставить файл PDF в статью

Как вставить файл PDF в статью

Как красиво вставить PDF-файл в статью сайта? Разные бывают ситуации, иногда возникает необходимость вставки полноценного PDF документа в статью. Это могут быть разные отчеты, презентации, книги, руководства, что угодно. Не всегда бывает возможно передать нужное содержание с помощью кода, иногда, надо оставить разметку оригинала. Вот тут и понадобится информация о том, как этот формат красиво разместить в статье.

Набрав поиск и посмотрев результаты, я увидел несколько решений этой задачи. Но, как-то не очень они подошли для реализации, не соответствовали всем требованиям, которые хотелось бы видеть. В одном случае, предлагалось реализовать вставку через код object, не слишком удобно, так как страница была слишком увеличена и для удобного чтения надо было проводить дополнительные настройки. Такой вариант может ещё и подойдет для книги, статьи или руководства, а вот для презентации с изображениями как то не очень.

Другой вариант делал красивый вывод статьи в полную ширину, но, для его реализации, надо было добавлять дополнительный код в файл function.php. Сложного в этом ничего нет, но, опять же, лишний код желательно избежать.

И тут я вспомнил, что есть старый добрый Гугл, в котором есть сервис для работы с документами. Не может быть, чтобы ребята не позаботились про удобный вывод и просмотр документов. Так и получилось, удобное, простое решение было найдено именно на этом сервисе.

Вставка PDF-файла в статью

Информация устарела, гугл перестал поддерживать такой способ вставки файла PDF. Ниже добавлен рабочий способ.

Проводим эксперимент в реальном времени.

Для начала нам нужно найти любой PDF-файл. Я не стал слишком мудрить и решил воспользоваться первым попавшимся PDF документом из сети. Вот эта ссылочка на объемное руководство: http://www.tryboi.com/ru/wp-content/uploads/2012/12/html5-rukovodstvo-razrabotchika.pdf. Вы, естественно, можете использовать любой другой, нужный вам документ.

Дальше мы идем на сервис Google Документы и наблюдаем вот такую картину:

Вставка PDF файла на сервис Google Документы

Вставка PDF файла на сервис Google Документы

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

Для нашего обозрения появились три ссылки:

Ссылки на PDF файл для вставки в статью

Ссылки на PDF файл для вставки в статью

1. Ссылка для почты и прочих сообщений. При переходе откроется окошко с нашим PDF-файлом.

2. Текст ссылки для вставки в статью. При нажатии будет открываться программа просмотра файла. Вот он пример моего файла:

Сылка на PDF документ

3. Вставляем программу для просмотра прямо в статью. Удобно, красиво, быстро загружается. То, что и требовалось получить:

Можно регулировать ширину и высоту для корректного отображения в тексте.

Как видим, ничего сложного в том, чтобы вставить файл PDF в статью нет. Безмерная благодарность ребятам из Гугла. Быстро, легко, удобно. :good:

Единственное, на что надо обратить внимание, это на размер файла, слишком большой файл будет довольно долго загружаться.

Вставка PDF-файла в статью с помощью плагина PDF Embedder

Плагин PDF Embedder

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

Название плагина PDF Embedder. Его легко найти через поиск плагинов.

Скачали, установили, активировали.

В админке, в пункте Настройки, появляется новый пункт с названием PDF Embedder. Можно перейти и ознакомиться с настройками:

Настройка плагина PDF embedder

Настройки плагина PDF embedder простые и понятные:

  • Указываем ширину и высоту окошка просмотра нашего файла.
  • Выбираем место, где вы хотите видеть панель управления просмотром: сверху, снизу, и сверху и снизу.
  • Выбираем поведение панели управления — при наведении мышкой или видимость всегда.
  • Кнопка для скачивания реализуется только в платной версии плагина. Да оно нам и не обязательно.
  • Дальше, надо только загрузить свой файл PDF в библиотеку медиафайлов. Обязательное условие — название файла должно быть только латинскими буквами.
  • В нужном месте статьи вставляем этот файл через панель Вставить медиафайл. Также, как вставляем обыкновенную картинку.
  • Автоматически сформируется нужный шорткод и на странице записи можно просмотреть нужный PDF-файл.

Всё. Нужный результат получен.  :good:

Всем удачи и нестандартных творческих решений!  :bye:

@ ПОДПИСАТЬСЯ НА НОВОСТИ САЙТА

Этот сайт работает на быстром, надёжном, не дорогом хостинге GIGAHOST

Поделиться:

Комментарии к «Как вставить файл PDF в статью?»

  1. Наталья:

    Статья хорошая, и я уж было обрадовалась,что наконец-то проблема с пдф-ками будет решена, ан нет. Не нашла я гугл документы ни по вашей ссылке ни сама((( :unsure:
    Выходит ошибка 400.»Запрошенный URL не найден на этом сервере. Дайте верную ссылку, пожалуйста!

    1. Наталья, благодарю за подсказку. Да, действительно, Гугл перестал поддерживать такую возможность. В статью добавил другой рабочий способ.

      Удачи! :bye:

  2. Сергей:

    Большое спасибо, замечательное решение. Скажите пожалуйста, а можно ли как-то подправить получаемую строку чтобы задать больший масштаб pdf-ки???

     

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

      Удачи!  :bye:

  3. Да, действительно дело в ссылке на сам файл.

    Пробовал другие файлы на яндекс диск и майл ру. Копирую с них ссылку и вставляю в вейвер. Тоже открывается не то, что надо, а какие-то коды. В плане проверить на Хостингере и Макхост, но уже думаю. что какая-то связь может мешать с компьютера. Вирусов вроде нет, работаю с Вебером, правда брендмауэр немного стал переусердствовать. Систему недавно чистил клинером, ошибки в реестре не найдены.

    Буду искать дальше. :unsure:

    1. Алексей, ещё несколько слов по теме.

      Тут дело не столько в ссылке, сколько в самом PDF файле. Скорее всего, вы его не слишком корректно сформировали. Я бы поискал другой способ его подготовки.

      Это первое. Второе — для выяснения причины корявого отображения вьювера, имеет смысл максимально сузить область поиска. Делается просто. Берём ссылку на любой другой PDF файл, да хоть из этой статьи, и вставляем в Гугл Док, получаем ссылку, и пробуем вставить в статью на сайте.

      Если кракозяблы — начинаем менять шаблон, или протестировать сайт на чистом Вордпрессе на локальном сервере.

      Если отображается нормально — ищем другой способ формирования PDF документа.

      А есть, вообще, другой вариант для реализации этой задачи. Если вам, действительно, дорога память о сослуживце и вы хотите донести важную и полезную информацию другим, то и оформлять её надо соответственно. Сложновато и неудобно читать тест с фотографии низкого качества. Тут нужен хороший шрифт, большие заголовки, хорошие картинки с пояснениями, понятная навигация по тексту. Тут, либо отдельный сайт делать, либо выделить на своём ресурсе отдельный раздел. А дальше — набирать текст вручную, делать фотографии, форматирование.  :wacko:

      Работа хлопотная и времени много займёт, зато и результат будет совсем другим. Если уж делать, то делать хорошо. Плюс уникальный контент. Плюс, ещё раз повспоминать, пережить дорогие события. Тут много ещё чего хорошего может получиться.

      Удачи!  :bye:

  4. Знаешь, wwdiz. Нет у меня ответа на твой вопрос о том, что там сложного. Просто вставляю … видимо не правильно, или еще где-то ошибаюсь. Может руки криво работают или прога какая глючит в компе.

    Как пример,  не получается установить  личную граватарку на свой блог для комментов с самого начала его создания, а это уже второй месяц. Или другой пример: этот ответ на твой вопрос почему-то удалось записать только с четвертой попытки. 2 первых были вчера ночью, третья сегодня утром: не открывался редактор для вставки текста.

    Все время возникают какие-то вопросы, требующие преодоления, разбираюсь сам и обращаюсь за помощью к специалистам.

    Весь процесс своей работы описал в статье на блоге здесь: http://silver-vek.ru/kak-ispolzovat-servis-google-viewer-dlya-vstavki-fajlov-formata-pdf-na-sajt-3-ya-glava-dokumentalnoj-knigi-v-f-lata.html

    Ты подскажешь мне? :mail:

    Для простоты можешь  ответить комментом. :yes:

     

    1. Алексей, прочитал статью, подробно, доходчиво расписано. :good:

      На мой взгляд, дело в ссылке на сам файл. Когда вставляете свою ссылку в сервис Google Docs и нажимаете Generate Link, внизу есть кнопочка Чтобы просмотреть сейчас, нажмите здесь. Вот тут то и можно посмотреть, насколько корректно будет отображаться ваш документ.

      У вас есть эта кнопочка в статье на картинке. Гугл отображает то, что вы ему дадите. Не получится с Диска, заливайте на хостинг, или на другое облако.

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

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

      Удачи! :bye:

  5. Спасибо за информацию.

    У меня не получается такая вставка, пришлось воспользоваться другим способом. Нельзя ли подробнее изложить вставку ссылки на пдф документ в статью?

    1. 😥 Алексей, да что там может быть сложного? Просто вставляете код из третьего окошка в нужное место в статье. Естественно, в невизуальном редакторе. Вот и вся хитрость.

      Удачи! :bye:

  6. Спасибо, отличное решение проблемы, облегчил мне задачу в работе.

Добавить комментарий

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

:bye: 
:good: 
:za-nas: 
:wacko: 
:yahoo: 
:skromnost: 
:heart: 
:rose: 
:-) 
:yes: 
:cry: 
:mail: 
:unsure: 
;-)