PDF-ридер для сайта: просмотр документа на любом устройстве

Показать PDF прямо на сайте — обычная задача: прайс, каталог, презентация, портфолио, методичка. Хочется, чтобы человек пролистал документ на странице, а не качал файл. Проблема в том, что «в лоб» это делается через iframe, и на телефонах такой просмотр ломается. Разберём, почему, и как показать PDF так, чтобы работало везде.

Почему обычные способы подводят

Есть два привычных пути, и у каждого свой изъян:

• Встройка через Google Диск. Выглядит как встройка Google Диска: чужие панели, кнопка «Открыть в новой вкладке», иногда просьба войти в аккаунт. Дизайн вы не контролируете, а ссылка живёт, пока жив тот файл на диске.
• Голый iframe с прямой ссылкой на PDF. На компьютере браузер сам покажет документ с прокруткой. Но мобильные браузеры часто не умеют показывать PDF внутри iframe — вместо просмотра предлагают скачать файл. А основной трафик сегодня — мобильный.

Что делает нормальный PDF-ридер

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

Что умеет такой ридер:

• постраничная навигация вперёд/назад и индикатор «страница N из M»;
• увеличение (зум) для мелкого текста и чертежей;
• адаптив под мобильные — панель управления переезжает вниз, документ подстраивается по ширине экрана;
• оформление под ваш сайт — цвет и форма кнопок, фон, ширина документа.

Как подключить за три шага

Шаг 1. Получите прямую ссылку на PDF

Просмотрщику нужен прямой адрес самого файла, а не страница-обёртка (поэтому ссылки из облачных дисков обычно не подходят — они ведут на просмотрщик диска, а не на файл). Загрузите документ в LF Drive и скопируйте постоянную ссылку вида https://lfdrive.ru/f/КОД.

Шаг 2. Соберите код ридера

Откройте бесплатный генератор PDF-ридера в разделе «Инструменты», вставьте свою ссылку и настройте вид — цвет кнопок, фон, ширину. Код соберётся сам, останется нажать «Скопировать».

Шаг 3. Вставьте код на страницу

В Tilda добавьте блок «Другое» → «HTML-код» (T123) (или вставьте код в Zero Block), вставьте скопированное и опубликуйте. На любом другом сайте — так же, в любой блок с HTML. Документ появится прямо в макете и будет листаться на всех устройствах.

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

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