Как разработчики встраивают просмотр 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
Добавьте необходимые сервисы (распределённый кэш в памяти и IHttpContextAccessor) в 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 остаётся небольшим, а UI — отзывчивым.
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 уже сегодня и убедитесь, как быстро можно выпустить полированный, корпоративного уровня просмотрщик, который полюбят ваши пользователи.