Лучшие библиотеки PDF на React в 2021 году

1. React-pdf / renderer - специализируется на рендеринге и создании PDF-файлов.

React-pdf / renderer - широко используемая библиотека для создания файлов PDF в браузере и на сервере.

Эта библиотека предлагает некоторые базовые компоненты для начала работы, и по мере знакомства вы можете настроить их, чтобы получить более привлекательный дизайн.

<Document>: это корень файла PDF.
<Page> : Этим тегом описывается отдельная страница. Он должен быть определенного размера (например, A4).
<View>: универсальный контейнер, используемый для стилизации и форматирования PDF-файлов. Вы можете использовать StyleSheet.create() API для стилизации ваших представлений с полной возможностью свойств Flexbox и CSS для компоновки PDF-файлов, аналогично тому, как это используется в React Native.
<Text>: используется для отображения текста.
<Image>: Может использоваться для вставки изображений в документ PDF.
<Link>: Может использоваться для создания аннотаций гиперссылок.

Кроме того, React-pdf / renderer обладает некоторыми удивительными функциями, которые можно использовать для создания потрясающих документов. Я могу легко перечислить некоторые из них следующим образом:

Поддержка множества стилей и свойств CSS.
Больше контроля над документом через usePDF hook API.
Предоставляет Node API.
Отличная документация.
Быстро и эффективно.
Легко настраиваемый и простой в использовании.

В дополнение ко всему этому, библиотека React-pdf/renderer имеет около 93 000 загрузок в неделю и более 9,3 тысяч звезд на GitHub.

Вы можете легко установить эту библиотеку в свой проект с помощью команды npm install — save @react-pdf/renderer, а в приведенном ниже коде показан простой пример использования React-pdf / renderer.

2. React-pdf - отображает PDF-файлы, как если бы они были изображениями.

React-pdf / renderer, о котором мы говорили ранее, специализируется на создании PDF-файлов. Но если вы ищете библиотеку для отображения только PDF-файлов, React-pdf - лучший вариант.

React-pdf предоставляет API компонента React, который позволяет открывать файлы PDF и отображать их с помощью PDF.js. Хотя это простая библиотека, предназначенная для просмотра PDF-файлов, у нее есть несколько удивительных функций, таких как:

Простота использования - вставьте компонент «Документ» и придайте ему опору файла. React-pdf разберется, является ли это URL-адресом, файлом или base64.
Поддержка настраиваемых событий.
Множественные методы рендеринга.
Поддержка выделения текста и аннотаций.
Кроссбраузерная совместимость.
Специальные возможности - React-pdf не только отображает PDF-файлы как изображения. Но также и видимые текстовые слои, которые могут уловить программы чтения с экрана, что делает ваш контент более доступным для людей с ослабленным зрением.
Бесплатно и с открытым исходным кодом.

Кроме того, более 296000 загрузок в неделю и 4,6 тыс. Звезд на GitHub показывают, насколько популярна эта библиотека в сообществе React.

Вы можете установить его с помощью команды npm i react-pdf, а в приведенном ниже примере показано базовое использование React-pdf.

3. @ phuocng / react-pdf-viewer - Работает на React Hooks.

React-pdf-viewer - это компонент React, полностью работающий на хуках React и написанный на TypeScript.

Несмотря на то, что он новый, React-pdf-viewer имеет несколько интересных функций, которые заставят вас влюбиться в него. Для лучшего понимания я перечислю их, как показано ниже:

Поддержка документов, защищенных паролем.
Масштаб: поддержка настраиваемых уровней, таких как фактический размер, размер страницы и ширина страницы.
Навигация между страницами.
Найдите текст.
Предварительный просмотр эскизов страниц.
Просматривайте оглавление и перемещайтесь по нему.
Список и загрузка вложений.
Вращение и множество режимов прокрутки.
Режимы выделения текста и ручного инструмента.
Полноэкранный режим.
Может открывать локальные файлы (например, перетаскивать локальный файл для его просмотра).
Скачайте файл и распечатайте.
Просмотрите свойства документа.
Поддержка SSR.

Кроме того, он полностью настраивается благодаря своей коллекции плагинов и помогает пользователям с отличной документацией.

Прошел всего год с момента его первого выпуска, а его уже более 2000 загрузок еженедельно и 519 звезд на GitHub.

