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-файлов в браузере и о том, как вы можете быстро реализовать их в Ваш сайт.
- Рендеринг PDF в собственном браузере
- 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
Нашим последним шагом будет встраивание средства просмотра на нашу страницу «О нас» с помощью
.Вот полный код нашей новой страницы about-us.html
:
О нас
О нас
Мы помогаем разработчикам программного обеспечения делать больше с PDF-файлами. PDF.js Express предоставляет гибкий и современный пользовательский интерфейс для вашей программы просмотра PDF.js, а также добавляет готовые функции, такие как аннотации, заполнение форм и подписи.
Поскольку PDF.js не будет работать локально с нашего компьютера, мы будем загружать все новые или обновленные файлы на сервер нашего веб-сайта.
Вот и все!
Наша программа просмотра PDF.js теперь будет встроена в нашу HTML-страницу «О нас» и отобразит my-pdf-file.pdf
. Пользовательский интерфейс будет выглядеть одинаково во всех браузерах и будет работать в Internet Explorer.
Изменение расположения файлов
В приведенном выше коде
наш атрибут src = "/ web / viewer.html? File =% 2Fmy-pdf-file.pdf"
указывает на программу просмотра PDF.js, а также на файл PDF, который открывается.
Часть /web/viewer.html
- это место для нашей программы просмотра PDF.js, которая находится в нашей папке / web
. Если мы хотим разместить наши папки PDF.js в другом месте, нам просто нужно изменить / web / viewer.html
по новому пути.
Часть ? File =% 2Fmy-pdf-file.pdf
- это расположение нашего файла PDF, который находится в нашем корневом каталоге. ?
сообщает нашему зрителю, что все справа - это строка запроса, которая представляет собой файл
, который мы хотим открыть. Часть % 2F
представляет собой кодировку URL-адреса HTML для символа /
, который в данном случае означает корневой каталог.
Если бы мы хотели открыть другой PDF-файл, например my-other-pdf-file.pdf
в нашем корневом каталоге, нам просто нужно обновить наш
следующим образом:
Если бы мы хотели открыть файл widget.pdf
, расположенный в нашей папке / products
, мы бы использовали этот
:
Мы также можем использовать приведенный выше код
, чтобы встроить нашу программу просмотра PDF в список / products /.html
стр. Несмотря на то, что файл list.html
находится в папке / products
, никаких изменений не потребуется, поскольку мы используем «абсолютные» пути в нашем
. (Абсолютный путь всегда начинается с /
.) Использование абсолютных путей означает, что src
всегда будет указывать на корневой каталог - независимо от расположения страницы в структуре веб-сайта.
Обратите внимание, что из-за настроек безопасности браузера получить PDF-файл сложно.js, чтобы открывать PDF-файлы, расположенные на другом доменном имени. Вы можете прочитать об этом здесь.
Загрузка PDF-файла с использованием URL-адреса в PDF.js
Помимо встраивания средства просмотра PDF на веб-страницу, мы также можем напрямую ссылаться на полноэкранную версию и открывать любой PDF-файл, размещенный на доменном имени. Попробуйте здесь:
Открыть программу просмотра PDF.js
Вот код ссылки:
Откройте программу просмотра PDF.js
Чтобы открыть другой PDF-файл в программе просмотра, вы можете просто заменить % 2Fmy-pdf-file.pdf
путь и имя файла с путем к вашему файлу. Например, следующая ссылка откроет my-other-pdf-file.pdf
.
Откройте программу просмотра PDF.js
Устранение неполадок PDF.js
Вот две наиболее распространенные ошибки при внедрении PDF.js, а также их решения.
PDF.js: Отсутствует файл PDF
Эта ошибка возникает, когда программа просмотра PDF.js не может найти файл PDF.Наиболее частые причины этого:
Программа просмотра PDF.js не находится на сервере. Решение: PDF.js может работать, только если он находится на сервере. (Он не будет работать локально с вашего компьютера, если вы не настроили его для работы в качестве сервера.) Простейшее решение - загрузить файлы на веб-сервер и попытаться открыть их с его URL-адреса.
Неверный путь или имя файла PDF. Решение: Дважды проверьте путь, указанный в URL-адресе средства просмотра (файл
? File =% 2Fwidget.pdf
часть). Обратите внимание, что% 2F
означает/
, который является корневым каталогом веб-сайта. Если вы удалите% 2F
, средство просмотра будет искать файл относительно расположения файла/web/viewer.html
. Например,? File = widget.pdf
попытается открыть файл/web/widget.pdf
.Имя файла PDF или путь к нему содержат пробелы или символы, которые вводят в заблуждение браузер. Решение: Преобразуйте имя файла или путь в кодировку URL.
PDF-файл находится на другом доменном имени, чем программа просмотра PDF.js. Решение: К сожалению, PDF.js не может быть легко настроен для открытия PDF-файлов с другого URL-адреса из-за ограничений безопасности браузера. Вы можете прочитать об этом здесь.
PDF.js: неожиданный ответ сервера (204) при получении PDF
Ответ 204 означает, что файл был пуст и не возвращал никакого содержания. Если вы уверены, что PDF-файл содержит информацию, то распространенная причина заключается в том, что менеджер загрузки, установленный на вашем компьютере, перехватывает запрос PDF-файла и загружает его напрямую, а не отображается в средстве просмотра.Решение состоит в том, чтобы отключить диспетчер загрузок или настроить его так, чтобы он не перехватывал загрузки PDF-файлов.
Заключение
Надеемся, это было полезно! Вы также можете взглянуть на PDF.js Express, который объединяет современный пользовательский интерфейс React с движком рендеринга PDF.js, чтобы включить аннотации PDF, заполнение форм и подписание внутри вашего веб-приложения.
Разоблачение мифов об использовании PDF на вашем веб-сайте
По словам Якоба Нильсена из группы Nielsen Norman, «принуждение пользователей к просмотру файлов PDF снижает удобство использования примерно на 300% по сравнению со страницами HTML.Затем он заявляет, что эта «статистика» исходит из приблизительной оценки, основанной на его собственных наблюдениях; Это означает, что нет реальных данных, подтверждающих это утверждение. Тем не менее, существует распространенное мнение, что вам следует избегать файлов PDF, когда речь идет о вашем веб-сайте. Вот некоторые из причин, по которым веб-сайт не содержит PDF-документов:
- Программа чтения PDF-файлов может зависнуть при загрузке файла для отображения, не позволяя посетителю просмотреть желаемый контент
- Переход от браузера к программе чтения PDF-файлов не является плавным, поэтому это не идеальный опыт для посетителей.
- Когда PDF-документ открывается после того, как пользователь щелкает ссылку, он удивляется, если они ожидают, что откроется новая страница.
- Загрузка PDF-документов занимает больше времени, чем открытие веб-страницы, что вызывает разочарование у посетителей
- Владельцу веб-сайта сложнее создать PDF-файлы, чем поместить то же содержание в HTML для Интернета.
Однако, если внимательнее присмотреться к каждой из этих причин, найдутся простые аргументы, опровергающие их.Хотя это правда, что программа для чтения PDF-файлов может зависнуть, когда вы ее откроете, это часто вызвано самим компьютером, а не программным обеспечением. Браузеры часто зависают, и часто из-за типа контента, который они пытаются отобразить. Для обычного пользователя открытие PDF-ридера - не редкость. Люди знакомы с ними, поэтому они, скорее всего, не вызовут никаких удивлений или проблем при переходе. Время загрузки любого файла увеличивается, когда файл большой; веб-страницы с множеством изображений и мультимедиа также могут загружаться долго.Наконец, использование правильного программного обеспечения PDF упрощает создание этих документов - процесс не является обременительным, как некоторые думают.
Когда следует использовать файл PDF
Хотя важно понимать, что использование файлов PDF на веб-сайте не причинит вреда, еще важнее понимать, что на самом деле во многих случаях лучше использовать файл PDF на своем веб-сайте.
Если вы хотите, чтобы пользователи печатали контент, например руководства, книги или аналогичные публикации, распространяемые через Интернет, или просматривали его в электронном считывающем устройстве, то лучшим выбором будет использование файла PDF.Это потому, что HTML-контент не печатается так, как отображается на экране.
Точно так же любой очень длинный контент лучше доставлять в формате PDF. Исследования показывают, что в идеале контент в Интернете лучше, если его можно использовать менее чем за семь минут. Все, что обычному человеку для чтения занимает больше времени, лучше, если вы доставляете его в другом формате, например, в виде файла PDF.
Еще одна область, в которой документы PDF выделяются, - это защищенные документы. Если вам нужно ограничить доступ к файлу, вы можете использовать такие инструменты, как защита паролем и шифрование, чтобы лучше защитить PDF-документ.Чтобы сделать то же самое с веб-страницей, требуется гораздо больше навыков в веб-разработке.
Загружаемый контент - это еще одна область, где файлы PDF являются гораздо лучшим вариантом, чем HTML. Программное обеспечение PDF позволяет вставлять изображения, шрифты и любые другие дополнения. Если вы пытаетесь загрузить контент через HTML, вам будет намного сложнее сделать это.
Инструменты
, такие как Foxit PhantomPDF, упрощают создание файлов PDF и форм, готовых к работе в Интернете, для загрузки на любой веб-сайт. Для потребителей контента Foxit PDF Reader предлагает стабильную, многофункциональную технологию, позволяющую посетителям легко читать любой документ, доставленный с помощью PDF.В общем, нет причин отказываться от использования PDF-документов на своем веб-сайте. И, как мы видели, во многих случаях это имеет смысл.
Как отображать PDF в WordPress
PDF кажется форматом документа, которого давно должно было быть в прошлом. Но это не тот случай. Почему? Поскольку PDF-файлы широко распространены, их легко обмениваться, они обеспечивают отличное форматирование документов и даже могут быть защищены паролем, чтобы никто не украл или не изменил документ. Если вы хотите воспользоваться этими функциями и отображать PDF-файлы в WordPress, лучшим вариантом будет программа просмотра PDF-файлов WordPress.
Подумайте о меню ресторана, учебных материалах и электронных книгах. Было бы кошмаром пытаться отображать эти элементы в виде сообщений в блогах или, что еще хуже, документов Microsoft Word. Есть и внутренние корпоративные документы. Многие компании хранят документы с конфиденциальной информацией или конфиденциальными данными клиентов. Вы, конечно, не стали бы публиковать эти сведения в менее безопасном формате, например на веб-странице.
Хотя всегда можно загрузить PDF-файл в WordPress и связать его с URL-адресом файла, программа просмотра PDF-файлов WordPress обеспечивает более удобный интерфейс.
С помощью одного из них читатели могут просматривать PDF-документы, как на Kindle, где они переворачивают страницы, увеличивают / уменьшают масштаб и сохраняют PDF-файл на компьютер, если не включены настройки безопасности.
Рынок средств просмотра PDF на WordPress довольно насыщен, и на выбор предлагается множество решений. Я протестировал самые популярные и, похоже, обнаружил проблему с каждым из них. Хотя в конце я все же расскажу о некоторых из этих плагинов, на мой взгляд, наиболее эффективным способом встраивания PDF в WordPress является сервис под названием Scribd.
Что такое Scribd и почему это лучший просмотрщик PDF на WordPress?
Scribd - это услуга по подписке. Это похоже на Netflix, но для книг, документов, аудиокниг, журналов, новостей и нот.
Как издатель, вы можете бесплатно загружать любой контент, даже PDF-документы. И вы также можете точно контролировать, кто может просматривать эти файлы.
Чтобы упростить задачу, Scribd предлагает встраиваемый код WordPress для каждого загружаемого PDF-файла. В целом Scribd имеет инструменты, необходимые для отображения PDF-файлов в WordPress, и, при желании, вы также получаете доступ к большому сообществу членов Scribd, которые ищут такие документы, как ваш.
Как отобразить PDF в WordPress
Как уже упоминалось, мы будем использовать Scribd для отображения PDF-файлов в WordPress. Это не плагин WordPress, но мое тщательное тестирование показывает, что это самый простой способ разместить ваши документы в WordPress, и он поддерживает несколько PDF-файлов на одной странице, тогда как большинство плагинов в этом отношении не справились.
Вот как им пользоваться:
Шаг 1. Создайте бесплатную учетную запись Scribd
Начните с перехода на домашнюю страницу Scribd. Вы увидите несколько кнопок для регистрации новой учетной записи, но самая заметная из них находится посередине страницы.Стоит отметить, что даже для публикации вы все равно регистрируетесь в учетной записи обычного пользователя Scribd (ничем не отличается от того, кто хочет читать книги). Кнопка Start Your Free 30 Days предназначена для обычных пользователей, поэтому вам не нужно вводить какую-либо платежную информацию.
Сначала на веб-сайте отображается всплывающее окно для входа в учетную запись. Найдите внизу ссылку New to Scribd? Зарегистрироваться .
Не стесняйтесь зарегистрироваться через Facebook, Google или используя свою личную информацию.Вы также должны создать пароль для своей учетной записи. По завершении нажмите кнопку Sign Up .
Вот что сбивает людей с толку. Похоже, Scribd требует, чтобы вы предоставили информацию о платеже, , но это не так. Пропустите эту страницу, вернувшись на домашнюю страницу Scribd. Это можно сделать, щелкнув логотип Scribd в верхнем левом углу.
Ваш профиль теперь создан без каких-либо платежных реквизитов. Вы не сможете читать книги или слушать аудиокниги, но у вас есть возможность загружать документы. В правом верхнем углу страницы есть раскрывающееся меню для вашего профиля.
Шаг 2. Загрузите документ PDF
Чтобы загрузить файл PDF, нажмите кнопку Загрузить в правом верхнем углу.
Нажмите кнопку Выбрать документы для загрузки . Откроется файл с локальным компьютером, где вы должны выбрать PDF-файл, который хотите загрузить.
После загрузки файла в Scribd вы заполняете сведения о документе. Вам нужно будет ввести следующие данные:
- Название
- Описание
- Разрешения пользователей
Убедитесь, что в поле Сделать этот документ частным не установлен флажок, поскольку документ должен быть общедоступным, чтобы его можно было встроить в WordPress.
Шаг 3. Найдите код для встраивания WordPress
На Поделитесь! нажмите на опцию Embed , чтобы сгенерировать код внедрения WordPress.
Убедитесь, что выбран формат WordPress . Затем вы также можете выбрать:
- Размер (обычно лучше автоматический)
- Стартовая страница
- и т. Д.
После того, как вы все настроили, скопируйте код для встраивания.
Шаг 4. Опубликуйте программу просмотра PDF-файлов WordPress
Перейдите в WordPress и откройте страницу или сообщение, в которое хотите встроить PDF-файл. Перейдите на вкладку Text редактора и вставьте код для встраивания Scribd.
После предварительного просмотра или публикации сообщения вы должны увидеть PDF-файл на своем веб-сайте.
У устройств чтения
есть возможности увеличения / уменьшения, перехода на другие страницы, загрузки, совместного использования и переключения в полноэкранный режим.
Другие уважаемые программы просмотра PDF на WordPress
Если вы настаиваете на использовании актуального плагина для просмотра PDF-файлов WordPress, вариантов много. Хотя я по-прежнему считаю, что Scribd предлагает лучшее решение, вот несколько вариантов, которые могут вам подойти:
Пытаясь отобразить PDF-файл в WordPress, подумайте, как ваши пользователи будут использовать PDF-файл и перемещаться по интерфейсу средства просмотра.При необходимости также важно защитить ваши PDF-файлы.
От меню до технических руководств, документы часто выглядят и читаются намного лучше с помощью средства просмотра PDF WordPress, поэтому используйте его в своих интересах, когда у вас есть возможность!
Если у вас есть какие-либо мысли или вопросы о том, как отображать PDF-файлы в WordPress, дайте нам знать в комментариях.
Бесплатный гид
5 основных советов по ускорению работы вашего сайта на WordPress
Сократите время загрузки даже на 50-80%
, просто следуя простым советам.
Как встраивать PDF-файлы в WordPress
Бывают случаи, когда вам захочется встроить PDF-файл в свое сообщение или страницу:
- Автор книги может захотеть раздать читателям бесплатный экземпляр.
- Для добавления каталогов продукции на свой сайт.
- Чтобы поделиться своими проектами в формате PDF с клиентами.
- Возможно, вы управляете туристическим агентством и хотите показать маршрут турпакетов.
Но есть проблема!
Хотя WordPress позволяет вам встраивать аудио, видео и, конечно же, изображения, невозможно встраивать файлы PDF в ваши сообщения и страницы.Эта функция пока недоступна, возможно, она будет добавлена в будущем.
Если вы хотите добавить файл PDF, вы можете загрузить файл с помощью опции Добавить носитель , вставить его, и ссылка на этот файл будет добавлена на вашу страницу. И ваши посетители могут либо загрузить его, либо просмотреть файл в веб-браузере, покинув ваш сайт.
Но что, если вы хотите встроить PDF-файлы в свои сообщения и позволить посетителям просматривать их, не покидая вашего веб-сайта? Есть ли какое-то решение для этого? Краткий ответ: да.
Итак, в этом посте я покажу, как вы можете встроить файл PDF в свой пост или страницу WordPress. Прежде чем начать, вы, вероятно, захотите создать хорошо отформатированный и аккуратный документ PDF с помощью редактора PDF. Затем вы будете готовы добавлять его в свои сообщения с помощью плагина или без него. Давайте начнем.
Как встроить файл PDF с помощью плагина
Существует множество плагинов, которые можно использовать для добавления файла PDF в сообщение WordPress.
Однако мы будем использовать плагин под названием PDF Embedder.Это бесплатный плагин, который доступен в каталоге плагинов WordPress. Лучшее в этом плагине - это то, что он использует javascript для выполнения своей работы, а не какой-то сторонний сервис или фреймы.
Шаг 1. Установите подключаемый модуль PDF Embedder
Войдите в свою панель управления WordPress и перейдите в раздел «Плагины > Добавить новый ». Теперь найдите PDF Embedder в поле поиска. Как только вы найдете плагин, просто установите и активируйте его. Просто, не правда ли?
Шаг 2. Настройка подключаемого модуля
Хотя вы можете начать встраивать свои PDF-файлы после установки этого плагина, вы можете сначала изменить настройки, чтобы встроенные файлы выглядели лучше.Чтобы открыть страницу настроек этого плагина, перейдите в «Настройки »> «PDF Embedder » на левой боковой панели панели инструментов WordPress.
Бесплатная версия этого плагина позволяет вам изменить следующее:
- Ширина и высота - Вы можете изменить ширину и высоту средства просмотра PDF. Он принимает целочисленные значения (в пикселях) или макс. (ширина 100%).
- Расположение панели инструментов - Панель инструментов этого средства просмотра PDF позволяет вашей аудитории увеличивать или уменьшать масштаб и переходить к следующей или предыдущей странице.У вас может быть панель инструментов вверху, внизу или и там, и там.
- Наведение панели инструментов - Вы можете выбрать, хотите ли вы, чтобы панель инструментов отображалась только при наведении курсора мыши на документ или нет.
Теперь это универсальные настройки. Но что, если вы хотите изменить настройки определенного файла? Что ж, вы можете сделать это с помощью шорткодов. Вот пример:
[pdf-embedder url = ”http://yoursite.com/wp-content/uploads/2019/01/April.pdf” width = ”500 ″ toolbar =” top ”toolbarfixed =” on ”]
В приведенном выше примере ширина установлена на 500 пикселей, панель инструментов расположена вверху, а панель инструментов будет фиксированной.Вы также можете установить панель инструментов в нижнее положение, а панель инструментов - в выключенное положение.
Этот плагин также имеет премиум-версию, которая предлагает такие функции, как кнопка загрузки, отслеживание просмотров и загрузки, непрерывная прокрутка страниц и открытие ссылок в новом окне.
Шаг 3. Вставьте PDF-файл в свой пост или страницу
Как только вы закончите с настройками, вы можете приступить к грязной работе. Теперь, независимо от того, используете ли вы классический редактор или редактор Гутенберга, вы можете легко использовать этот плагин для получения желаемого результата.
Если вы используете Classic Editor , встраивание файла PDF аналогично тому, что вы делаете для изображения или видео.
Прежде всего, создайте новый пост или откройте существующий, а затем нажмите кнопку Добавить медиа . Теперь загрузите файл PDF, нажмите кнопку Вставить в сообщение , и к вашему сообщению будет добавлен шорткод.
Вот и все - теперь вы можете предварительно просмотреть свое сообщение, чтобы проверить, правильно ли оно работает.
А как насчет Gutenberg Editor ? Что ж, плагин PDF Embedder поставляется с определенным блоком.Итак, создайте новый пост и нажмите значок «Добавить блок». Затем найдите блок PDF Embedder и выберите его.
Наконец, нажмите на блок, чтобы выбрать (или загрузить) свой PDF-файл, и ваша работа будет сделана.
Вот окончательный результат, независимо от того, какой редактор вы используете:
Популярные плагины для просмотра PDF-файлов
Хотя плагин PDF Embedder неплохо справляется со своей задачей, всегда полезно иметь альтернативу. Итак, позвольте мне поделиться некоторыми бесплатными и премиальными плагинами для просмотра PDF-файлов в произвольном порядке:
Программа просмотра PDF-файлов для WordPress
С более чем 3900 продажами программа просмотра PDF-файлов для WordPress является продаваемым плагином для просмотра PDF-файлов на CodeCanyon.Это полностью отзывчивый и кроссбраузерный плагин. Этот плагин позволяет включать или отключать такие параметры, как печать, загрузка, масштабирование, навигация по страницам и совместное использование в социальных сетях. Вы также можете использовать Google Analytics с WordPress, чтобы отслеживать количество посетителей, читающих ваши PDF-файлы.
Устройство для встраивания Google Диска
Google Drive Embedder - это бесплатный плагин, который позволяет вам получить доступ к вашему Google Диску из панели управления WordPress и встраивать PDF-файлы, документы Word или электронные таблицы в вашу публикацию или страницу.Однако, чтобы использовать этот плагин, вам также необходимо установить вход в Google Apps - цель этого плагина - подключить ваш Google Диск к вашему сайту WordPress.
Алгори PDF Viewer
Ищете подключаемый модуль блока Гутенберга для встраивания файлов PDF? Вы можете попробовать плагин Algori PDF Viewer. Этот бесплатный плагин совместим со всеми веб-браузерами, такими как Google Chrome, Firefox, Safari, Opera и Internet Explorer 11. Он позволяет загружать несколько файлов на одной странице и поддерживает режим презентации.
Плагин Real3D FlipBook для WordPress
Как следует из названия, Real3D FlipBook - это отзывчивый и удобный для сенсорных экранов плагин 3D flipbook для отображения PDF-файлов и изображений. Он был разработан с использованием HTML5 и не требует использования Flash. Вы можете настроить такие параметры, как скорость поворота, звук поворота, уровень масштабирования и угол камеры. Этот плагин также поддерживает лайтбокс и полноэкранный режим.
Встроить любой документ Plus
Embed Any Document Plus - единственный в своем роде плагин, который позволяет легко загружать и встраивать файлы документов (PDF, Word, PPT, Excel и т. Д.) На веб-сайты WordPress.Плагин добавляет кнопку «Добавить документ» над визуальным редактором. Откроется всплывающее окно EAD Plus, в котором вы можете выбрать источник вашего документа. Он также тесно интегрирован с облачными сервисами Google Drive, Dropbox и Box.com. Вы можете оставаться на своем сайте WordPress и загружать файлы в облачные сервисы и встраивать их прямо оттуда.
После загрузки или выбора документа, который вы хотите встроить, вы также получите возможность выбрать, какую службу документов вы хотите выбрать для встраивания файла.Плагин автоматически распознает формат файла и предложит вам программу просмотра. Зрители могут обрабатывать файлы размером от 5 до 8 МБ. Для файлов большего размера разработчики рекомендуют загружать их на Google Диск и встраивать оттуда.
Как встроить файл PDF без подключаемого модуля
Что ж, если вы один из тех, кто всегда ищет решения без плагина, то этот раздел для вас. Мы, безусловно, можем встроить файл PDF в сообщения и страницы WordPress, не устанавливая еще один плагин.
Идея проста - вам нужно будет загрузить файл PDF в свою учетную запись на Google Диске, а затем использовать код iframe, чтобы встроить этот файл на свой сайт. Хотя этот метод безопасен, единственная проблема заключается в том, что он использует фреймы.
Шаг 1 : Перейдите на Google Диск и войдите в свою учетную запись (просто зарегистрируйтесь для получения бесплатной учетной записи Gmail, чтобы бесплатно получить 15 ГБ дискового пространства).
Шаг 2 : Загрузите PDF-файл, который вы хотите встроить в свой пост WordPress, здесь. Для этого нажмите New на левой боковой панели вашей учетной записи Google Drive, выберите File Upload и загрузите файл со своего локального компьютера.
Шаг 3 : После загрузки файла на диск дважды щелкните его, чтобы просмотреть файл. Теперь нажмите на 3 вертикальные точки (Дополнительные действия) в правом верхнем углу и выберите Открыть в новом окне .
Шаг 4 : В новом окне нажмите «Дополнительные действия» (3 вертикальные точки в правом верхнем углу) и выберите Поделиться .
Шаг 5 : Откроется всплывающее окно с названием «Поделиться с людьми и группами» и «Получить ссылку».Здесь нажмите Изменить для всех, у кого есть ссылка в разделе «Получить ссылку». Это гарантирует, что любой, у кого есть ссылка на файл PDF, сможет его просмотреть. Если вы этого не сделаете, файл останется личным и не будет виден аудитории вашего сайта.
Вы должны увидеть следующее подтверждение:
Как только вы это сделаете, нажмите Готово .
Шаг 6 : Теперь пришло время получить код для встраивания, который мы будем использовать в нашем посте. Чтобы получить это, снова нажмите «Дополнительные действия» и выберите « Встроить».
Шаг 7 : Откроется всплывающее окно, в котором вы можете скопировать код iframe.
Шаг 8 : Перейдите в свою панель управления WordPress и создайте или отредактируйте сообщение или страницу, куда вы хотите встроить файл PDF. Теперь, если вы используете Classic Editor , просто перейдите на вкладку «Текст» и вставьте код:
Для Gutenberg Editor необходимо добавить новый блок, выполнить поиск по Custom HTML и, наконец, добавить код iframe в блок Custom HTML:
Шаг 9 : Вот и все - теперь просмотрите сообщение или страницу, чтобы проверить встроенный PDF-файл.
Сноска о том, как встраивать файлы PDF в WordPress
WordPress позволяет создавать ссылки на файлы PDF, но не встраивать их. Однако этот учебник решает эту проблему. Он показывает, как вы можете встраивать свои PDF-файлы в свои сообщения или страницы, как ваши изображения и видео, с использованием или без использования плагина.
Вы когда-нибудь встраивали PDF-файл на свой веб-сайт с помощью любого из двух методов? Вы имеете в виду альтернативный плагин и считаете, что он лучше, чем упомянутые в этой статье? Сообщите мне свои мысли в разделе комментариев.
.