Перейти к содержанию
Профессор Веб

Документы в вебе: PDF, заметки и печать

Создадим «Лист» — небольшой просмотрщик собственных PDF в браузере. Начнём с модели документа и первой страницы, затем добавим навигацию, масштаб, выделяемый текст, поиск, заметки и их перенос. Завершим печатным представлением и явными ограничениями входных данных.

В серии 10 уроков. Предполагается знакомство с HTML, DOM, модулями JavaScript, Promise и обработчиками событий. Если эти темы ещё непривычны, можно сначала пройти JavaScript и HTML/CSS.

Оглавление

  1. Документ и представление: модель просмотрщика — исходный PDF, состояние интерфейса и собственный образец.
  2. Первый PDF на canvas — библиотека, worker и асинхронная готовность.
  3. Страницы и последовательная отрисовка — последняя цель, отмена и один canvas.
  4. Масштаб и плотность пикселей — viewport, DPR и поворот.
  5. Текстовый слой и доступное чтение — выделение символов и отдельное текстовое представление.
  6. Поиск по страницам документа — ограниченный индекс, запрос и переход.
  7. Заметки рядом с PDF — SHA-256 версии, страницы и локальное сохранение.
  8. Экспорт и импорт заметок — схема JSON и полная проверка замены.
  9. Печатное представление документа — HTML из извлечённого текста и комментариев.
  10. Ошибки, ресурсы и границы просмотрщика — локальный файл, лимиты и завершение работы.

Исходники и среда

Архив «Лист» содержит полные состояния lesson-01 — lesson-10. В каждом есть README и авторский исходник генератора двухстраничного ASCII PDF. Готовый бинарный образец не создавался; его создаёт читатель при самостоятельной работе. Библиотека PDF.js не включена в архив: подготовка локальной vendor описана во втором уроке.

Закреплена pdfjs-dist 6.4.299. Для подготовки библиотечных ресурсов используем Node.js 24; для генератора и простого локального сервера — Python 3. Library и worker берутся из одного пакета. Открытие через file:// не входит в профиль примера.

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

Границы результата

«Лист» показывает страницы и извлечённые символы, но не выполняет OCR, не проверяет цифровые подписи и не редактирует PDF-формы. Заметки хранятся отдельно в браузере; аккаунтов и синхронизации между устройствами нет. Печатный конспект не сохраняет иллюстрации и точную геометрию оригинала. Лимиты последнего шага задают небольшую лабораторию, а не универсальную защиту от любого недоверенного документа.

Доступность сайта поможет развить альтернативные способы чтения. Безопасность приложения даст основу для будущего серверного кабинета документов. Общие учебные маршруты новой партии будут собраны в платформах и веб-инструментах.