Эта статья рассказывает о том, как сделать отображение документа формата 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/, которую надо открыть на разных устройствах и в разных браузерах.

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

Проверка

AndroidiPhone/iPadWindows
EMBED
OBJECT
Adobe Document CLoud
pdf.js

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

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

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

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

Заключение

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

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

5 мыслей о “Встраивание документа PDF в веб-страницу

  • 14.02.2024 в 01:58
    Постоянная ссылка

    Почему может не загружаться pdf.js ?
    В консоли пишет
    Загрузка модуля по адресу «http://site.com/pdf.js/build/pdf.mjs» была заблокирована из-за неразрешенного MIME-типа («text/plain»).

    Как это решить, подскажите?

    Ответ
    • 14.02.2024 в 10:21
      Постоянная ссылка

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

      Ответ
    • 02.08.2022 в 14:58
      Постоянная ссылка

      Добрый день, может, это зависит от браузера? то есть, поддерживает ли конкретный браузер в полной мере скрипты pdf.js?

      Ответ

Добавить комментарий для димас Отменить ответ

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