Примечание. Для использования React-pdf-viewer у вас должна быть версия React 16.8+ и версия TypeScript 3.8+.

Вы можете установить его с помощью команды npm i @phuocng/react-pdf-viewer, а в приведенном ниже примере показано базовое использование React-pdf-viewer.

4. React-file-viewer - поддерживает множество форматов файлов.

React-file-viewer - это расширяемая программа просмотра файлов для веб-приложений, которая поддерживает PDF-файлы, изображения, csv, xslx и docx.

Эта библиотека предоставляет компонент с именем FileViewer, который используется для отображения содержимого, и принимает несколько свойств:

fileType Строка: тип ресурса для отображения. Если вы используете неподдерживаемый тип файла, появится уведомление о неподдерживаемом типе файла.
filePath String: URL ресурса, который будет отображать FileViewer .
onError Function [необязательно]: эта функция будет вызываться, если программе просмотра файлов не удается получить или отобразить запрошенный ресурс. Здесь вы можете указать обратный вызов утилиты ведения журнала.
errorComponent react element [необязательно]: компонент, отображаемый в случае ошибки, а не компонент ошибки по умолчанию в программе response-file-viewer.
unsupported Component react element [Необязательно]: компонент для визуализации, если формат файла не поддерживается.

Кроме того, он имеет некоторые особенности, такие как:

Возможность тестирования с помощью Jest или Enzyme.
Экономия времени за счет запуска линтера с make lint для обнаружения ошибок перед запуском нашего кода.
Расширяемость - легко добавлять поддерживаемые типы файлов.

Кроме того, это одна из самых популярных библиотек для просмотра PDF-файлов с 17 348 загрузками в неделю и 291 звездой на GitHub.

Примечание. Эта библиотека хорошо работает с React 16+. Если вы используете версию React ‹16, вам, скорее всего, потребуется установить React-file-viewer версии 0.5.

React-file-viewer можно установить с помощью команды npm i react-file-viewer, а в приведенном ниже примере показан простой пример React-file-viewer.

5. @ mikecousins / react-pdf

@ mikecousins / react-pdf - это компонент, который использует PDF.js для рендеринга PDF-документов.

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

file -URL файла PDF.
page - обозначает страницу, которую вы хотите отобразить. По умолчанию = 1.
scale- Позволяет масштабировать PDF. По умолчанию = 1.
onDocumentLoadSuccess -Вы можете определить функцию обратного вызова, которая будет вызываться после полной загрузки данных PDF-документа.
onDocumentLoadFail- Позволяет вам определить обратный вызов, который вызывается при возникновении ошибки загрузки данных PDF-документа.
onPageLoadSuccess -Позвольте вам определить обратный вызов, который будет вызываться после завершения загрузки данных страницы PDF.
onPageRenderSuccess -Позвольте вам определить обратный вызов, который будет выполняться после того, как страница PDF будет полностью отрисована в DOM.

Если вы думаете, что это слишком много работы; вы можете просто использовать Pdfcomponent напрямую, который использует ловушку usePdf внутри.

У пакета npm @mikecousins/react-pdf-js еженедельно 2646 загрузок с 497 звездами GitHub.

Вы можете просто установить @ mikecousins / react-pdf с yarn add @mikecousins/react-pdf или npm install @mikecousins/react-pdf.

Последние мысли

Проанализировав функции, популярность, проблемы безопасности и поддержку сообщества, я бы сказал, что лучшим вариантом для библиотеки просмотра PDF является React-pdf.

Учитывая структуру выпущенных версий, деятельность репозитория и другие соответствующие данные, статус обслуживания React-pdf значительно опережает все другие библиотеки.

Однако выбор библиотеки может быть изменен в зависимости от ваших требований. Думаю, эта статья наверняка поможет вам больше узнать об этих библиотеках.

Спасибо за чтение…!!!

Создавайте лучшие библиотеки компонентов и системы проектирования

Делитесь компонентами между командами и проектами, чтобы ускорить разработку и убедиться, что ваши пользователи видят единообразный дизайн в каждой точке взаимодействия.

Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания, совместного использования и внедрения компонентов в разных командах и приложениях. Создайте центр компонентов бесплатно попробуйте →