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

Важно, чтобы решение было совместимо со всеми платформами – браузерами и операционными системами, в том числе мобильными. Иначе большая часть пользователей не сможет увидеть документ.

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

Способы внедрения документа в формате PDF в HTML страницу

Тег <EMBED>

Простой в использовании:

<embed src="/static/time-management.pdf" 
  type="application/pdf"
  width="80%" height="720" >

Тег <OBJECT>

Простой в использовании, более новый, по сравнению с EMBED, HTML5:

<object data="/static/time-management.pdf" 
  type="application/pdf" 
  width="80%" height="720">не удалось показать документ</object>

В отличие от EMBED, можно задать текст для отображения в случае, если показать документ не получилось. Это может быть альтернативный текст или прямая ссылка на скачивание документа.

PDF.js

A general-purpose, web standards-based platform for parsing and rendering PDFs.

https://mozilla.github.io/pdf.js/

<iframe src="/pdf.js/web/viewer.html?file=/static/time-management.pdf" 
  width="80%" height="720" >не удалось показать документ</iframe>

Требуется установка файлов проекта PDF.js на сайт. Установка несложная – просто скопировать файлы, но нужен доступ. Также при загрузке страницы будет загружаться просмотровщик – это увеличит время загрузки страницы, потребуется настроить кеширование файлов на стороне клиента.

Adobe Document Cloud

Это тоже вариант, если использовать веб-версию Adobe Document Cloud, которая позволяет просматривать документы на веб-странице, а не в локальном приложении.

<iframe src="https://documentcloud.adobe.com/link/review?uri=urn%3Aaaid%3Ascds%3AUS%3Aa2d51361-d86a-4087-aa19-6f77853b190c" style="height:400px;width:80%;">не удалось показать документ</iframe>

Тестирование, сравнение и выводы

Для просмотра и сравнения сделал https://nhutils.ru/blog/proverka-vstraivaniya-pdf-dokumenta-v-veb-stranitsu/, которую надо открыть на разных устройствах и в разных браузерах.

На мобильном можно открыть по коду:

Проверка

На десктопе работают все варианты.

Теги EMBED и OBJECT не работают на мобильных – на Android окно белое, на iPhone — показывается только первая страница документа, как картинка– нельзя листать страницы и менять масштаб документа.

Внедрение документа PDF из Adobe Document Cloud тоже не работает – белое поле.

Только PDF.js показал документ на всех платформах: Windows, Android, iOS.

Заключение

Универсальное решение для настольной и мобильных платформ – это PDF.js.

Встраивание документа PDF в веб-страницу

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *