Разное

Pdf просмотр на сайте: Как вывести содержимое PDF на странице сайта

Содержание

Как вывести содержимое PDF на странице сайта

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



<iframe src="https://docs.google.com/viewer?url=http://RealAdmin.ru/assets/Instruction.pdf&embedded=true" 
style="width: 600px; height: 600px;" frameborder="0">Ваш браузер не поддерживает фреймы</iframe>


Результат работы:




Параметры:

  • «https://RealAdmin.ru/assets/Instruction.pdf» — полный путь к pdf файлу, который требуется вывести.
  • «width: 600px» — ширина фрейма для вывода.
  • «height: 600px» — высота фрейма для вывода.


Таким образом можно добавить на сайт просмотр содержимого PDF файла. При этом, вывод не зависит от браузера или движка. Сам сервис называется «Google Docs Viewer» и поддерживает вывод многих форматов документов. Вот перечень самых распространенных: doc, docx, odt, pdf, rtf, ppt, pptx.




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

Andy Si

23 мая 2014 г.

52804

Просмотр PDF на веб-странице без Flash

Я работаю над веб-сайтом, который должен встроить еженедельный файл PDF на страницу.

Мы не хотим использовать Flash, так как веб-сайт должен поддерживать кросс-браузеры(например, Android).

Я рассмотрел следующую тему, но она не соответствует моей цели, так как некоторые браузеры не поддерживают HTML5.

Просмотр PDF на веб-странице без использования Flash

Теперь у меня есть три варианта, и я задаюсь вопросом, какой из них лучше.

1.Use Google Doc Viewer-проблема google doc viewer в том, что разрешение PDF не может быть слишком высоким.

В результате наше содержание PDF становится неясным.

2. OpenLayers — мы должны преобразовать наш файл PDF в изображение.

3. DimViewer -это не инструмент с открытым исходным кодом.

Если у кого-то есть подобный опыт, добро пожаловать.

javascript

Поделиться

Источник


jim t    

22 августа 2012 в 13:54

3 ответа


  • Просмотр PDF на веб-странице без использования Flash

    У меня есть N-Pages PDF, связанный на моей веб-странице. Я хочу иметь возможность просматривать PDF со стрелками next и prev, номерами страниц и т. д. Я хочу иметь возможность просматривать PDF без использования какого-либо плагина Flash. Я также хочу нормализовать поведение браузера, поэтому я не…

  • Просмотр PDF файлов на веб-странице без загрузки?

    У меня есть куча файлов pdf, которые я хочу отобразить на веб-странице (например, google books). Я не хочу, чтобы их можно было скачать или хотя бы помешать этому. Существуют ли какие-либо открытые решения soruce? HTML5, Javascript?



1

Используйте Google Doc Viewer раньше, да, у него есть некоторые ограничения, такие как zoom in/out.

Если у вас больше опыта работы с открытым исходным кодом, то OpenLayers -хороший вариант.

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

Поделиться


user1619962    

23 августа 2012 в 15:08



0

Вы можете посмотреть объявление pdf.js .

Текущий Firefox представляет это как свой собственный просмотрщик PDF.

Поделиться


Sirko    

22 августа 2012 в 13:57


Поделиться


Gilsham    

22 августа 2012 в 23:26


  • Обнаружение flash на веб-странице

    Я хочу программно обнаружить flash на веб-странице. Из моего поиска я понял, что мне нужно разобрать код и найти теги встраивания, которые имеют атрибут application/x-shockwave-flash. И это все? Или есть другие способы встроить flash в веб-страницу? Спасибо.

  • Предварительный просмотр сгенерирован PDF на странице

    Я генерирую документ PDF в коде с помощью конвертера Winnovative HTML to PDF, и я хотел бы просмотреть документ в контейнере на странице. Это приложение предназначено для интрасети, и у всех конечных пользователей установлена последняя версия Reader, поэтому совместимость не является проблемой….


Похожие вопросы:

кроссбраузерное и кросс-платформенное видео на веб-странице без flash

У меня есть видеофайл .mov, и мне нужно просмотреть его на веб-странице. Он должен быть просмотрен на Windows, Mac, iPhone и в этом списке браузеров: IE7, IE8, IE9, Firefox, Chrome, Opera, Safari. Я…

отображение pdf на веб-сайте

Мы хотим отобразить pdf-файл на веб-странице. Из того, что я могу придумать, я вижу два возможных решения: отображение файла с помощью какого-то считывателя pdf(возможно, в flash?) или…

ASP.net: отображение PDF на веб-странице asp.net

Пользователь нажимает на кнопку ссылки, и она направляет его к url, который динамически генерируется в файле pdf. Браузер предложит пользователю либо сохранить его, либо открыть. Я хочу знать, можно…

Просмотр PDF на веб-странице без использования Flash

У меня есть N-Pages PDF, связанный на моей веб-странице. Я хочу иметь возможность просматривать PDF со стрелками next и prev, номерами страниц и т. д. Я хочу иметь возможность просматривать PDF без…

Просмотр PDF файлов на веб-странице без загрузки?

У меня есть куча файлов pdf, которые я хочу отобразить на веб-странице (например, google books). Я не хочу, чтобы их можно было скачать или хотя бы помешать этому. Существуют ли какие-либо открытые…

Обнаружение flash на веб-странице

Я хочу программно обнаружить flash на веб-странице. Из моего поиска я понял, что мне нужно разобрать код и найти теги встраивания, которые имеют атрибут application/x-shockwave-flash. И это все? Или…

Предварительный просмотр сгенерирован PDF на странице

Я генерирую документ PDF в коде с помощью конвертера Winnovative HTML to PDF, и я хотел бы просмотреть документ в контейнере на странице. Это приложение предназначено для интрасети, и у всех…

ASP.NET просмотр PDF на веб-странице

Я пытаюсь поместить документ pdf на веб-страницу a. Но вместо того, чтобы просматривать это на веб-странице, когда эта страница называется, она спрашивает, хотим ли мы сохранить/загрузить, а затем…

Хотите показать имя pdf на веб-странице без его расширения

Я хочу показать загруженный pdf на веб-странице. Имя pdf происходит из базы данных с timestamp. Как показать только это имя pdf без timestamp и расширения? Вот мой код, но он не генерирует. ..

PDF просмотр и аннотирование с комментариями на веб-странице с помощью angular

Я могу визуализировать свой PDF на веб-странице, используя pdf.js в Angular. Мне также нужно аннотировать PDF, захватывать аннотированный текст и предоставлять комментарии, а также сохранять PDF на…

Как вставить документ PDF (пдф) в страницу сайта

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

PDF на сайт

C использованием элемента embed


<embed src="ссылка файла pdf" />

C использованием embed через элемент object

Спецификация HTML 4.0 рекомендует использовать тег <object> для загрузки внешних данных вместо тега <embed>, поэтому наилучшим вариантом будет поместить <embed> внутрь контейнера <object>.


<object><embed src="ссылка файла pdf" /></object>

С использованием тега iframe


<iframe src="ссылка файла pdf"></iframe>

С использованием сервиса Google Docs Viewer (через iframe)

UPDATE Сервис Docs Viewer уже не поддерживается Гуглом, однако встраиванием pdf-файла можно пользоваться до сих пор. Не работает с HTTPS сайтами!

