Встроенный PDF файл выглядит как часть страницы и позволяет посетителям просматривать, скачивать и печатать документ без перехода на другой сайт или открытия дополнительного окна. Это удобно для пользователей и повышает вовлеченность на вашем сайте.
Если вы хотите показать своим посетителям документ PDF (пдф) на вашем сайте, вы можете воспользоваться одним из ниже описанных способов.
К сожалению, не все способы имеют кроссбраузерную поддержку — одни требуют установки плагина, другие вовсе не отражаются.
Встраивание PDF файлов
Встраивание PDF файлов в сайт — это полезная функция, которая позволяет отображать документы в формате PDF на веб-страницах без необходимости скачивать их или открывать в отдельном приложении. Существует несколько способов встраивания PDF файлов в сайт, рассмотрим некоторые из них.
С использованием элемента embed
Элемент embed — это HTML-тег, который позволяет вставлять различные типы медиа-контента на веб-страницу, включая PDF файлы. Для этого нужно указать атрибут src с ссылкой на PDF файл и атрибут type с значением "application/pdf". Например:
<embed src="example.pdf" type="application/pdf" width="600" height="800">Этот код создаст элемент embed с шириной 600 пикселей и высотой 800 пикселей, который будет отображать содержимое PDF файла example.pdf. Можно также использовать другие атрибуты, такие как style, class, id и т.д., для настройки внешнего вида и поведения элемента embed.
Однако, элемент embed не поддерживается всеми браузерами, и некоторые из них могут отображать PDF файлы по-разному или вообще не отображать их. Поэтому рекомендуется использовать элемент embed в сочетании с другими способами встраивания PDF файлов, которые мы рассмотрим далее.
C использованием embed через элемент object
Элемент object — это еще один HTML-тег, который позволяет вставлять медиа-контент на веб-страницу. Он похож на элемент embed, но имеет больше возможностей и поддерживается большинством браузеров. Для встраивания PDF файла с помощью элемента object нужно указать атрибут data с ссылкой на PDF файл и атрибут type с значением "application/pdf". Кроме того, можно указать атрибуты width и height для задания размеров элемента object. Например:
<object data="/pdf/example.pdf" type="application/pdf" width="600" height="800"></object>Этот код создаст элемент object с шириной 600 пикселей и высотой 800 пикселей, который будет отображать содержимое PDF файла example.pdf. Можно также использовать другие атрибуты, такие как style, class, id и т.д., для настройки внешнего вида и поведения элемента object.
Одно из преимуществ элемента object перед элементом embed заключается в том, что он позволяет указать альтернативный контент для случаев, когда браузер не может отобразить PDF файл или пользователь отключил плагины. Для этого нужно поместить альтернативный контент между открывающим и закрывающим тегами object. Например:
<object data="/pdf/example.pdf" type="application/pdf" width="600" height="800">
<p>Ваш браузер не поддерживает просмотр PDF файлов. Вы можете <a href="example.pdf">скачать</a> файл или установить <a href="https://get.adobe.com/reader/">Adobe Reader</a>.</p>
</object>Этот код создаст элемент object с шириной 600 пикселей и высотой 800 пикселей, который будет пытаться отобразить содержимое PDF файла example.pdf. Если это не удастся, то пользователь увидит сообщение с ссылками на скачивание файла или установку Adobe Reader.
С использованием тега iframe
Тег iframe — это HTML-тег, который позволяет вставлять на веб-страницу другую веб-страницу в виде фрейма. Это может быть полезно для встраивания PDF файлов, если они размещены на другом сайте или сервисе. Для этого нужно указать атрибут src с ссылкой на PDF файл и атрибуты width и height для задания размеров фрейма. Например:
<iframe src="https://example.com//pdf/example.pdf" width="600" height="800"></iframe>Этот код создаст фрейм с шириной 600 пикселей и высотой 800 пикселей, который будет отображать содержимое PDF файла example.pdf, размещенного на сайте example.com. Можно также использовать другие атрибуты, такие как style, class, id и т.д., для настройки внешнего вида и поведения фрейма.
Однако, использование тега iframe имеет некоторые недостатки. Во-первых, он зависит от того, разрешает ли сайт или сервис, на котором размещен PDF файл, его встраивание на другие сайты. Если нет, то пользователь увидит ошибку или пустой фрейм. Во-вторых, он может замедлить загрузку веб-страницы, так как браузеру нужно сделать дополнительный запрос к другому сайту или сервису. В-третьих, он может создавать проблемы с безопасностью и конфиденциальностью данных, так как фрейм может содержать нежелательный или вредоносный код или отслеживать действия пользователя.
С использованием сервиса Google Docs Viewer (через iframe)
Google Docs Viewer — это бесплатный сервис от Google, который позволяет просматривать различные типы документов онлайн без необходимости скачивать их или устанавливать специальные программы. Он поддерживает множество форматов, включая PDF. Для встраивания PDF файла с помощью Google Docs Viewer нужно использовать тег iframe с ссылкой на сервис Google Docs Viewer с параметром url, содержащим ссылку на PDF файл (при этом URL должен быть закодирован в ASCI) . Например:
<iframe src="http://docs.google.com/viewer?url=[URL]&embedded=true" width="600" height="800" style="border: none;"></iframe>Этот код создаст фрейм с шириной 600 пикселей и высотой 800 пикселей, который будет отображать содержимое PDF файла example.pdf, размещенного на сайте example.com, с помощью сервиса Google Docs Viewer. Можно также использовать другие атрибуты, такие как style, class, id и т.д., для настройки внешнего вида и поведения фрейма.
Полный пример и разбор:
<iframe src="https://docs.google.com/viewer?url=https%3A%2F%2Fweb-revenue.ru%2Fwp-content%2Fuploads%2F2023%2F11%2Fadvantages.pdf&embedded=true" width="700" height="500" style="border: none;"></iframe>Здесь: https://docs.google.com/viewer?url=https%3A%2F%2Fweb-revenue.ru%2Fwp-content%2Fuploads%2F2023%2F11%2Fadvantages.pdf — это закодированная в ASCI ссылка на файл: https://web-revenue.ru/wp-content/uploads/2023/11/advantages.pdf.
Преимуществом использования сервиса Google Docs Viewer заключается в том, что он не зависит от того, разрешает ли сайт или сервис, на котором размещен PDF файл, его встраивание на другие сайты. Он также обеспечивает более единообразное и качественное отображение PDF файлов в разных браузерах. Кроме того, он предоставляет дополнительные функции, такие как масштабирование, печать, загрузка и просмотр страниц.
Недостатком использования сервиса Google Docs Viewer является то, что он может замедлить загрузку веб-страницы, так как браузеру нужно сделать дополнительный запрос к сервису Google Docs Viewer.
С использованием сервисов публикации документов
Сервисы публикации документов — это специализированные платформы, которые позволяют загружать, хранить, делиться и встраивать документы разных форматов, включая PDF. Примеры таких сервисов — docdroid, Scribd, Issuu, SlideShare и другие. Для того, чтобы встроить PDF файл в сайт с помощью сервиса публикации документов, вам нужно выполнить следующие шаги:
- Зарегистрируйтесь на выбранном сервисе публикации документов и загрузите свой PDF файл.
- Откройте страницу с вашим PDF файлом на сервисе и найдите кнопку «Embed» или «Share».
- Скопируйте код для встраивания (embed code), который обычно начинается с <iframe> или <script>.
- Вставьте код для встраивания на свой сайт там, где вы хотите отобразить PDF файл.
Преимущества этого способа:
- Большой выбор сервисов публикации документов с разными функциями и возможностями.
- Высокое качество отображения PDF файлов на сайте.
- Возможность добавлять комментарии, аннотации, закладки и другие элементы к PDF файлу.
- Возможность статистики по просмотрам и загрузкам PDF файла.
Недостатки этого способа:
- Необходимость регистрации на сервисе публикации документов и соблюдения его правил и условий.
- Возможность рекламы или водяных знаков на PDF файле от сервиса публикации документов.
- Возможность ограничений по размеру, количеству или видимости PDF файлов на сервисе публикации документов.
С использованием JS библиотеки pdfobject
PDFОбъект — это стандартная утилита JavaScript с открытым исходным кодом для встраивания PDF-файлов в HTML-документы. Подключить все очень просто:
- Создайте контейнер для хранения вашего PDF-файла:
<div id="example1"></div> - Подключите PDFObject к вашему сайту, к примеру через CDN и укажите какой PDF-файл нужно встроить и куда его встроить.
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.12/pdfobject.min.js" integrity="sha512-lDL6DD6x4foKuSTkRUKIMQJAoisDeojVPXknggl4fZWMr2/M/hMiKLs6sqUvxP/T2zXdrDMbLJ0/ru8QSZrnoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>PDFObject.embed("https://web-revenue.ru/wp-content/uploads/2023/11/advantages.pdf", "#example1");</script> - При желании вы можете использовать CSS для изменения внешнего вида содержащего элемента, например высоты, ширины, границы, полей и т. д.
<style>
.pdfobject-container { height: 30rem; border: .3rem solid rgba(0,0,0,.1); }
</style>
Все)
Если нужно больше параметров, то можно воспользоваться генератором https://pdfobject.com/generator/.
Заключение
Встраивание PDF файлов в сайт — это удобный способ представления информации в формате, который легко читать и распечатать. Вы можете выбрать тот способ, который лучше подходит для вашего сайта и вашего PDF файла. Надеюсь, что этот пост помог вам разобраться в теме встраивания PDF файлов в сайт. Делитесь своим опытом в комментариях!
