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

Что такое PDF.js?

PDF.js — это библиотека просмотра PDF-файлов на основе JavaScript и HTML5 с открытым исходным кодом, разработанная Mozilla, которая позволяет просматривать документы PDF (Portable Document Format) в браузере.

PDF.js поддерживает несколько функций, перечисленных ниже:

• Рендеринг PDF-файлов. Вы можете открывать и просматривать, читать или отображать PDF-документы в веб-браузерах.
• Печать/сохранение PDF-файлов. PDF.js также позволяет распечатывать или сохранять PDF-документы из вашего любимого веб-браузера.
• Режим презентации. Используя режим презентации, вы можете отображать страницы PDF в полноэкранном режиме и переходить к каждой странице, как к слайду презентации.
• Навигация по PDF: PDF.js предоставляет более простые элементы управления навигацией, с помощью которых вы можете переходить к следующим или предыдущим страницам. Вы также можете быстро перейти на нужную страницу, введя номер страницы.
• Аннотации PDF. Вы также можете аннотировать PDF-документы, добавляя текст, изображения или рисунки на страницы PDF.
• Поворот страниц PDF. Используя PDF.js, вы также можете вращать страницы PDF по часовой стрелке или против часовой стрелки.
• Прокрутка PDF: PDF.js предлагает удобные элементы управления для прокрутки страниц по горизонтали или вертикали и т. д.
• Свойства PDF-документа. И последнее, но не менее важное: вы также можете просматривать свойства PDF-документов в браузере с помощью средства просмотра PDF.js.

Статистика GitHub

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

Начало работы с PDF.js

Есть три способа получить PDF.js и начать использовать его в своих веб-проектах.

1. Сборка из исходного кода

Вы можете клонировать репозиторий PDF.js из GitHub и собрать его самостоятельно после установки Node.js, gulp и зависимости PDF.js, выполнив следующие шаги:

git clone https://github.com/mozilla/pdf.js.git
cd pdf.js

https://nodejs.org/en/download

npm install -g gulp-cli

npm install

gulp server

2. Используйте готовый дистрибутив.

PDF.js также предлагает готовые дистрибутивы вместе с исходным кодом, который вы можете найти в выпусках PDF.js на GitHub. . Вы можете скачать готовую библиотеку PDF.js и начать ее использовать.

3. Используйте размещенную библиотеку через CDN.

PDF.js также размещается на бесплатных серверах CDN. Ниже приведены несколько ссылок:

• https://cdnjs.com/libraries/pdf.js
• https://www.jsdelivr.com/package/npm/pdfjs-dist
• https://unpkg.com/pdfjs-dist

Запустите средство просмотра PDF.js

После загрузки и извлечения предварительно созданной библиотеки дистрибутива из GitHub вы обнаружите две папки: build и веб. Файлы библиотеки PDF.js можно найти в папке build, где папка web содержит проект средства просмотра, включающий в себя файлыviewer.html,viewer.css,viewer.js и связанные файлы. Если вы проверите код view.html, вы увидите, что он ссылается на библиотеку pdf.js из папки сборки, а также на другие связанные файлы css и js.

Давайте запустим view.html в браузере, чтобы увидеть, как выглядит просмотрщик PDF.js:

Рендеринг/просмотр PDF-документов

Чтобы просто визуализировать или просмотреть PDF-документ в браузере с помощью библиотеки просмотра PDF.js, мы должны включить библиотеку PDF.js в заголовок нашего HTML-документа с помощью тега script, добавить canvas. > в тело HTML, а затем добавьте необходимый код JavaScript для использования pdfjsLib и объектов обещания для обработки асинхронной загрузки и рендеринга PDF-документа.

Приведенный выше код просто загружает PDF-документ в браузер без какого-либо пользовательского интерфейса или элементов управления, как показано ниже:

Онлайн-демо

Попробуйте эту полнофункциональную онлайн. Демо-версия PDF.js Viewer для изучения всех возможностей библиотеки PDF.js.

Заключение

PDF.js — это бесплатная библиотека просмотра PDF-файлов JavaScrpit с открытым исходным кодом и сильным сообществом. Он обеспечивает кроссбраузерную поддержку как современных, так и устаревших браузеров. Да, пользовательский опыт в устаревших браузерах может отличаться от современных, но в качестве бесплатной библиотеки они все равно хороши. Это безопасно и настраиваемо. Возможности ограничены, но в качестве средства просмотра PDF-файлов он работает отлично.

PDF.js предоставляет удобные API и архитектуру для создания веб-средства просмотра PDF. Поскольку добавление дополнительных элементов управления пользовательского интерфейса в средство просмотра занимает много времени, чтобы сэкономить время разработчиков, PDF.js также предоставляет исходный код полнофункционального и многофункционального средства просмотра PDF, который вы можете найти (проверьте файлыviewer.html,viewer.js и view.css и т. д.) в папке web дистрибутива библиотеки PDF.js.

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