Нужно закодировать URL файла pdf в ASCI и вставить закодированную ссылку в конструкцию.


<iframe src="http://docs.google.com/viewer?url=[URL]&embedded=true"></iframe>

// Пример //
1. Ссылка на документ - http://www.apsolyamov.ru/files/pdf_test.pdf
2. Закодированная ссылка - http%3A%2F%2Fwww.apsolyamov.ru%2Ffiles%2Fpdf_test.pdf
3. Общая конструкция — <iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fwww.apsolyamov.ru%2Ffiles%2Fpdf_test.pdf&embedded=true"></iframe>

С использованием сервисов публикации документов

Требуется регистрация. После загрузки файла на сервер сервиса необходимо получить код для вставки документа пдф на сайт (через iframe). Прокрутка поддерживается.

С использованием Google Drive

Требуется авторизация.

1. Откройте папку с документом на Гугл диске.
2. Выделите нужный файл пдф и нажмите значок глаза («Предварительный просмотр»).

3. Далее, в правом верхнем углу дополнительные опции (три точки) и «Открыть в новом окне».

4. Снова в правом верхнем углу дополнительные опции (три точки) и «Встроить».

5. Откроется окно с кодом для встраивания. Копируйте и вставляйте на страницу сайта. Ширина и высота фрейма по вкусу.

WordPress PDF Лучшие 8 Плагинов Для Просмотра Файлов

Uncategorized

access_time

27 февраля, 2019

hourglass_empty

4мин. чтения

Несмотря на популярность PDF, WordPress по-прежнему не поддерживает встраивание PDF-файлов. К счастью, для этого есть плагин.

По умолчанию WordPress будет отображать PDF-файлы в виде ссылок для загрузки в ваших сообщениях. Это означает, что ваши посетители должны будут покинуть вашу веб-страницу, чтобы прочитать файл. Мы уверены, что вы бы предпочли оставить их на своей странице, верно?

Установка плагина поможет. Но вскоре вы столкнётесь с другой проблемой: «Какой плагин WordPress для просмотра PDF лучше всего установить?» С огромным выбором доступных плагинов WordPress выбрать правильный вариант будет непростой задачей.

К счастью, в этой статье у нас есть 8 лучших плагинов для просмотра PDF для WordPress.

Этот плагин имеет более 100 000 активных установок. Это означает, что он довольно популярен среди пользователей WordPress. Это не удивительно, поскольку он работает с простым методом перетаскивания. PDF Embedder использует JavaScript для встраивания файлов PDF, обеспечивая его гибкость при отображении документов.

Если бесплатной версии недостаточно, вы можете получить премиум-версию:

  • Есть кнопка загрузки
  • Переход на конкретный номер страницы
  • Получение полностью функциональных гиперссылок
  • Есть запись на общее количество загрузок и просмотров.
  • Есть полноэкранный режим.

Чтобы использовать этот плагин, войдите в свою панель управления WordPress и перейдите в меню плагинов. Найдите PDF Embedder, затем установите и активируйте его.

Google Doc Embedder поддерживает множество форматов файлов, включая PDF. Этот плагин имеет более 80 000 активных установок и совместим с WordPress версии 3.5 или выше.

Установка этого плагина позволяет напрямую встраивать файлы PDF. Как следует из названия, он опирается на Google Docs Viewer. Как только файлы загружены, вы можете сделать их доступными для общественности. Этот плагин также может переводить ваш документ с привлечением большего количества людей.

Следующий плагин — проверенный временем WordPress PDF Viewer. Последнее обновление произошло четыре года назад. Несмотря на это, он надёжен, имеет более 20 000 активных установок и имеет рейтинг 4 звезды. Отзывы пользователей говорят сами за себя.

Этот плагин использует JavaScript, предоставляя пользователям хороший опыт чтения. Легко перемещайтесь по страницам, масштабируйте, добавляйте закладки и многое другое! Вы также можете искать по ключевым словам.

Чтобы использовать плагин, войдите в WordPress, найдите PDF Viewer в меню плагина и активируйте его. Не забудьте зайти в настройки и установить PDF Viewer по умолчанию. Используйте шорткод [pdfviewer]… [/ pdfviewer] при создании постов.

Если вы хотите, чтобы ваши PDF-файлы выглядели привлекательно, этот плагин для вас. Это как флипбук с хорошей анимацией! Производитель плагинов является экспертом в области адаптивных цифровых публикаций. Это означает, что ваши посетители могут получить ценную информацию с вашего сайта в прекрасном формате. Плагин тоже регулярно обновляется!

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

На заметку: самый большой размер файла, который вы можете загрузить без облака в Flowpaper, составляет 15 МБ. Для обычных документов этого будет достаточно.

