Обычное встраивание через <iframe> открывает внутри страницы просмотрщик браузера: своя панель, свой скролл, серый фон, а на телефонах — одна страница вместо документа. Модификация рисует PDF сама, и документ становится частью страницы: либо лентой, либо слайдером.
Два режима
Лента — страницы идут одна под другой и прокручиваются вместе с сайтом. Так показывают отчёты, каталоги, документы, которые читают подряд.
Слайдер — на экране одна страница, остальные листаются стрелками, точками, свайпом и клавишами. Так показывают презентации и коммерческие предложения: страница целиком в экране, следующая уже отрисована заранее.
Что настраивается
- Ссылка на файл, ширина документа, отступы, фон вокруг страниц, край листа (тень, рамка или ничего) и скругление углов.
- Стрелки слайдера: за пределами документа или поверх страницы, видны всегда или проявляются при наведении. Размер кнопки, размер иконки, скругление, цвета иконки и фона — отдельно для обычного состояния и для наведения. Вместо стандартной стрелки можно вставить свой SVG: для кнопки «назад» он отражается сам.
- Пагинация: точки, счётчик «1 / 9» или ничего. Цвета активного и неактивного состояния, размер точек и расстояние между ними, кегль счётчика.
- Кнопка скачивания: своя SVG-иконка, цвета текста, фона и обводки — каждый со своим цветом при наведении, толщина обводки (0 — без неё) и скругление углов.
- Слой текста, кликабельные ссылки и качество отрисовки — предел плотности пикселей для слабых устройств и для мелкого шрифта.
Что учтено
- Страницы рисуются по мере приближения к экрану и освобождаются, когда уходят далеко: документ на двести страниц не съедает память. В слайдере соседняя страница готовится заранее, поэтому перелистывание мгновенное.
- Площадь холста ограничена: на длинных листах Safari на iPhone иначе отдаёт пустое место вместо страницы.
- После смены ширины окна и поворота телефона документ перерисовывается в новом масштабе, а не растягивается.
- Стрелки за пределами документа на экранах уже 700 px переезжают внутрь — иначе на телефоне от страницы остаётся треть ширины.
- В режиме «при наведении» на сенсорных экранах стрелки видны всегда: наведения там не бывает.
- Стрелки и точки — обычные кнопки с подписями для программ чтения с экрана. На первой странице стрелка «назад» пропадает совсем, на последней — «вперёд».
- В режиме «при наведении» стрелки считают наведением область самой страницы плюс запас по краям от 40 до 100 px в зависимости от размера кнопки, а не весь блок целиком: увели курсор со страницы — стрелки ушли.
- Если файл не открылся, вместо документа остаётся текст и ссылка на PDF.
Ограничения
- Файл должен лежать вне Тильды и отдаваться с разрешением CORS: в Тильду PDF не загружается, а публичные ссылки Яндекс.Диска и Google Drive для чтения файла скриптом не годятся.
- Точек больше тридцати не рисуется: у документа от 31 страницы вместо них показывается счётчик.
- Печать страницы браузером выведет только отрисованные листы; для печати и сохранения включайте кнопку скачивания.
- Заполняемые формы, комментарии и видео внутри PDF не работают.
- С выключенным слоем текста документ недоступен для поиска и для программ чтения с экрана.
Некодим