Как создать студию аннотирования документов в браузере
Командам, работающим с контрактами, счетами-фактурами или доказательствами, нужно нечто большее, чем просто просмотрщик. Им нужен способ собирать страницы из разных источников, не загружая конфиденциальные файлы на сервер.
Вы можете создать клиентскую студию аннотирования документов, используя TypeScript, Vite и инструменты Dynamsoft.
Это приложение позволяет:
- Открывать PDF и изображения.
- Добавлять новые файлы к существующему документу вместо его замены.
- Захватывать страницы напрямую со сканера.
- Добавлять перемещаемые метки скрытия данных (redaction) и штампы утверждения.
- Удалять ненужные страницы.
- Экспортировать готовые документы в форматах PDF, PNG, JPEG или TIFF.
Технологический стек:
- Node.js 18+
- Dynamsoft Document Viewer (DDV) v4
- Dynamic Web TWAIN (DWT)
- Vite и TypeScript
Ключевая логика:
Вместо замены текущего файла используйте doc.loadSource(source, index), чтобы добавлять страницы. Это позволяет создавать единый документ из множества различных изображений и PDF-файлов.
Для работы со сканерами используйте мост Dynamic Web TWAIN. Поскольку в браузерах отсутствует стандартный API для сканеров, DWT обеспечивает соединение с оборудованием. Вы можете преобразовывать отсканированные изображения в PDF blob и мгновенно добавлять их в просмотрщик.
Для обеспечения безопасности используйте аннотации redaction. Вы можете создать черный прямоугольник поверх конфиденциального текста. Пользователи могут перемещать или изменять размер этой метки перед ее окончательным применением к документу.
Экспорт гибко настраивается. Вы можете выбрать различные режимы PDF:
- Annotation mode: оставляет метки редактируемыми.
- Flatten mode: «впекает» метки в страницу.
- Image mode: преобразует страницы в изображения.
Этот подход оставляет всю обработку на стороне клиента. Ваши данные остаются конфиденциальными и защищенными.