Начать использовать этот плагин легко. После установки плагина активируйте его. Затем используйте шорткод всякий раз, когда вы хотите опубликовать свой контент. Код [flipbook pdf = ”https://flowpaper.com/Paper.pdf”]

Не волнуйтесь, название может быть сложным, но плагин определённо таковым не является! Он смешивает просмотрщик Mozilla PDF.js с вашими сообщениями для отображения страниц в PDF. Более 10.000 активных установок от пользователей WordPress убедительно указывают на то, что этот плагин будет надёжным выбором.

Этот плагин имеет набор функций для расширения возможностей вашего сайта WordPress. Особенности:

  • Настраиваемые кнопки
  • Расширенный поиск
  • Защита паролем
  • Расширенное масштабирование
  • Подходит для мобильных устройств
  • Многое другое

Самым большим преимуществом этого плагина является простота использования. Vanilla PDF Embed имеет более 10.000 активных установок, что указывает на знак качества!

Этот плагин предлагает настройку, аналогичную другим плагинам. Вы можете настроить параметры PDF, такие как высота, вес, заголовок и управление на встроенном фрейме.

После загрузки файлов в медиатеку необходимо ввести URL-адрес страницы вложения в визуальный редактор WordPress в отдельной строке. Тогда файлы будут встроены в пост. Но это не будет работать, если файлы размещены на других сайтах. Они могут быть размещены только в медиатеке WordPress.

Для этого загрузите vanilla-pdf-embed.php в каталог/wp-content/plugins/, затем активируйте плагин, который вы установили.

DK PDF — это плагин PDF для WordPress, известный своей кнопкой пост-конвертации, которая конвертирует страницы в PDF-файлы.

Этот плагин приглашает вас поиграть с настройками. Персонализируйте кнопку, внешний вид PDF-файлов и заголовок файлов во вкладках DK PDF Settings.

При настройке вкладки Кнопка PDF вы можете изменить текст кнопки, введя то, что вы хотите, в пустое поле. Вы можете установить следующие типы записей: пост, страницы, вложение и документ. Затем опция «Действие» позволяет вашим документам открываться в новом окне или загружаться. Наконец, установите желаемое выравнивание и укажите, будет ли кнопка находиться до или после содержимого.

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

Если обмен идеями и подобным контентом является ключевым для вашего проекта, этот плагин идеально подходит для вас. Этот плагин позволяет вашим посетителям создавать PDF-файлы ваших сообщений в блоге. Он использует класс TCPDF для рендеринга, что делает его надёжным плагином.

WP Advanced PDF имеет много бесплатных функций:

  • Пользовательские шрифты для содержимого PDF и его заголовка.
  • Пользовательский стиль пули
  • Грань и выравнивание
  • Водяной знак
  • Название блога по умолчанию для PDF-файлов

Если вы хотите использовать плагин: найдите, установите и активируйте.

Заключение

Теперь, когда у вас есть список, из которого можно выбрать плагин WordPress для просмотра PDF, вы можете выбрать тот, который вам больше подходит, простой просмотрщик или анимированный флипбук. Продолжайте делиться информацией со всем миром, и не позволяйте никаким маленьким препятствиям останавливать вас!

Как добавить возможность просмотра PDF файлов в WordPress

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

Зачем и когда вам нужен просмотрщик PDF в WordPress?

WordPress не встраивает PDF файлы в записи блога так, как он это делает с аудио и видео. Он просто добавляет файл в виде ссылки для скачивания.

Это означает, что пользователям придется уходить с вашей страницы для того, чтобы просмотреть PDF файл. Многие из этих пользователей так и не возвращаются на ваш сайте, что уменьшает количество просмотров страниц и как следствие — вовлеченность пользователей.

Однако, если вы хотите просто показать PDF без необходимости покидать ваш сайт, тогда стоит воспользоваться просмотрщиком PDF на вашем WordPress сайте.

PDF Viewer встроит PDF прямо в запись или на страницу. Пользователи при этом смогут читать, просматривать, скачивать и даже распечатывать эти файлы, находясь на вашем сайте.

Установка и настройка PDF Viewer в WordPress

Первым делом вам необходимо установить и активировать плагин PDF Viewer. После активации переходим в Настройки » PDF Viewer для настройки плагина.

Плагин PDF Viewer позволит вам задавать высоту и ширину просмотрщика. Эти параметры можно изменить, если вам кажется, что контейнер PDF viewer на странице слишком широкий или же узкий.

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

Встраиваем PDF файлы с помощью PDF Viewer в WordPress

Добавить PDF файл в запись блога очень просто. Сначала нужно загрузить PDFку с помощью медиазагрузчика. Это можно сделать, если создать новую запись или перейти в редактирование существующей, а затем нажать на кнопку ‘Добавить медиафайл’ над редактором записей.

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

Далее, вставляем эту ссылку в шорткод [pdfviewer] [/pdfviewer]. Вот так:

[pdfviewer]http://www.example.com/wp-content/uploads/2016/01/myebook.pdf[/pdfviewer]

Вот так PDF Viewer выведет ваш файл в записи WordPress.

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

Для отображения файлов PDF Viewer использует PDF.js от Mozilla. Он отлично рендерит PDF файлы, и при этом имеет в наличии стандартный набор инструментов для прокрутки, поиска, перехода между страницами, печати и скачивания PDF файлов.

Мы надеемся, что эта статья помогла вам добавить PDF Viewer в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]

Rating: 4.6/5 (5 votes cast)

Как вывести PDF на WordPress

Многие компании хранят документы с конфиденциальными данными клиентов. Вы, конечно, не будете публиковать эти данные в небезопасном формате.

Можно загрузить PDF-файл на WordPress-сайт и указать ссылку на него. Но инструмент просмотра PDF-документов обеспечивает более удобную работу.

С его помощью пользователи смогут просматривать документы, как на электронной книжке: переворачивать страницы, увеличивать / уменьшать их и сохранять на компьютере.

Рынок решений для просмотра PDF на сайтах WordPress достаточно насыщен. Но наиболее эффективным является сервис Scribd.

Scribd — это сервис подписки. Он предназначен для распространения книг, документов, аудиокниг, журналов и новостей.

Как издатель вы можете бесплатно загружать любой контент, даже документы в формате PDF. А также контролировать, кто может просматривать эти файлы.

Чтобы упростить задачу, Scribd предлагает код для встраивания на сайт каждого загружаемого файла и инструментами для отображения PDF на WordPress.

Мы будем использовать Scribd для отображения PDF на сайте. Это самый простой способ разместить PDF-документы на WordPress. Он позволяет разместить несколько PDF-файлов на одной странице, тогда как большинство плагинов — нет.

Как использовать этот инструмент:

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

Кнопка «Start Your Free 30 Days» предназначена для подписчиков, а не издателей. Поэтому вам не нужно предоставлять свои платежные реквизиты.

В нижней части панели авторизации найдите ссылку: «New to Scribd? Sign Up».

Вы можете зарегистрироваться с помощью Facebook или Google. Нажмите на кнопку «Sign Up«, когда закончите процесс регистрации.

Здесь начинается процедура, которая смущает людей. Кажется, что Scribd требует от вас произвести оплату услуг, но это не так. Пропустите этот шаг, вернувшись на главную страницу сервиса. Это можно сделать, нажав на логотип Scribd, расположенный в верхнем левом углу.

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

Чтобы загрузить PDF-файл, нажмите кнопку «Upload», расположенную в правом верхнем углу.

Нажмите на кнопку «Select Documents To Upload». Откроется проводник для выбора файлов.

Когда файл загружен в Scribd, укажите дополнительную информацию:

  • Заглавие.
  • Описание.
  • Права доступа.

Убедитесь, что флажок «Make this document private» снят. Документ должен быть общедоступным, чтобы его можно было встроить в WordPress -сайт.

На странице «Share it!» выберите опцию «Embed», чтобы создать код для встраивания.

Убедитесь, что выбрали формат WordPress. После этого укажите:

  • Размер (рекомендуется auto).
  • Стартовую страницу.
  • И другие опции.

Скопируйте код для встраивания.

Откройте страницу или запись, в которую необходимо встроить PDF-файл. Перейдите на вкладку «Текст» во встроенном редакторе и вставьте код Scribd.

После предварительного просмотра или публикации записи вы должны увидеть на своем сайте PDF-файл.

Читателям будут доступны опции для увеличения / уменьшения масштаба, перехода на другие страницы, загрузки, обмена и переключения в полноэкранный режим.

Вот несколько плагинов WordPress для просмотра PDF:

  • PDF Embedder;
  • WP Booklet;
  • Vanilla-pdf-embed;
  • Google Doc Embedder.

Публикуя PDF-файлы на WordPress, подумайте об удобстве взаимодействия пользователей с интерфейсом средства просмотра. Также необходимо защитить PDF-файлы, если это требуется.

Многие документы читаются намного лучше именно с помощью средства просмотра PDF для WordPress. Поэтому используйте его чаще!

Данная публикация является переводом статьи «How to Display PDF in WordPress – Your Own WordPress PDF Viewer» , подготовленная редакцией проекта.

Как загружать и вставлять PDF файлы в WordPress?

👍 Научим создавать сайты на WordPress бесплатно за 19 уроков. Подробнее →

Хотите узнать, как быстро и легко загружать и отображать PDF-файлы в записях и страницах WordPress?

Загрузка и встраивание медиаконтента, такого как изображения и видео, является очень простым процессом в WordPress. Работа с PDF-файлами, однако, заставляет прилагать немного больше усилий, чтобы загрузить и корректно отобразить их на страницах сайта.

PDF является одним из самых популярных форматов файлов. Их размер и гибкость делают их удобными для обмена в интернете. Хотя PDF также легко загрузить на сайт WordPress, как и другие файлы, но встроить их или отобразить на веб-сайте не совсем просто.

