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

Способов ровно три, и выбирают между ними по тому, чем вы готовы пожертвовать. Обычная ссылка работает всегда и отдаёт документ просмотрщику читателя. Встроенная рамка показывает файл прямо на странице, но рисует его чужой просмотрщик со своей панелью, а на телефонах он часто вообще не запускается. Страницы, переведённые в картинки, отображаются где угодно и не требуют просмотрщика — ценой того, что текст в них перестаёт быть текстом.

Локально в браузередо 1 ГБбез регистрации

Коротко о цифрах

Кто рисует документ в рамке: встроенный просмотрщик браузера, не ваш код
Разрешения растеризации: 72, 96, 150, 200, 300 и 600 DPI
Потолок холста: MAX_CANVAS_SIZE = 4096 px; A4 при 300 DPI это 2480 × 3508 и проходит
A3 при 300 DPI: потребовал бы 4961 px и зажимается примерно до 248 DPI
Где идёт перевод в картинки: в браузере, файл не отправляется на сервер
Что теряют картинки: текстовый слой: ни поиска, ни выделения, ни чтения с экрана

Что реально происходит при встраивании

Внутри рамки страницу рисует не ваш код, а просмотрщик браузера. Панель инструментов, кнопка скачивания, масштаб и поведение при прокрутке принадлежат ему, и настроить их со стороны сайта нельзя. Разные браузеры покажут один и тот же файл по-разному, а мобильные часто подставят вместо документа пустой прямоугольник или предложение скачать.

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

Три способа и их цена

Ссылка на файл: работает во всех браузерах, ничего не ломает, но уводит читателя со страницы.
Рамка с документом: файл виден сразу, зато вид задаёт чужой просмотрщик, и на мобильных результат непредсказуем.
Страницы как изображения: показываются везде, грузятся по одной, к каждой можно написать альтернативный текст.
У картинок есть цена: текстовый слой не переносится, документ перестаёт искаться и читаться программой чтения с экрана.
Гибрид, который обычно и нужен: первая страница картинкой как превью плюс ссылка на полный документ.

Как сделать страницы-картинки

Откройте перевод PDF в изображения — растеризация идёт в браузере, файл на сервер не уходит.
Выберите разрешение: 96 или 150 DPI хватает для чтения с экрана, 300 нужен, если картинку будут увеличивать.
Помните про потолок холста: сторона больше 4096 пикселей зажимается, поэтому A3 при 300 DPI сам опустится примерно до 248 DPI.
Скачайте изображения и разложите их на странице по порядку, каждому пропишите осмысленный альтернативный текст.
Рядом оставьте ссылку на исходный PDF: тому, кому нужен документ целиком, картинки не заменят файл.

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

Почему на телефоне вместо документа пустая рамка?

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

Можно ли убрать кнопку скачивания из просмотрщика?

Нет. Панель принадлежит браузеру, а файл к этому моменту уже загружен в память устройства. Спрятанная кнопка не мешает сохранить документ ни одним из десятка других способов.

Сколько весит страница, переведённая в картинку?

Зависит от разрешения и содержимого: текстовая полоса при 96 DPI занимает считаные десятки килобайт, цветной скан при 300 DPI — сотни. Проверяйте вес до выкладки на сайт.

Что выбрать, если документ длинный?

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