Мы часто сталкиваемся с ситуацией, когда простая задача — показать PDF — превращается в головную боль. 200-страничный документ на iPhone SE приводит к дёрганому скроллу и неконтролируемому росту памяти до 500 МБ с последующим SIGKILL от iOS. Проблема в рендеринге: каждая страница PDF — это векторный документ, который нужно растеризовать под конкретный масштаб и разрешение экрана. Наша команда, имеющая 5-летний опыт в мобильной разработке и реализовавшая более 30 проектов с интеграцией PDF-вьюверов, решила эту задачу для нескольких заказчиков. Один из клиентов — крупный агрегатор документации — столкнулся с падением приложения на Android при открытии 150-страничного PDF. Мы внедрили постраничную загрузку на основе PdfRenderer, что снизило пиковое потребление памяти на 60% и устранило краши. Средняя экономия времени разработки при использовании готовых модулей составляет 3–4 недели, а стоимость интеграции базового решения начинается от 50 тыс. руб.
Почему нативный рендеринг лучше WebView?
<WebView source={{ uri: 'file://...' }} — самый быстрый способ показать PDF. iOS WebKit рендерит PDF нативно. Однако нет контроля над UI (не добавить custom toolbar, аннотации, поиск), и PDF открывается целиком в память. На 50+ страницах — риск OOM. Нативный рендеринг через PDFKit (iOS) и PdfRenderer (Android) даёт полный контроль, но требует нативных модулей в React Native. Мы обычно выбираем золотую середину — react-native-pdf.
Сравнение подходов к встраиванию PDF-вьювера
| Подход | Производительность | Контроль UI | Время разработки |
|---|---|---|---|
| WebView | Средняя (риск на больших PDF) | Низкий | 1–2 дня |
| Нативный модуль (PDFKit/PdfRenderer) | Высокая | Полный | 1–2 недели |
| react-native-pdf | Высокая | Частичный (через пропсы) | 3–5 дней |
| Flutter SfPdfViewer | Высокая | Полный (через Flutter API) | 3–5 дней |
react-native-pdf: готовое решение
react-native-pdf — React Native обёртка над нативными PDF API обеих платформ. Под капотом: PDFKit на iOS, PdfRenderer на Android. Постраничный рендеринг — в памяти только видимые страницы + 1–2 буферных.
import Pdf from 'react-native-pdf'; const PDFViewer = ({ uri }: { uri: string }) => { const [totalPages, setTotalPages] = useState(0); const [currentPage, setCurrentPage] = useState(1); return ( <Pdf source={{ uri, cache: true }} onLoadComplete={(numberOfPages) => setTotalPages(numberOfPages)} onPageChanged={(page) => setCurrentPage(page)} onError={(error) => console.error(error)} style={{ flex: 1 }} enablePaging horizontal fitPolicy={0} scale={1.0} minScale={0.5} maxScale={3.0} /> ); }; Параметр cache: true — первая загрузка сохраняет файл в директорию кэша приложения. Повторное открытие не делает HTTP-запрос, что ускоряет отображение до 3 раз на файлах 10+ МБ. Важно: кэш не управляется автоматически, нужна очистка по TTL или размеру.
Как реализовать ленивую загрузку страниц?
При открытии PDF из URL библиотека скачивает весь файл перед рендерингом. 50 МБ PDF — пользователь ждёт 8–12 секунд. Оптимальное решение — HTTP Range requests, если сервер поддерживает Accept-Ranges: bytes. Нативная реализация для iOS через PDFDocument(url:) с URLSession поддерживает progressive rendering (Apple PDFKit Documentation). Для React Native разработан custom native module, использующий PDFDocument с CGPDFDataProvider для потоковой загрузки. Для большинства проектов проще: показываем первую страницу как placeholder (thumbnail, предварительно сгенерированный на сервере через pdf2pic или ghostscript), пока загружается полный файл. В одном из проектов это сократило время ожидания с 8 до 1 секунды для PDF в 40 МБ.
Поиск по тексту и аннотации
react-native-pdf поддерживает поиск через pdfRef.current?.startSearch(query) — нативный поиск по тексту документа с подсветкой совпадений. Аннотации (выделение, заметки, подписи) — отдельная задача. PSPDFKit — коммерческий SDK с полным набором аннотаций. Для open-source: PDFTron (Apryse) с free-тиром. В наших проектах используем PSPDFKit, если требуется 10+ типов аннотаций; в противном случае — кастомный модуль на 2–3 типа (выделение, заметка).
Как защитить PDF от несанкционированного доступа?
PDF с паролем: react-native-pdf поддерживает password prop. Корпоративные DRM-защищённые PDF (Adobe AEPD, Microsoft IRM) требуют нативных библиотек операторов — в RN не реализованы напрямую. В таких случаях мы рекомендуем серверную раздачу с токеном авторизации. Пример: подписанный URL с TTL 1 час.
Flutter: syncfusion_flutter_pdfviewer
Syncfusion предоставляет SfPdfViewer — полнофункциональный PDF вьювер для Flutter с постраничным рендерингом, поиском и выделением. Community-лицензия бесплатна при доходе до $1 млн/год.
SfPdfViewer.network( 'https://cdn.example.com/document.pdf', onPageChanged: (PdfPageChangedDetails details) { setState(() => _currentPage = details.newPageNumber); }, ) Сравнение библиотек для аннотаций
| Библиотека | Платформы | Стоимость | Возможности |
|---|---|---|---|
| PSPDFKit | iOS, Android, Flutter, RN | Коммерческая | Аннотации, формы, подписи |
| Apryse (PDFTron) | iOS, Android, Flutter, RN | Бесплатный тир + платные уровни | Аннотации, редактирование |
| Custom нативная | iOS/Android | Бесплатно | Ограниченный функционал |
Что входит в работу по интеграции PDF-вьювера
- Анализ требований: определяем платформу, объём документов, необходимые функции (поиск, аннотации, защита).
- Выбор стека: react-native-pdf, Flutter SfPdfViewer или нативный модуль.
- Настройка рендеринга: постраничная загрузка, кэширование, поддержка масштабирования.
- Реализация UI: панель навигации, строка поиска, кнопки зума.
- Интеграция аннотаций (опционально): подключение PSPDFKit или Apryse.
- Оптимизация производительности: тестирование на 5 устройствах с разными версиями ОС.
- Деплой и документация: передача исходного кода, инструкция по сборке, API описание, 2 недели поддержки после сдачи.
Срок реализации: базовый вьювер для одной платформы занимает 2–3 недели, кросс-платформенное решение с аннотациями — 4–6 недель. Если вам нужно встроить PDF-вьювер — свяжитесь с нами, оценим проект за один день. Мы гарантируем стабильность и производительность решения. Получите консультацию — поможем выбрать оптимальный подход. Закажите внедрение — сэкономьте до 70% времени на разработку.