Формат PDF часто используют для публикации инструкций, отчётов и договоров, поэтому возникает задача встроить документ прямо в веб-страницу. Это позволяет просматривать его без скачивания и дополнительных программ, что особенно удобно для пользователей мобильных устройств и корпоративных порталов.
Для встраивания PDF применяются несколько HTML-тегов: <iframe>, <embed> и <object>. Каждый из них имеет особенности – например, <iframe> поддерживает простое подключение и адаптивность через атрибуты width и height, а <object> позволяет задать резервный текст, который отобразится, если документ не загрузился.
Важно учитывать поддержку браузеров: современные версии Chrome, Firefox и Edge корректно обрабатывают встроенные PDF, в то время как в Safari или мобильных браузерах может потребоваться настройка. Чтобы повысить доступность, рекомендуется добавлять альтернативную ссылку для скачивания файла.
Вставка PDF через тег <embed>
Тег <embed> позволяет встроить PDF-файл непосредственно в область страницы без использования сторонних плагинов. Браузер при этом отображает встроенный документ со встроенной панелью управления (масштабирование, пролистывание, скачивание).
Минимальный пример кода:
<embed src="document.pdf" type="application/pdf" width="600" height="800">Атрибут src задаёт путь к PDF, type фиксируется как application/pdf, width и height определяют размеры области отображения. Значения ширины и высоты можно указывать в пикселях или в процентах, например width="100%" для адаптивного размещения.
Если необходимо обеспечить корректное открытие в разных браузерах, рекомендуется указывать абсолютный путь или относительный путь, доступный с сервера, а не локальный адрес диска. При работе с большими PDF можно использовать ограничение высоты и включать прокрутку через стили контейнера.
Следует учитывать, что не все мобильные браузеры корректно поддерживают <embed>. Для повышения совместимости целесообразно дополнительно предоставлять ссылку на скачивание документа:
<p><a href="document.pdf">Скачать PDF</a></p>Использование тега <object> для отображения PDF
Тег <object> позволяет встроить PDF-документ напрямую в структуру страницы без сторонних скриптов. Атрибут data указывает путь к файлу, а type определяет MIME-тип. При отсутствии поддержки PDF браузером внутри контейнера можно разместить альтернативный текст или ссылку.
Пример базового кода:
<object data="docs/example.pdf" type="application/pdf" width="600" height="500">
Ваш браузер не поддерживает отображение PDF.
<a href="docs/example.pdf">Скачать файл</a>
</object>
Основные параметры:
| Атрибут | Назначение | Примечание |
|---|---|---|
| data | Путь к PDF | Поддерживаются относительные и абсолютные ссылки |
| type | MIME-тип | Для PDF всегда «application/pdf» |
| width / height | Размеры контейнера | Указываются в пикселях или процентах |
| fallback-контент | Ссылка на скачивание или предупреждение |
Рекомендуется задавать фиксированные размеры, так как без этого документ может отображаться некорректно. Для кросс-браузерности всегда добавляйте fallback-ссылку внутри контейнера.
Подключение PDF с помощью <iframe>
Тег <iframe> позволяет встроить PDF-документ напрямую в область страницы без дополнительных плагинов. Браузеры Chrome, Firefox, Safari и Edge поддерживают этот способ отображения.
Пример минимальной вставки:
<iframe src="document.pdf" width="100%" height="600"></iframe>Параметры width и height задают размеры области просмотра. Для адаптивного макета используют ширину 100% и фиксированную высоту, чтобы документ корректно отображался на разных экранах.
При размещении файлов на сервере важно указывать относительный или абсолютный путь. Если PDF хранится в защищённой зоне, убедитесь, что доступ открыт для чтения, иначе браузер отобразит ошибку загрузки.
Чтобы открыть документ на определённой странице, можно добавить якорь в ссылке, например: src="document.pdf#page=3". Это позволяет сразу перейти к нужному разделу.
Если требуется скрыть полосы прокрутки, используйте атрибут scrolling=»no», но следует учитывать, что тогда часть содержимого может оказаться недоступной пользователю.
Открытие PDF в новой вкладке по ссылке
Чтобы открыть PDF в новой вкладке, достаточно указать атрибут target="_blank" внутри ссылки. Такой подход позволяет пользователю просматривать документ без загрузки на устройство.
<a href="document.pdf" target="_blank">Открыть PDF</a>Рекомендации по применению:
- Используйте относительные пути для файлов, находящихся в каталоге проекта (
href="files/manual.pdf"). - Для внешних источников указывайте полный URL (
href="https://example.com/report.pdf"). - Добавляйте атрибут
rel="noopener noreferrer", чтобы исключить доступ открытого документа к исходной странице. - Проверяйте корректность MIME-типа на сервере:
application/pdfгарантирует открытие в браузере, а не скачивание.
Для удобства можно указать описание файла:
<a href="guide.pdf" target="_blank" rel="noopener noreferrer">Инструкция (PDF, 2 МБ)</a>Встраивание PDF с помощью Google Drive Viewer
Чтобы встроить PDF через Google Drive Viewer, загрузите файл в Google Диск и откройте его для просмотра. В меню «Файл» выберите пункт «Опубликовать в интернете» или получите ссылку для доступа.
Для вставки используйте iframe с адресом вида:
<iframe src="https://drive.google.com/file/d/ID_ФАЙЛА/preview" width="640" height="480" allow="autoplay"></iframe>
ID_ФАЙЛА берётся из ссылки на документ, например:
https://drive.google.com/file/d/1AbCdEfGhIjKlMnOp/view?usp=sharing
Здесь нужный идентификатор – 1AbCdEfGhIjKlMnOp.
Рекомендуется задавать размеры iframe в соответствии с макетом страницы, минимальная ширина – 600px для корректного отображения текста. Атрибут allow="autoplay" можно убрать, если не требуется автоматическое воспроизведение встроенного медиа.
Такое подключение позволяет открывать PDF в браузере без сторонних плагинов и работать как на десктопах, так и на мобильных устройствах.
Настройка размеров и параметров отображения PDF
При вставке PDF через тег <embed> или <iframe> размеры задаются атрибутами width и height в пикселях или процентах. Например: <iframe src="file.pdf" width="100%" height="600"></iframe> растянет документ на всю ширину контейнера с фиксированной высотой.
Для контроля начального масштаба и области отображения можно использовать параметры в URL. Чаще всего применяются:
#zoom=100– открытие в масштабе 100%;#page=2– загрузка со второй страницы;#view=FitH– подгонка по ширине окна;#toolbar=0– скрытие панели инструментов PDF-просмотрщика;#navpanes=0– отключение боковой панели навигации.
Комбинировать параметры можно через амперсанд. Пример: document.pdf#page=3&zoom=80&toolbar=0. Это позволяет задать конкретный сценарий просмотра без вмешательства пользователя.
При адаптивной верстке предпочтительно использовать width=»100%», фиксируя только высоту. Так PDF корректно подстраивается под разные устройства.
Вопрос-ответ:
Почему мой PDF не отображается внутри страницы, а сразу скачивается?
Причина может быть в настройках сервера. Если сервер отдает файл с заголовком Content-Disposition: attachment, браузер будет предлагать загрузку. Чтобы исправить это, администратор должен изменить заголовки на Content-Disposition: inline. Тогда PDF можно будет просматривать встроенно.
Загрузка...
