Как разработчики встраивают просмотр PDF, Office и CAD в веб‑приложения .NET, React, Angular или Vue, повышая удобство и эффективность: пошаговое руководство
Если вы пытаетесь превратить тяжёлое документами приложение .NET в то, что пользователи действительно любят, вам нужен просмотрщик, который умеет работать с PDF, файлами Word, таблицами Excel, презентациями PowerPoint и чертежами CAD — и всё это без необходимости скачивать настольное приложение или полагаться на внешние облачные сервисы. Именно здесь на помощь приходит Doconut. Это серверный просмотрщик документов, который передаёт отрисованные страницы в поддерживаемые веб‑браузеры и предоставляет нативные аннотации, полнотекстовый поиск (включая OCR) и контролируемую печать «из коробки». В этом руководстве мы пройдём весь процесс: от настройки движка конвертации Doconut в бэкенде ASP.NET Core до встраивания просмотрщика в фронтенды React, Angular и Vue. Готовы создать плавный и эффективный опыт работы с документами? Поехали.
1. Почему отдельный просмотрщик важен для корпоративных веб‑приложений
Скрытые издержки «скачать‑и‑открыть»
Большинство устаревших порталов просто размещают ссылку на файл в общей папке. При клике файл либо скачивается, либо открывается в локально установленной программе. На практике это создаёт несколько проблем:
- Потеря контекста — пользователи покидают портал, открывают документ в отдельном окне и потом должны помнить, где они были.
- Несогласованное отображение — локально установленные просмотрщики Word, Excel и CAD могут интерпретировать файлы по‑разному, вызывая сбои в разметке, которые могут повлиять на юридические или инженерные решения.
- Риск безопасности — файлы покидают корпоративный периметр, что делает аудит и политики предотвращения потери данных настоящим кошмаром.
- Низкая продуктивность — рецензенты вынуждены использовать несколько инструментов для аннотаций, поиска или печати, замедляя процесс утверждения.
Что действительно нужно разработчикам
Современное решение должно:
- Отрисовывать каждый поддерживаемый формат в браузере (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Предоставлять чистый API для .NET‑бэкендов и фронтендов на React, Angular или Vue.
- Включать аннотации, полнотекстовый поиск (с OCR) и контролируемую печать без необходимости подключать дополнительные библиотеки.
- Масштабироваться безопасно — обрабатывать документы на сервере, передавать их в виде тайлов‑изображений и никогда не раскрывать сырые файлы клиенту.
Doconut удовлетворяет всем этим требованиям. Его библиотека‑просмотрщик работает на сервере .NET, конвертирует исходные документы в растровые страницы по запросу и отдаёт их через лёгкий HTTP‑endpoint, который используют поддерживаемые фронтенд‑интеграции.
2. Настройка Middleware Doconut для конвертации PDF в приложении ASP.NET Core
Первый шаг — зарегистрировать middleware Doconut, чтобы бэкенд мог обслуживать тайлы документов, миниатюры и данные аннотаций. Это делается в конвейере запросов ASP.NET Core и требует лишь нескольких регистраций сервисов для кэширования и контекста запросов.
Регистрация middleware
Добавьте необходимые сервисы (distributed memory cache и HTTP context accessor) в ConfigureServices. Затем в Configure сопоставьте endpoint Doconut (обычно DocImage.axd) с middleware Doconut. Параметры middleware позволяют принудительно включать безопасную отрисовку и скрывать внутреннюю диагностику от конечных пользователей.
Инициализация лицензии
Doconut требует файл лицензии при запуске. Обычный подход — встроить лицензию как ресурс и загрузить её как поток при старте приложения. Как только поток лицензии передан экземпляру просмотрщика Doconut, SDK полностью активируется и готов к обработке документов.
Открытие документа и получение токена
Когда пользователь запрашивает документ, бэкенд открывает файл через API Doconut, передавая опциональные параметры, такие как защита паролем, разрешение изображения и тайм‑аут. Doconut возвращает короткий токен (обычно GUID), который однозначно представляет открытый документ. Фронтенд включает этот токен в каждый запрос тайла, например /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Предоставление безопасного API потоковой передачи документов для JavaScript‑фреймворков
Хотя Doconut уже предлагает низкоуровневый обработчик тайлов через middleware, большинство команд предпочитают лёгкий контроллер‑обёртку, который добавляет аутентификацию, логирование и опциональное водяное знакирование.
Типичные обязанности контроллера
- Endpoint открытия — принимает идентификатор документа, определяет физический путь к файлу, вызывает Doconut для открытия документа и возвращает сгенерированный токен.
- Endpoint миниатюры — возвращает небольшое PNG‑изображение для заданной страницы, полезное для навигационных полос. Контроллер может просто перенаправить запрос к обработчику тайлов Doconut с соответствующей строкой запроса.
Соображения безопасности
Храните токен в сессии пользователя или внедряйте его в короткоживущий JWT‑запрос. Поскольку токен сам по себе не может получить оригинальный файл без серверного кэша, документ остаётся защищённым. Один и тот же REST‑API поддерживает интеграцию с React, Angular и Vue, описанную в этом руководстве.
4. Встраивание просмотрщика в приложение React
Разработчики React могут создать функциональный компонент, который:
- Вызывает endpoint
/openдля получения токена запрашиваемого документа. - Формирует массив URL‑ов изображений, указывающих на обработчик тайлов Doconut для каждой страницы (можно начать с первых десяти страниц и подгружать остальные по требованию).
- Отображает страницы как элементы
<img>, обрабатывая события прокрутки или масштабирования путём обновления параметров URL.
Взаимодействие с JavaScript‑точками интеграции Doconut
Doconut внедряет лёгкий JavaScript‑помощник в страницу. Через этот помощник можно выполнять команды, такие как:
- Выделить термин — запросить полнотекстовый поиск по документу и подсветить найденные слова.
- Добавить аннотацию — разместить стикер, печать или рисунок на конкретной странице, отправив JSON‑payload, содержащий номер страницы, тип аннотации, координаты и любые дополнительные данные.
Поскольку тяжёлая отрисовка остаётся на сервере, размер сборки React остаётся небольшим, а интерфейс — отзывчивым.
5. Встраивание просмотрщика в Angular и Vue — паттерны переиспользуемых компонентов
Angular
Создайте Angular‑service, который отражает небольшой .NET‑API (открыть документ, получить миниатюру). Сервис использует HttpClient для вызова бэкенд‑endpoint‑ов и возвращает токен как observable.
Затем построьте компонент, который при инициализации запрашивает токен, формирует URL‑ы страниц и отображает их с помощью *ngFor. Компонент может предоставлять кнопки, вызывающие JavaScript‑помощник Doconut для аннотаций и поиска, аналогично примеру для React.
Vue
Во Vue определите компонент, который в хуке created запрашивает токен через fetch или axios. Сохраните токен и сформированные URL‑ы страниц в объекте data компонента. Отображайте страницы с помощью цикла v-for. Реактивность Vue упрощает обновление представления при прокрутке, масштабировании или запуске действия аннотации через JavaScript‑помощник Doconut.
Все три фреймворка используют один и тот же бэкенд‑контракт, поэтому один ASP.NET Core контроллер можно переиспользовать без изменений.
Заключение
Встраивание полнофункционального просмотрщика документов больше не требует мозаики сторонних плагинов или дорогостоящих облачных сервисов. С Doconut разработчики получают единую серверную библиотеку, которая отрисовывает PDF, Office и CAD‑файлы, предоставляет аннотации, поиск с поддержкой OCR и контролируемую печать — всё при сохранении безопасности и масштабируемости документов.
Готовы поднять работу с документами в вашем приложении .NET, React, Angular или Vue на новый уровень? Попробуйте Doconut уже сегодня и убедитесь, как быстро можно выпустить polished, enterprise‑grade просмотрщик, который полюбят ваши пользователи.