Как встроить PDF файл в страницу сайта

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

Встроенный 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-документы. Подключить все очень просто:

  1. Создайте контейнер для хранения вашего PDF-файла: <div id="example1"></div>
  2. Подключите 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>
  3. При желании вы можете использовать CSS для изменения внешнего вида содержащего элемента, например высоты, ширины, границы, полей и т. д. <style>
    .pdfobject-container { height: 30rem; border: .3rem solid rgba(0,0,0,.1); }
    </style>

Все)

Если нужно больше параметров, то можно воспользоваться генератором https://pdfobject.com/generator/.

Заключение

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

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Добавить комментарий