Эта статья рассказывает о том, как сделать отображение документа формата 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/, которую надо открыть на разных устройствах и в разных браузерах.
На мобильном можно открыть по коду:
Проверка
Android | iPhone/iPad | Windows | |
EMBED | ✖ | ✖ | ✔ |
OBJECT | ✖ | ✖ | ✔ |
Adobe Document CLoud | ✖ | ✖ | ✔ |
pdf.js | ✔ | ✔ | ✔ |
На десктопе работают все варианты.
Теги EMBED и OBJECT не работают на мобильных – на Android окно белое, на iPhone — показывается только первая страница документа, как картинка– нельзя листать страницы, менять масштаб тоже нельзя.
Внедрение документа PDF из Adobe Document Cloud тоже не работает – белое поле.
Только PDF.js показал документ на всех платформах, с возможностью листания и увеличения: Windows, Android, iOS.
Заключение
Универсальное решение для настольной и мобильных платформ – это PDF.js.
Почему может не загружаться pdf.js ?
В консоли пишет
Загрузка модуля по адресу «http://site.com/pdf.js/build/pdf.mjs» была заблокирована из-за неразрешенного MIME-типа («text/plain»).
Как это решить, подскажите?
Если говорить вообще, то либо на сервере какая-то проблема, например, не все файлы скопированы или какие-то повреждены, либо ограничения на стороне браузера.
Я бы попробовал открыть в разных браузерах на разных устройствах и сравнить, а дальше уже действовать исходя из результатов.
Добрый день! В Windows 10 Mobile pdf.js не работает…
Добрый день, может, это зависит от браузера? то есть, поддерживает ли конкретный браузер в полной мере скрипты pdf.js?
спасибо, pdf.js реально работает на смартфонах!