Давайте рассмотрим несколько способов, которые помогут вам облегчить этот процесс.

Стандартный способ загрузки PDF-файлов в WordPress

Этот способ загрузки PDF на ваш сайт WordPress является самым простым.

Подобно тому, как вы загружаете фотографии, вы можете выбрать и загрузить PDF-файлы, используя загрузчик мультимедиа по умолчанию в WordPress.

Шаг 1. Откройте уже существующую запись/страницу или создайте новую (в админ-разделе Записи -> Добавить новую).

Шаг 2. На панели инструментов редактора нажмите кнопку Добавить медиафайл.

Шаг 3. Вы увидите окно загрузки WordPress. На вкладке Загрузить файлы нажмите кнопку Выберите файлы или перетащите ваш PDF-файл в это окно.

WordPress начнет загрузку PDF-файла, и вы увидите значок предварительного просмотра вашего PDF-файла после его полной загрузки.

Не беспокойтесь о заполнении заголовка и описания файла PDF.

Важно! Если загрузка не началась, выдав Ошибка HTTP, рекомендуем ознакомится со следующим руководством для ее исправления.

Шаг 4. Нажмите на кнопку Вставить в запись, после чего WordPress добавит ссылку на загруженный PDF-файл в вашу запись/страницу, которую вы редактируете. После обновления записи/страницы посетители вашего сайта должны иметь возможность перейти по ссылке для просмотра и загрузки PDF-файла в своем браузере.

Загрузка PDF-файлов с помощью медиабиблиотеки

Вы также можете использовать медиабиблиотеку в WordPress, чтобы загрузить PDF-файл и получить на него прямую ссылку.

Шаг 1. На панели управления WordPress нажмите кнопку Медиафайлы -> Добавить новый.

Шаг 2. Теперь вы можете нажать на кнопку Выберите файлы, чтобы выбрать PDF, который хотите загрузить, или перетащить его в выделенной области загрузки.

После того, как файл будет загружен, он появится в Медиабиблиотеке вашего сайта.

Добавление PDF-файлов с помощью редактора Gutenberg

Для тех, кто использует новый редактор Gutenberg на своем сайте WordPress, обратите внимание, что вы не сможете выбрать PDF-файлы при нажатии на кнопку Загрузить из блока Изображение.

Вместо этого вам нужно будет выбрать тип блока Файл, прежде чем вы сможете выбрать и загрузить PDF-файл.

Шаг 1. Вставьте блок Файл, используя кнопку Добавить блок.

Шаг 2. Нажмите на кнопку Библиотека файлов и перейдите на вкладку Загрузить файл, чтобы выбрать и загрузить PDF.

Шаг 3. Нажмите на кнопку Выбрать, чтобы вставить ссылку на PDF-файл внутри блока.

Пользователи вашего сайта смогут открыть загруженный PDF-файл или сохранить его.

Плагины WordPress для встраивания PDF-файлов

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

Встраивание PDF-файлов запись/страницу поможет вашим пользователям просматривать содержимое PDF-файлов на вашем сайте.

1. Плагин PDF Embedder

PDF Embedder является одним из самых популярных плагинов для вставки PDF внутрь записей или страниц.

Плагин также поставляется со своей собственной страницей настроек, где вы можете задать общие настройки, такие как ширина и высота в соответствии с вашими требованиями.

Шаг 1. После установки и активации плагина перейдите в своей панели управления в раздел Настройки -> PDF Embedder и настройте его в соответствии со своими требованиями.

Шаг 2. После установки плагина попробуйте загрузить и вставить PDF-файл с помощью загрузчика мультимедиа (кнопка Добавить медиафайл на панели инструментов редактора). В итоге вы увидите специальный шорткод, добавленный плагином.

Шаг 3. Теперь в пользовательской части сайта вы увидите содержимое загруженного PDF-файла.

2. Плагин Embed Any Document

Плагин Embed Any Document позволяет загружать и вставлять на WordPress-сайт файлы нескольких форматов, включая и PDF. Плагин использует Google Docs Viewer и Microsoft Office Online для отображения встроенных файлов. Кроме PDF, вы можете легко вставлять и отображать документы Microsoft Word, Excel и PowerPoint.

Давайте посмотрим, как загрузить и отобразить PDF-файл.

Шаг 1. Установите и активируйте плагин. Для успешного решения задачи он не требует каких-либо настроек. Параметров по умолчанию вполне будет достаточно. На панели инструментов редактора WordPress вы увидите кнопку Add Document, добавленную плагином.

Шаг 2. После ее нажатия вы сможете загрузить PDF-файл (кнопка Upload Document) или добавить с другого URL (Add from URL). Выберите первое, и плагин будет использовать стандартный загрузчик мультимедиа для загрузки PDF-файла.

Шаг 3. После вставки загруженного файла (кнопка Insert), вам будет предложено изменить его параметры (размер, доступность ссылки на файл и т.д.)

После нажатия кнопки Insert плагин вставит необходимый шорткод для PDF файла в редакторе записи.

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

Мне нравится21Не нравится

Если Вам понравилась статья — поделитесь с друзьями

Лучший способ встраивать PDF-документы в веб-страницы

Узнайте, как встраивать содержимое со страниц PDF в свой веб-сайт с помощью новой программы просмотра Adobe PDF и предложить читателям улучшенные возможности чтения PDF-файлов.

Опубликовано в: PDF — Embed

Как встроить PDF-документ на свой веб-сайт для просмотра в реальном времени? Один из популярных вариантов — загрузить PDF-файл в онлайн-хранилище, например на Google Диск или Microsoft OneDrive, сделать файл общедоступным, а затем скопировать и вставить код IFRAME, предоставленный этими службами, чтобы быстро встроить документ на любой веб-сайт.

Вот пример кода встраивания PDF-файла для Google Диска, который работает во всех браузерах.

    

Это наиболее распространенный метод встраивания PDF-файлов — он прост, он просто работает, но недостатком является то, что у вас нет контроля над тем, как PDF-файлы представлены на ваших веб-страницах.

Если вы предпочитаете предлагать более индивидуализированные и захватывающие возможности чтения PDF-файлов на своем веб-сайте, ознакомьтесь с новым Adobe View SDK.Это часть платформы Adobe Document Cloud, но не стоит ни копейки.

Вот некоторые уникальные особенности, которые выделяют это решение для встраивания PDF:

  • Вы можете добавить инструменты аннотации в программу просмотра PDF. Любой желающий может добавить аннотацию к встроенному PDF-файлу и загрузить измененный файл.
  • Если вы встроили длинный документ с несколькими страницами, читатели могут использовать просмотр эскизов для быстрого перехода к любой странице.
  • Средство просмотра PDF-файлов можно настроить так, чтобы скрыть параметры загрузки и печати файлов PDF.
  • Имеется встроенная аналитика, чтобы вы знали, сколько людей видели ваш PDF-файл и как они взаимодействовали с документом.
  • И моя любимая функция ViewSDK — это встроенный режим встраивания. Позвольте мне объяснить это подробно.

Отображение PDF-страниц в виде изображений и видео

