1. Продукты
  2.   Зритель
  3.   JavaScript
  4.   PDFObject
 
  

Библиотека JavaScript PDF Viewer с открытым исходным кодом

Бесплатная библиотека JavaScript с открытым исходным кодом для просмотра PDF-документов.

Что такое PDFObject?

PDFObject — это бесплатная библиотека JavaScript с открытым исходным кодом, разработанная для встраивания PDF-документов в веб-страницы. Она работает путем генерации элемента HTML embed и его последующей интеграции в структуру HTML. Затем элемент embed визуализирует PDF-документ. PDFObject сам по себе не является визуализатором; скорее, он фокусируется на создании элемента embed и размещении его в HTML. Он может создавать элементы embed для отображения PDF-файлов в полном размере или в определенных разделах веб-страницы.

Ниже приведены некоторые основные функции PDFObject:

  • Механизм отката: PDFObject имеет механизм отката, поэтому в случаях, когда браузер не поддерживает встраивание PDF-файлов, PDFObject автоматически активирует логику отката, позволяя разработчикам либо предоставить ссылку на PDF-файл, либо любую другую альтернативную логику по мере необходимости.
  • Интеграция PDF.js: PDFObject обеспечивает дополнительную интеграцию с PDF.js, позволяя разработчикам встраивать PDF-файлы независимо от средства просмотра PDF по умолчанию в браузере. Эта функция полезна, когда браузер не поддерживает встраивание PDF-документов в HTML.
  • Параметры открытия PDF: PDFObject поддерживает фирменные Параметры открытия PDF Adobe, позволяющие разработчикам указывать параметры для отображения PDF. Сюда входят такие параметры, как режим просмотра и другие специфичные для Adobe настройки. Все эти параметры можно найти здесь.
GitHub

Статистика GitHub

Имя:
Язык:
Звезды:
Вилки:
Лицензия:
Репозиторий последний раз обновлялся на

Начало работы с PDFObject

Мы можем загрузить библиотеку PDFObject с помощью модуля npm:

Установить с помощью NPM


npm i pdfobject

Встраивание PDF в HTML с проверкой поддержки браузера

Мы можем встроить PDF-документ в HTML с помощью библиотеки PDFObject. Сначала мы проверим, поддерживает ли браузер встраивание PDF-документа в HTML с помощью метода supportsPDFs библиотеки PDFObject. Если он возвращает значение true, что означает, что он поддерживает встраивание PDF в HTML, то мы встроим PDF в HTML с помощью метода embed("document_name.pdf","#elementid"). Эта функция встроит PDF в определенный элемент в HTML. Для встраивания полноразмерного PDF мы не будем указывать идентификатор элемента и вызовем метод как embed("document_name.pdf"). Однако, если он возвращает значение false, что означает, что он не поддерживает встраивание PDF в HTML, то мы перейдем к другой альтернативной логике по мере необходимости. Проверьте фрагмент кода ниже для получения подробной информации:

Выход

Следующий вывод отображает PDF-документ, встроенный в HTML:

Создать резервный механизм

Мы можем установить механизм отката при встраивании PDF в веб-страницу с помощью PDFObject, который активируется, когда браузер не поддерживает встраивание PDF в HTML. PDFObject использует параметр, называемый fallbackLink, который содержит альтернативную логику при вызове функции embed. Таким образом, если браузер не поддерживает встраивание PDF, код, присутствующий в fallbackLink, выполняется в назначенном элементе div. Проверьте фрагмент кода ниже для получения подробной информации:

Выход

Скриншот вывода отображает содержимое, отображаемое механизмом отката. Механизм отката был активирован, когда браузер не поддерживал встраивание PDF-файлов в HTML.

Встраивание PDF с помощью параметров открытия PDF от Adobe

Мы можем встраивать PDF-файлы вместе с некоторыми параметрами открытия, используя библиотеку PDFObject. Мы будем использовать метод PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { параметры }}) для встраивания PDF-документа в HTML вместе с параметрами открытия. Эти параметры открытия PDF включают такие функции, как открытие PDF-файла и прокрутка до определенного номера страницы. Проверьте фрагмент кода ниже для получения подробной информации:

Выход

На следующем снимке экрана показан PDF-документ, встроенный в HTML с дополнительными параметрами, которые заставляют элемент embed прокручиваться до страницы номер 3 после его визуализации:

Встраивайте PDF-файлы с помощью интеграции PDF.js

Как мы знаем, PDFObject зависит от поддержки браузера для встраивания PDF в HTML, но он предоставляет альтернативный метод для рендеринга PDF, если браузер его не поддерживает. Альтернативный метод заключается в интеграции PDF.js с PDFObject. Чтобы сделать это, нам нужно будет настроить PDF.js на нашем сервере, а затем мы передадим параметры ForcePDFJS: true и PDFJS_URL: path/to/viewer.html/in/pdf.js в функцию embed.

Примечание: В приведенном ниже примере фрагмента кода мы создали и инициировали сервер, содержащий библиотеку PDF.js, поэтому http://localhost:8888 указывает на библиотеку PDF.js.

Выход

На следующем снимке экрана показан PDF-документ, созданный с помощью интеграции PDFObject с PDF.js:

Заключение

В заключение, PDFObject — это простая в использовании библиотека JavaScript для встраивания PDF-документов в HTML. Хотя она не функционирует как средство визуализации и полагается на поддержку браузером элементов встраивания, что может вызвать такие проблемы, как неработающий пользовательский интерфейс в браузерах, которые не поддерживают элемент встраивания, но библиотека имеет функции для решения таких проблем с помощью обнаружения поддержки элемента встраивания и механизма отката. Мы также можем визуализировать PDF-файлы в браузерах, которые не поддерживают элементы встраивания, путем интеграции PDF.js с PDFObject. Несмотря на свои ограничения, PDFObject выделяется как ценный инструмент для встраивания и визуализации PDF-документов на веб-страницах.

Похожие Продукты

 Русский