Как сделать PDF сайта: сохранить страницу целиком

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

Какой результат вам нужен

Сначала выберите один из трёх результатов. Снимок для чтения сохраняет видимую страницу. Документ для отправки должен иметь чистые поля, понятные переносы и рабочие ссылки. Архив сайта хранит исходные файлы и структуру, поэтому PDF для этой задачи не подходит.

• Нужно сохранить чек, инструкцию или статью один раз: используйте печать браузера.
• Нужно регулярно формировать предложение или памятку: настройте @media print на своём сайте.
• Нужно перенести или восстановить сайт: сохраняйте HTML, стили, изображения и базу данных, а не PDF.
• Нужно зафиксировать страницу с раскрывающимися блоками: сначала раскройте нужные элементы и дождитесь загрузки изображений.

PDF фиксирует представление страницы, а не её работу. Формы, фильтры, видео и кнопки могут выглядеть знакомо, но перестать действовать.

Как сохранить страницу в Chrome

Официальная справка Chrome предлагает открыть страницу, вызвать печать сочетанием Ctrl+P в Windows или Command+P на Mac и выбрать сохранение в PDF. Этот же диалог позволяет менять поля, масштаб и набор страниц. Последовательность подтверждена в справке Google Chrome.

1. Откройте нужную страницу и прокрутите её до конца, чтобы подгрузились изображения.
2. Раскройте разделы, текст которых должен попасть в документ.
3. Нажмите Ctrl+P в Windows или Command+P на Mac.
4. В поле принтера выберите «Сохранить как PDF».
5. Проверьте ориентацию, поля, масштаб и фоновые изображения в предпросмотре.
6. Сохраните файл в понятную папку и сразу откройте его заново.

Не судите по первой странице предпросмотра. Перейдите к середине и концу документа: длинная таблица может обрезаться, фиксированная шапка повторяться, а кнопка перекрывать текст. Если сайт собран недавно, сначала полезно пройти чек-лист качества сайта.

Как сохранить страницу в Safari

На iPhone Apple описывает сохранение веб-страницы через меню «Поделиться», разметку и выбор места для файла в руководстве Safari. На Mac используйте стандартный диалог печати и пункт сохранения в PDF.

1. На Mac откройте страницу в Safari и выберите «Файл», затем «Напечатать».
2. В диалоге печати откройте меню PDF и выберите сохранение файла.
3. На iPhone откройте «Поделиться», затем «Разметка», завершите правки и сохраните файл.
4. Откройте документ в Просмотре или приложении «Файлы» и проверьте последнюю страницу.

Команда Safari «Сохранить как» создаёт веб-архив или исходный код, а не тот же результат, что печать в PDF. Apple описывает различие форматов в справке по сохранению веб-страниц.

По теме: Как заблокировать сайт на телефоне и компьютере

Как подготовить свой сайт к печати

Для своего проекта добавьте отдельные правила печати. MDN рекомендует использовать медиатип print: он меняет оформление только при печати на бумаге или в PDF. В руководстве MDN показаны @media print и правило @page для полей и размера страницы.

@media print {
  nav, .chat, .popup, .video { display: none !important; }
  body { color: #111; background: #fff; }
  main { width: auto; max-width: none; }
  a { text-decoration: underline; }
  img { max-width: 100%; break-inside: avoid; }
}
@page { margin: 16mm; }

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

Проверяем готовый PDF

Проверка должна отвечать на вопрос: сможет ли другой человек прочитать документ без исходного сайта. Откройте файл в другом просмотрщике и пройдите короткий приёмочный список.

• Первая и последняя страницы открываются без пустых листов.
• Заголовки не остаются отдельно от следующего абзаца.
• Текст выделяется и копируется, если это не скан.
• Изображения не обрезаны и не растянуты.
• Ссылки ведут на ожидаемые адреса.
• Личные данные, служебная навигация и закрытые блоки не попали в файл.
• Размер файла подходит для почты или мессенджера.

По теме: Как посмотреть, как сделан сайт: DevTools без взлома

Что делать, если PDF получился неправильным

Диагностируйте по симптому. Пустые изображения обычно означают, что они не успели загрузиться: прокрутите страницу и повторите. Обрезанная таблица требует альбомной ориентации, меньшего масштаба или отдельного печатного стиля. Повторяющаяся шапка связана с фиксированным позиционированием, её лучше скрыть в @media print.

• В PDF только часть текста: раскройте скрытые секции и убедитесь, что контент уже появился на странице.
• Слишком много пустого места: уменьшите поля или уберите фиксированную минимальную высоту блоков.
• Чёрный фон расходует краску: отключите фоновую графику либо задайте белый фон для печати.
• Ссылка не работает: проверьте, что в HTML указан полный адрес, а не обработчик JavaScript.
• Документ тяжёлый: уменьшите изображения на исходной странице или сожмите копию после визуальной проверки.

Когда PDF не подходит

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

Если цель не сохранить, а опубликовать готовую страницу в интернете, используйте пошаговый разбор загрузки сайта. Это другая задача: там проверяются домен, хостинг и публичный адрес.

Частые вопросы

Можно ли сохранить весь сайт одним PDF?

Браузер сохраняет текущую страницу. Для нескольких адресов каждый документ формируют отдельно либо используют серверный генератор, если вы владеете сайтом.

Почему в PDF нет видео?

Печатный формат не сохраняет работу видеоплеера. Оставьте обложку, название и обычную ссылку на видео.

Почему текст нельзя выделить?

Возможно, страница попала в файл как изображение или исходный материал был сканом. Для поиска и копирования нужен текстовый слой.

Можно ли сделать кнопку «Скачать PDF»?

Да. Для стабильного результата лучше генерировать документ на сервере или заранее подготовить файл, а не полагаться на различия печати у посетителей.