В встроенном режиме, уникальном для Adobe View SDK, все страницы встроенного PDF-документа отображаются одновременно, поэтому посетителям вашего сайта не нужно прокручивать другой документ с помощью родительская веб-страница. Элементы управления PDF скрыты от пользователя, а страницы PDF смешиваются с изображениями и другим содержимым HTML на вашей веб-странице.

Чтобы узнать больше, посмотрите эту живую демонстрацию — здесь PDF-документ содержит 7 страниц, но все они отображаются одновременно, как одна длинная веб-страница, что обеспечивает плавную навигацию.

Как встраивать PDF-файлы с помощью Adobe View SDK

Для использования View SDK требуется несколько дополнительных шагов. Перейдите на сайт adobe.io и создайте новый набор учетных данных для своего веб-сайта. Обратите внимание, что учетные данные действительны только для одного домена, поэтому, если у вас несколько веб-сайтов, вам потребуется другой набор учетных данных для них.

Затем откройте игровую площадку и сгенерируйте код для встраивания. Вам необходимо заменить clientId своим набором учетных данных. url в примере кода должен указывать на расположение вашего PDF-файла.

  

Дополнительные примеры можно найти в официальной документации и в репозитории кода.

Легко вставляйте PDF-файлы на свой веб-сайт с помощью Adobe PDF Embed | Бен Вандерберг

Поразительно, сколько информации у нас сегодня хранится в формате PDF. По данным ассоциации PDF, ежегодно создается около 2,5 триллиона PDF-файлов, что составляет 6% всего Интернета. Однако, как веб-разработчик, PDF-файлы на веб-сайте могут представлять множество проблем:

  • Условия просмотра сильно различаются для разных пользователей и устройств, поскольку они зависят от программы просмотра PDF-файлов .Независимо от того, встроено ли оно в веб-браузеры или в бесплатные онлайн-библиотеки, одни программы просмотра лучше других. Adobe Acrobat Reader обычно является универсальным стандартом для правильного просмотра PDF-файлов.
  • Мне становится трудно включать PDF-файлы в остальную часть моего веб-сайта . Чаще всего PDF-файлы побуждали пользователей загружать PDF-файлы на свои устройства.
  • Конвертировать PDF в HTML сложно и ненадежно . Если я хочу представить содержимое внутри веб-страницы в формате PDF, я часто могу преобразовать его в PDF, чтобы упростить встраивание.
  • Мне не видно, как мой посетитель просматривает эти PDF-файлы . Это означает, что я понятия не имею, читает ли кто-то определенные страницы, сколько времени они проводят на этих страницах и т. Д.

К счастью, Adobe выпустила Adobe PDF Embed API (PDF Embed), простой способ напрямую включить PDF на ваш сайт с помощью простого фрагмента кода. Это совершенно бесплатно для использования и обработки на стороне клиента в вашем веб-приложении. Вам не нужно изучать сложную библиотеку PDF, и это очень легко сделать.На серверах Adobe данные не обрабатываются. Фактически, вы даже можете научиться играть с ним здесь.

НИЧЕГО! Это самое лучшее в этом. Для использования PDF Embed не требуется ничего, кроме веб-страницы. Сайт

PDF Embed Demo позволяет настроить программу просмотра, а затем сгенерировать код для встраивания.

Самый простой способ познакомиться с PDF Embed — это попробовать его на демонстрационном сайте. Это простой ресурс для начала, потому что он позволяет:

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

Если вы хотите попробовать встроить PDF-файл в свой собственный код, он работает без идентификатора клиента, когда вы используете его локально. Однако, если вы действительно хотите включить его на свой веб-сайт, вам необходимо получить идентификатор клиента. Получите здесь свой идентификатор клиента.

Установка домена вашего приложения очень важна.Когда PDF Embed загружен, он проверяет, загружается ли Viewer из этого домена.

Вот несколько важных советов:

  • Чтобы создать идентификатор клиента, вам понадобится Adobe ID. Если у вас его нет, вы можете зарегистрироваться здесь, используя адрес электронной почты, Google, Facebook или Apple ID.
  • Чтобы это работало, необходимо указать домен приложения.

Создав свой идентификатор клиента, вы захотите скопировать его и использовать в своем коде.

Ваш идентификатор клиента находится здесь, в Adobe IO.

ПРИМЕЧАНИЕ. Хотя вы можете редактировать свои конфигурации в Adobe.io Console, вам нужно будет перейти по ссылке , чтобы создать свой ключ. Если вы создадите ключ в Adobe.io Console, у вас не будет возможности указать свой домен.

Одной из сильных сторон PDF Embed является то, что у вас есть различные режимы встраивания на выбор:

Full Window

Full Window Режим просмотра позволяет создавать впечатления от просмотра PDF, аналогичные Adobe Acrobat Reader в Ваш сайт.

Full Window позволяет вам использовать на вашем компьютере впечатление от просмотра, аналогичное Adobe Acrobat Reader, и встроить его на свой веб-сайт. Я нахожу это идеальным при просмотре длинных документов или если я хочу иметь знакомый опыт просмотра PDF-файлов в моем пользовательском интерфейсе.

Размер контейнера

Размер контейнера — отличный вариант, когда вы хотите встроить контент, например слайды, на свой веб-сайт. Контейнеры

размера отлично подходят для контента, такого как презентации PowerPoint, преобразованные в PDF, или для серии инструкций.Я считаю, что это менее идеальный вариант, если вы включаете длинные PDF-файлы.

In-Line

In-Line режим позволяет встроить PDF-файл в вашу веб-страницу.

Встроенное представление может помочь дизайнерам встраивать свои проекты в веб-страницу без необходимости перестраивать ее или сводить к изображению. Встроенное представление принимает ваш PDF-файл и отображает его встроенным в HTML. Мне нравится этот режим встраивания, когда вы хотите отображать контент, такой как инфографика, который вы создали в Illustrator, InDesign и т. Д.и экспортированы в PDF, но хотят, чтобы он оставался доступным для поиска и содержал гиперссылки, не беспокоясь о перепроектировании для Интернета.

Lightbox

Lightbox позволяет легко отображать PDF-файлы на веб-странице в виде лайтбокса поверх веб-страницы.

Lightbox открывает средство просмотра PDF-файлов в верхней части веб-страницы, чтобы обеспечить более сфокусированный вид. Этот режим идеален, когда у вас есть ссылки на PDF-файлы по всему вашему веб-сайту, но вы хотите контролировать процесс просмотра, собирать аналитические данные и запускать события в зависимости от того, как ваша аудитория взаимодействует с опубликованными вами PDF-файлами.

Когда вы используете демонстрационный сайт и нажимаете кнопку «Сгенерировать код», он будет выглядеть примерно так:

Для начала вам нужно заменить следующие элементы:

  • Замените на Созданный вами идентификатор клиента .
  • Замените параметр url URL-адресом вашего PDF-файла, который вы хотите просмотреть.
    ПРИМЕЧАНИЕ. Поскольку PDF Embed отображает клиентскую часть в браузере, он будет учитывать все установленные междоменные ограничения, поэтому вам может потребоваться убедиться, что ваши заголовки разрешают междоменное связывание.
  • Измените fileName на имя вашего документа. Это появится в средстве просмотра.

