Библиотека просмотра PDF-файлов на JavaScript с открытым исходным кодом
Бесплатная библиотека JavaScript с открытым исходным кодом для просмотра PDF-документов.
Что такое PDFОбъект?
PDFObject — это бесплатная библиотека JavaScript с открытым исходным кодом, разработанная для встраивания PDF-документов в веб-страницы. Он работает путем создания элемента внедрения HTML и последующей интеграции его в структуру HTML. Затем элемент embed отображает PDF-документ. PDFObject сам по себе не является средством визуализации; скорее, он фокусируется на создании элемента для внедрения и размещении его в HTML. Он может создавать элементы для встраивания для отображения PDF-файлов в полном размере или в определенных разделах веб-страницы.
Ниже приведены некоторые основные возможности PDFObject:
- Механизм возврата: PDFObject имеет резервный механизм, поэтому в тех случаях, когда браузер не поддерживает встраивание PDF-файлов, PDFObject автоматически активирует резервную логику, позволяя разработчикам либо предоставить ссылку на PDF-файл, либо любую другую альтернативную логику по мере необходимости. .
- Интеграция PDF.js. PDFObject обеспечивает дополнительную интеграцию с PDF.js, позволяя разработчикам встраивать PDF-файлы независимо от PDF-файла по умолчанию в браузере. зритель. Эта функция полезна, когда браузер не поддерживает встраивание PDF-документов в HTML.
- Параметры открытия PDF. PDFObject поддерживает собственные Параметры открытия PDF компании Adobe, позволяющие разработчикам указывать параметры для отображения PDF. Сюда входят такие параметры, как режим просмотра и другие настройки, специфичные для Adobe. Все эти параметры можно найти здесь.
Начало работы с 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: {parameters }}) для встраивания PDF-документа в HTML вместе с параметрами открытия. . Эти Параметры открытия PDF включают в себя такие функции, как открытие PDF-файла и прокрутка до определенного номера страницы. Подробности смотрите в приведенном ниже фрагменте кода:
Выход
На следующем снимке экрана показан документ PDF, встроенный в HTML, с дополнительными параметрами, которые заставляют элемент внедрения прокручиваться до страницы номер 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-документов на веб-страницах.