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

Обновлено 2026/05/20

Встраивание PDF-документов прямо на страницу сайта — стандартная задача для размещения прайс-листов, инструкций или презентаций. Однако у нативных методов HTML есть свои нюансы, особенно при отображении на мобильных устройствах (iOS и Android). Ниже приведены актуальные и безопасные способы интеграции PDF.

Нативные методы HTML5

1. Использование тега <iframe> (Рекомендуемый базовый метод)

Самый простой и быстрый способ отображения PDF на десктопных устройствах. Рекомендуется использовать ленивую загрузку (loading="lazy"), чтобы тяжелые файлы не ухудшали метрики скорости сайта (Core Web Vitals / LCP).

<!-- Адаптивный контейнер для PDF -->
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden;">
 <iframe src="/files/pdf_test.pdf#toolbar=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" loading="lazy">
 Ваш браузер не поддерживает просмотр PDF. <a href="/files/pdf_test.pdf">Скачать файл</a>.
 </iframe>
</div>

Полезный лайфхак: Добавление конструкции #toolbar=0 к концу ссылки на PDF-файл может скрывать панель инструментов во многих встроенных PDF-viewer’ах (печать, скачивание и поворот экрана).

2. Использование тега <object> с фолбеком

Преимущество тега <object> заключается в возможности задать «фолбек» — альтернативный контент (например, ссылку на скачивание или изображение), который отобразится, если у пользователя в браузере отключен или не поддерживается плагин просмотра PDF.

<object data="/files/pdf_test.pdf" type="application/pdf" width="100%" height="600px">
 <div class="pdf-fallback" style="padding: 20px; border: 1px dashed #ccc; text-align: center;">
 <p>Ваш браузер не может отобразить PDF-файл встроено.</p>
 <a href="/files/pdf_test.pdf" class="btn" style="display: inline-block; padding: 10px 20px; background: #007bff; color: #fff; text-decoration: none; border-radius: 4px;">Открыть или скачать PDF</a>
 </div>
</object>

Использование облачных сервисов (Кроссбраузерность)

3. Встраивание через Google Диск (Google Drive)

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

Пошаговая инструкция:

1. Загрузите файл на Google Диск и откройте к нему доступ «Все, у кого есть ссылка».
2. Откройте файл, нажмите на три точки в правом верхнем углу и выберите «Открыть в новом окне».
3. В новом окне снова нажмите на три точки и выберите пункт «Встроить элемент...».
4. Скопируйте сгенерированный код <iframe>.

<iframe src="https://drive.google.com/file/d/КОД_ВАШЕГО_ФАЙЛА/preview" width="100%" height="600px" style="border: none;" allow="autoplay"></iframe>

4. Встраивание через OneDrive (Microsoft)

Аналогичное облачное решение от Microsoft, отлично подходящее для корпоративных сайтов, использующих экосистему Office 365.

• Зайдите в OneDrive в браузере, выделите нужный PDF-файл.
• Нажмите кнопку «Внедрить» (Embed) на верхней панели.
• Нажмите «Создать» и скопируйте готовый HTML-код.

Профессиональный уровень (Для разработчиков)

5. Использование JavaScript-библиотеки PDF.js (от Mozilla)

Если вам нужен 100% контроль над внешним видом ридера, кроссплатформенность на iOS/Android и независимость от встроенных плагинов пользователя — используйте библиотеку PDF.js. Она рендерит страницы документа прямо на HTML5 Canvas.

Для быстрой интеграции без развертывания собственной инфраструктуры можно использовать официальный готовый вьюер (через iframe):

<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html?file=https://your-site.com/files/pdf_test.pdf" width="100%" height="600px" style="border: none;"></iframe>

Важно: Для работы официального вьюера Mozilla с вашими файлами на сервере должны быть правильно настроены заголовки CORS (Cross-Origin Resource Sharing), разрешающие удаленный доступ к PDF.

Проблемы с мобильными устройствами (iOS и Android)

На мобильных устройствах, особенно в Safari на iOS, поведение встроенных PDF внутри iframe/object может отличаться от десктопа: документ может открываться во внешнем viewer, в новой вкладке или загружаться как файл вместо встроенного отображения.

Дополнительный важный нюанс: Для корректного встроенного отображения PDF сервер должен отдавать файл с правильными HTTP-заголовками: Content-Type: application/pdf и Content-Disposition: inline. Если вместо inline используется значение attachment или MIME-тип настроен неверно, некоторые браузеры (особенно мобильные) могут принудительно скачивать файл вместо отображения документа прямо на странице.

Как решить эту проблему:

Если для мобильных пользователей критически важно видеть документ прямо на странице, откажитесь от стандартных HTML-тегов в пользу Способа 3 (Google Drive) или используйте готовые коммерческие облачные решения вроде Adobe PDF Embed API (оно бесплатно и обеспечивает идеальный UX на смартфонах).