Как только вы это сделаете, вы сможете встроить свой PDF-файл на свой веб-сайт. Это так просто!

Сегодня существует ряд приложений, которые уже используют Services SDK:

PDF Embed действительно обеспечивает большую гибкость при использовании PDF-файлов на ваших веб-сайтах. С его помощью вы можете сделать гораздо больше с помощью Analytics, Event Listeners и т. Д., О которых вы можете узнать больше в этой документации.

После того, как вы посмотрите PDF-файл Embed, мы будем рады услышать ваши мысли! Примите участие в форуме Adobe Document Cloud, чтобы оставить отзыв или ответить на эту статью!

ОБНОВЛЕНИЕ (07.07.2020): Обновлено, чтобы добавить новый режим встраивания лайтбокса и добавить новое изображение заголовка.

ОБНОВЛЕНИЕ (31.07.2020): Обновлено, чтобы отразить новый брендинг.

12 лучших плагинов для просмотра PDF-файлов WordPress (2019)

Представьте, что вы учитель с простым сайтом на WordPress.Вы с нетерпением ждете нового учебного года, но хотите дать своим ученикам несколько документов в цифровом формате, чтобы они подготовились к урокам и усвоили материал. Ваша первая задача — поделиться рубрикой класса со всеми заданиями и тестами в течение семестра. У вас есть PDF-файл, но вы не можете сделать его настолько удобным для печати, как сообщение в блоге или страницу.

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

Что такое плагин для просмотра PDF-файлов WordPress и когда его использовать?

Возьмем наш пример с учителем и рубрикой выше. В этой ситуации ничто не заменит доступный для просмотра и печати PDF-файл на веб-сайте курса. Скорее всего, половина студентов выбросят распечатанные раздаточные материалы, а идея копирования и вставки содержимого PDF в сообщение блога — кошмар форматирования и печати.

PDF-файлы

отлично подходят для многих ситуаций, а плагин PDF позволяет встроить полную программу просмотра PDF-файлов WordPress на страницу WordPress.

Программа просмотра PDF-файлов WordPress

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

Короче говоря, стандартная программа просмотра PDF-файлов позволяет пользователям просматривать PDF-файлы, как если бы файл был сохранен на их собственном компьютере. Они получают возможности, ожидаемые от PDF, а также некоторые другие удобные функции, которые разработчики плагинов WordPress добавили туда.

Когда бы вы использовали плагин для просмотра PDF-файлов?

Когда использовать программу просмотра PDF-файлов WordPress

  • Когда у вас уже есть большой документ, отформатированный и преобразованный в PDF. Переписывать или переформатировать было бы пустой тратой.
  • Для отображения больших документов, которые выглядели бы глупо, как запись в блоге или страница.
  • Если вам нужно поделиться ссылками на документы, которые не должны изменяться людьми, которые их скачивают. Технически вы можете преобразовать PDF-файл в редактируемый документ, но есть способы защитить PDF-файлы или, по крайней мере, усложнить их изменение.
  • Когда вы публикуете документацию, которая должна быть подписана и датирована множеством людей. Например, агент по недвижимости может либо разослать один и тот же договор сотням клиентов, либо просто попросить их всех загрузить его с веб-сайта.
  • Если вы хотите поделиться чем-то в Интернете и сделать так, чтобы это не было обнаружено поисковыми системами. Одним из примеров может быть электронная книга, в которой вы предпочитаете защищать контент, а не заставлять поисковые системы сканировать его.
  • Когда вам нужно создать PDF-файл на основе некоторого текущего содержания вашего веб-сайта, например, серии сообщений в блоге, которые вы хотите превратить в электронную книгу.

Лучшие программы просмотра PDF-файлов WordPress в 2019 году

Чтобы помочь вам отсеять все доступные варианты, вот 12 лучших плагинов WordPress PDF Viewer, которые стоит изучить (в произвольном порядке).

1. Устройство для вставки PDF

Плагин PDF Embedder существует уже некоторое время, и это один из самых простых способов представить ваши PDF-файлы на веб-сайте. Бесплатная версия PDF Embedder включает в себя большинство необходимых функций, включая кнопку быстрой загрузки, функцию встраивания PDF и обычные кнопки навигации.

Плагин PDF Embedder

Если вам нужны расширенные функции, такие как удобство использования для мобильных устройств, полноэкранная кнопка и технология перехода по страницам, вам подойдет премиум-версия PDF Embedder.

Почему эта программа для просмотра PDF-файлов качает
  • Загрузка PDF-файла выполняется одним простым щелчком мыши.
  • Ваш PDF-файл встанет на место в зависимости от размера экрана. Вы также можете настроить размеры вручную.
  • Плагин использует только JavaScript для отображения, поэтому процесс просмотра намного более плавный, чем при использовании iframe.
  • Вы можете получить дополнительные функции, такие как полноэкранный режим, защиту PDF-файлов и непрерывную прокрутку страниц.
  • В премиум-версии плагина есть только небольшая разовая оплата.
Обратные стороны
  • Бесплатная версия не обеспечивает защиту вашего содержимого, поэтому кто-то может технически прийти и забрать ваш PDF-файл, если захочет. Конечно, вы можете перейти на премиум-версию, чтобы решить эту проблему.
  • Кнопки перелистывания страниц маленькие и расположены в странном месте в нижнем левом углу экрана.

2. Устройство для встраивания документов Google

Основное преимущество использования Google Doc Embedder заключается в том, что он поддерживает широкий спектр типов файлов. Вам не нужно конвертировать файлы в Google Документы, но я предполагаю, что это было именно так, когда создавался этот плагин. Вам не продадут премиум-версию для Google Doc Embedder, поэтому все охватываемые функции предоставляются бесплатно.

Плагин для встраивания документов Google

Что касается самых крутых функций, ознакомьтесь с ними ниже:

Почему эта программа для просмотра PDF-файлов качает
  • Кнопка быстрого встраивания отображается в редакторе сообщений WordPress.Таким образом, вы можете добавлять PDF-файлы и другие файлы во время написания сообщения.
  • Плагин поддерживает все: от PDF до документов Word и от PSD до OTF. Скорее всего, именно из-за поддержки файлов вы выбрали Google Doc Embedder.
  • В настоящее время плагин переводится на десять разных языков, что позволяет большему количеству людей получить к нему доступ и использовать плагин на своих сайтах.
  • У вас также есть возможность работать с короткими кодами, если это вам больше нравится.
Обратные стороны
  • Большая часть функций этого подключаемого модуля зависит от размещения вашей документации в Google.Обычно у вас не возникает проблем с этим, но технически у вас нет полного контроля над своим контентом. Короче говоря, PDF-файлы не размещаются на вашем собственном сервере, поэтому они никогда не будут полностью безопасными.
  • В нем нет функции загрузки для извлечения локальных документов, поэтому вам необходимо загрузить документы, а затем скопировать и вставить URL. Это несколько устаревший способ ведения дел.

3. Программа просмотра PDF-файлов для WordPress

За один платеж в размере 17 долларов вы получаете доступ к большинству функций WordPress PDF Viewer, которые нужны вам и вашим посетителям.Фактически, PDF Viewer для WordPress — один из самых мощных и многофункциональных плагинов для просмотра на рынке.

PDF Viewer для плагина WordPress

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

Почему эта программа для просмотра PDF-файлов качает
  • Его можно перевести более чем на 100 языков.
  • Плагин подключается к Google Analytics для отслеживания количества людей, читающих и скачивающих ваши PDF-файлы.
  • В документах поддерживаются закладки и ссылки.
  • Если вы предпочитаете вставлять PDF-файлы таким образом, доступны шорткоды

  • .
  • Разработчик предлагает лучшую поддержку и документацию в этой нише.
Обратные стороны
  • Плагин PDF Viewer для WordPress не имеет инструментов для защиты ваших PDF-файлов.

4.Шорткод программы просмотра PDF.js

С наихудшим названием из всех, PDF.js Viewer Shortcode по-прежнему неплох, когда дело доходит до красивого отображения ваших PDF-файлов. Фактически, пользовательская сторона этого средства просмотра определенно борется за первое место. Он имеет элегантную серую рамку темы и схему документа, по которой люди могут переходить со страницы на страницу.

Подпишитесь на информационный бюллетень

Мы увеличили наш трафик на 1187% с помощью WordPress.

Мы покажем вам, как это сделать.

Присоединяйтесь к 20 000+ другим, кто получает нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишись сейчас

Плагин

PDF.js Viewer Shortcode

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

Плагин

PDF.js Viewer Shortcode

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

5. Буклет WP

WP Booklet ориентирован на усовершенствованное отображение в журнальном стиле с использованием анимации переворачивания и всплывающих окон, чтобы имитировать чтение брошюры или журнала в реальной жизни. Это определенно упрощенная версия Real3D FlipBook (рассматривается ниже), но она выполняет свою работу без каких-либо дополнительных затрат.

Плагин WP Booklet

Плагин поддерживает как PDF-файлы, так и изображения, поэтому вполне возможно создание фотоальбома. Они даже добавляют несколько шаблонов, чтобы вы начали.

Плагин WP Booklet

Почему эта программа для просмотра PDF-файлов качает
  • Шаблоны пригодятся новичкам, которые не хотят возиться с настройками или дизайном.
  • Вы можете загружать файлы PDF и изображения сразу.
  • Эскизы страниц помогают пользователям перемещаться по документу.
Обратные стороны
  • Изменение стиля вашего флипбука требует доступа к файлам сайта, что делает его полной головной болью.
  • Очевидно, кнопка Загрузить PDF не отображается для некоторых пользователей.
  • По сравнению с дисплеями других программ просмотра PDF-файлов WordPress в этом списке, он не самый красивый.

6. Проточная бумага

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

Плагин для WordPress Flowpaper

Почему эта программа для просмотра PDF-файлов качает
  • Пользователи могут загрузить свои PDF-файлы в Интернете тремя способами. Один из них предполагает размещение PDF-файла в другом месте и вставку ссылки. Другой позволяет загружать в WordPress. Третий вариант загружает PDF-файл в облако Flowpaper.
Обратные стороны
  • Если вы не размещаете свои PDF-файлы в облаке Flowpaper, размер каждой публикации ограничен 15 МБ.
  • Flowpaper известен тем, что не поддерживает все браузеры и устройства прямо из коробки. Однако есть способы исправить это.
  • Процесс встраивания PDF требует использования шорткода. Некоторым может понравиться кнопка быстрой загрузки, которая помещает PDF-файл в сообщение без кода.
  • Все настройки должны выполняться путем редактирования кода.

7. Vanilla PDF Код для вставки

Эту программу просмотра PDF-файлов не зря называют ванильной. Базовый минималистичный пользовательский интерфейс помещает PDF-файл в ваш пост без каких-либо наворотов. Премиум-версии нет, поэтому вы получаете такие вещи, как переход по страницам, поиск, масштабирование и печать, не платя ни копейки. Попробуйте плагин Vanilla PDF Embed.

Плагин для встраивания ванильного PDF-файла

Почему эта программа для просмотра PDF-файлов качает
  • В нем нет множества ненужных функций, а шорткоды довольно просты в использовании.
  • Плагин обеспечивает удобное чтение для ваших пользователей.
Обратные стороны
  • Известно, что многие мобильные браузеры отображают серое поле вместо PDF.
  • Нет кнопки быстрой загрузки, поэтому вам нужно разместить на другом источнике или загрузить PDF в WordPress, а затем использовать шорткод.
  • Вам нужно поместить небольшие фрагменты кода в шорткод, чтобы настроить программу просмотра.

8. Программа просмотра PDF-файлов

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

Плагин PDF Viewer

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

Почему эта программа для просмотра PDF-файлов качает
  • Плагин просмотра поддерживается в мультисайтах WordPress.
  • Выполните поиск по ключевым словам, чтобы найти определенные места в документе.
  • Страница настроек проста и точна, она предоставляет необходимый шорткод, а также некоторые настройки для регулировки высоты и ширины окна просмотра.
Обратные стороны
  • Плагин не обновлялся более двух лет. Это может вызвать проблемы в будущем, но на данный момент, похоже, работает достаточно хорошо.
  • В плагине возникли сбои при работе с Internet Explorer.Однако у них есть возможность отображать предупреждение для пользователей IE.

9. PDF и печать — BestWebSoft

Не все плагины WordPress PDF служат для просмотра PDF-файлов WordPress. Некоторые из них действуют как конвертеры, когда вы хотите взять сообщение в блоге и преобразовать его в PDF. Именно это и делает плагин PDF and Print, позволяя вам или вашим пользователям выполнить преобразование прямо с вашего веб-сайта.

PDF и печать с помощью плагина BestWebSoft

Большинство необходимых функций упакованы в бесплатную версию, но у них есть план премиум-класса для таких вещей, как добавление водяных знаков, создание пользовательских заголовков документов, интеграция с WooCommerce и другие нишевые возможности.

Программа просмотра PDF и печати

Почему эта программа для просмотра PDF-файлов качает
  • Это позволяет вашим пользователям загружать PDF-файлы из ваших сообщений.
  • Плагин также поддерживает страницы, результаты поиска, архивы и пользовательские типы сообщений.
  • Вы можете добавить кнопки преобразования с помощью виджетов или шорткодов.
  • Плагин предлагает различные значки для кнопок печати.
Обратные стороны
  • Премиум-версия требует ежегодной оплаты. Это всего лишь около 30 долларов, но это как-то неприятно, что вы будете вынуждены регулярно платить за такой базовый плагин.
  • Совместимость с конструктором страниц полностью отсутствует.

10. Вкладка PDF для WooCommerce

PDF Tab для WooCommerce — еще один альтернативный плагин WordPress PDF, доставляющий кнопку загрузки PDF на страницы ваших продуктов электронной коммерции. Некоторая информация о продукте слишком длинна для страницы продукта или, возможно, ее нужно каким-то образом защитить. С другой стороны, у вашей компании может уже быть эта документация, и нет необходимости дублировать ее.

Вкладка PDF для плагина WooCommerce

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

Почему эта программа для просмотра PDF-файлов качает
  • Загрузка PDF-файлов осуществляется через WordPress, поэтому вам не нужно возиться с короткими кодами.
  • Кнопка Загрузить PDF отображается прямо на странице продукта по вашему выбору.
  • Он открывает несколько возможностей для информирования покупателей о ваших товарах.
  • Пользователи могут либо загрузить PDF-файл, либо просмотреть его в браузере.
Обратные стороны
  • Хотя это может не иметь значения, плагин, похоже, не имеет каких-либо функций для защиты ваших PDF-файлов.
  • Вы не можете загрузить более одного PDF-файла на страницу продукта.
  • Нет простого способа изменить текст на кнопке «Загрузить PDF».

11. Плагин Real3D FlipBook для WordPress

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

Плагин Real3D FlipBook для WordPress

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

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

12. Встроить программу просмотра PDF

Если вам нужна сверхпростая и легкая программа просмотра PDF-файлов WordPress, вы можете попробовать встроить PDF-просмотрщик.

Встроить плагин для просмотра PDF-файлов

Вы можете встроить PDF-файл из медиатеки или где-либо еще с помощью oEmbed в тег объекта или Google Doc Viewer в качестве запасного варианта. Единственное требование — URL должен быть доступной ссылкой.

Почему эта программа для просмотра PDF-файлов качает
  • Очень легкий, без уловок и лишних излишеств
  • Делает то, для чего был создан
  • На основе двух популярных старых плагинов PDF, которые больше не поддерживаются (хорошая замена)
  • Разработчик открыт для запросов на вытягивание, чтобы помочь отладить любые проблемы.
  • Работает с мультисайтом и на мобильных устройствах
Обратные стороны
  • Отсутствие документации
  • Может не иметь всех необходимых вам функций

Какая программа просмотра PDF-файлов WordPress вам подходит?

С таким длинным списком авторитетных программ просмотра PDF-файлов WordPress может показаться сложным решить, какую из них выбрать.

Вот что мы думаем:

  • Если вы не хотите платить деньги за программу просмотра PDF, воспользуйтесь шорткодом программы просмотра PDF.js или Flowpaper.
  • Если вас интересует множество функций и самые элегантные дисплеи, подумайте о PDF Embedder или Real3d Flipbook.
  • Если вы довольно часто пользуетесь продуктами Google и не возражаете, чтобы они размещали ваши PDF-файлы, используйте Google Doc Embedder.
  • Если вам нужно интегрироваться с WooCommerce, рассмотрите вкладку PDF для WooCommerce или PDF и печать от BestWebSoft.
  • Если вы хотите конвертировать сообщения или страницы блога в PDF-файлы, PDF и Print by BestWebSoft — это ваш плагин.

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


Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress.Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на автоматическое масштабирование, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами

Как встроить PDF-файл в HTML-сайт

В этой статье (пятиминутное чтение) вы узнаете о двух простых (и бесплатных!) Подходах к отображению PDF-файлов в браузере и о том, как вы можете быстро реализовать их в Ваш сайт.

  1. Рендеринг PDF в собственном браузере
  2. PDF.js Rendering (рекомендуется)

Рендеринг PDF в собственном браузере

Поскольку PDF — это очень широко используемый формат, все современные браузеры имеют встроенную поддержку PDF. Мы можем воспользоваться этим, используя элементы HTML для встраивания PDF-файла прямо на нашу веб-страницу, например:

Вот код:

  

  
     Просмотрщик PDF 
  
  

    
    
<объект data = 'https: // pdfjs-express.s3-us-west-2.amazonaws.com/docs/choosing-a-pdf-viewer.pdf ' type = "application / pdf" >

Я использовал URL для значений data и src .Они указывают на PDF-файл, который я хочу открыть по URL-адресу. Но вместо этого я мог бы открыть локальный файл, заменив URL-адрес на путь к файлу (например, /path/to/file.pdf ).

Пользовательский интерфейс средства просмотра PDF может немного отличаться в зависимости от вашего браузера:

Программа просмотра PDF-файлов, встроенная в веб-сайт в Chrome Программа просмотра PDF-файлов, встроенная в веб-сайт в Safari
Программа просмотра PDF, встроенная в веб-сайт в FireFox Программа просмотра PDF-файлов, встроенная в веб-сайт в Edge

Этот подход будет работать во всех современных настольных и мобильных версиях Chrome, Safari, Firefox и Edge.(Это не будет работать в Internet Explorer.) Если вам нужно поддерживать Internet Explorer или настраивать пользовательский интерфейс, вам следует рассмотреть следующий подход — рендеринг PDF.js.

Вставить PDF в HTML с помощью PDF.js

PDF.js — это популярная программа просмотра PDF-файлов на JavaScript с открытым исходным кодом, изначально разработанная Mozilla и поддерживаемая сообществом разработчиков открытого исходного кода. Он позволяет отображать PDF-файлы внутри веб-страницы с помощью JavaScript вместо встроенной поддержки PDF в браузере.

Преимущества PDF.js по сравнению с рендерингом в собственном браузере:

  • Поддержка Internet Explorer (в дополнение ко всем современным браузерам)
  • Единый пользовательский интерфейс и взаимодействие с пользователем в браузерах
  • Более настраиваемый пользовательский интерфейс (например, удаление кнопки загрузки)

PDF.js Viewer HTML пример

Вот что мы построим:

Чтобы добавить эту программу просмотра PDF.js на наш веб-сайт, мы выполним три простых шага.

Шаг 1. Загрузите программу просмотра PDF-файлов

Самый простой способ скачать PDF.js — это посетить официальную страницу проекта PDF.js на GitHub.

PDF.js Проект GitHub

Мы загрузим последнюю версию «Стабильная» версии «Предварительно собранная (совместимая с ES5)» , что означает лишь то, что она протестирована на правильность работы, готова к работе сразу после установки и будет работать с последней версией JavaScript.

Шаг 2 — Извлечение и перемещение файлов

После загрузки PDF.js мы извлечем содержимое из загруженного файла .почтовый индекс . Вы можете увидеть здесь, что он содержит две папки и файл ЛИЦЕНЗИИ :

Мы переместим эти файлы в папку, содержащую файлы вашего веб-сайта. Для целей этого руководства я собираюсь поместить их в корневой каталог своего веб-сайта (что означает просто первый или самый верхний каталог).

Здесь вы можете видеть, что у меня есть домашняя страница index.html , about-us.html , папка assets , где я храню изображения и файлы CSS, папка продуктов , а также пара файлов PDF.Я также добавил две наши папки PDF.js build и web , а также файл LICENSE .

Важно понимать, что PDF.js не будет работать локально с вашего компьютера. Он будет работать только с сервера из-за ограничений безопасности браузера.

Шаг 3. Добавьте средство просмотра PDF-файлов на HTML-страницу с помощью iframe

Нашим последним шагом будет встраивание средства просмотра на нашу страницу «О нас» с помощью

Поскольку PDF.js не будет работать локально с нашего компьютера, мы будем загружать все новые или обновленные файлы на сервер нашего веб-сайта.

Вот и все!

Наша программа просмотра PDF.js теперь будет встроена в нашу HTML-страницу «О нас» и отобразит my-pdf-file.pdf . Пользовательский интерфейс будет выглядеть одинаково во всех браузерах и будет работать в Internet Explorer.

Изменение расположения файлов

В приведенном выше коде

Если бы мы хотели открыть файл widget.pdf , расположенный в нашей папке / products , мы бы использовали этот

Мы также можем использовать приведенный выше код