Як розробники вбудовують перегляд PDF, Office та CAD у веб‑додатки .NET, React, Angular або Vue, підвищуючи зручність та ефективність: крок за кроком

Якщо ви намагаєтеся перетворити документозалежний .NET‑додаток у щось, що користувачі дійсно полюблять, вам потрібен переглядач, який обробляє PDF‑файли, Word‑документи, Excel‑таблиці, презентації PowerPoint і CAD‑чертежі — і все це без примусу користувачів завантажувати настільний додаток або покладатися на зовнішній хмарний сервіс. Саме тут вступає в дію Doconut. Це серверний переглядач документів, який транслює відрендерені сторінки у підтримувані веб‑браузери та забезпечує вбудовану анотацію, повнотекстовий пошук (включаючи OCR) і контрольоване друкування «з коробки». У цьому посібнику ми пройдемо весь процес: від налаштування конвертерного движка Doconut у бек‑енді ASP.NET Core до вбудовування переглядача у фронтенди React, Angular та Vue. Готові випустити плавний, ефективний досвід роботи з документами? Давайте зануримося.

Серверна обробка документів .NET, підключена до переглядачів документів у додатках React, Angular та Vue

1. Чому спеціалізований переглядач важливий для корпоративних веб‑додатків

Прихована вартість «завантажити‑і‑відкрити»

Більшість застарілих порталів просто розміщують посилання на файл у спільному ресурсі. Клік по ньому або завантажує файл, або передає його локально встановленій програмі. На практиці це створює кілька проблем:

Втрата контексту – користувачі залишають портал, відкривають документ у окремому вікні і потім мають пам’ятати, де вони були.
Несумісне відображення – локально встановлені переглядачі Word, Excel та CAD можуть по‑різному інтерпретувати файли, що призводить до помилок розмітки, які можуть вплинути на юридичні чи інженерні рішення.
Ризик безпеки – файли виходять за межі корпоративного периметру, ускладнюючи аудиторські сліди та політики запобігання втраті даних.
Низька продуктивність – рецензенти змушені користуватися кількома інструментами лише для анотації, пошуку чи друку, що сповільнює процес затвердження.

Що насправді потрібно розробникам

Сучасне рішення повинно:

Відображати всі підтримувані формати у браузері (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
Надавати чистий API для бек‑ендів .NET та фронтендів React, Angular або Vue.
Включати анотації, повнотекстовий пошук (включаючи OCR) та контрольоване друкування без підключення додаткових бібліотек.
Масштабуватись безпечно — обробляти документи на сервері, транслювати їх як плитки‑зображення та ніколи не розкривати сирі файли клієнту.

Doconut відповідає всім цим вимогам. Його бібліотека переглядача працює на сервері .NET, конвертує вихідні документи у растрові сторінки за запитом і подає їх через легкий HTTP‑endpoint, який споживається підтримуваними фронтенд‑інтеграціями.

2. Налаштування проміжного програмного забезпечення Doconut для конвертації PDF у застосунку ASP.NET Core

Першим кроком є реєстрація проміжного програмного забезпечення Doconut, щоб бек‑енд міг подавати плитки документів, мініатюри та дані анотацій. Це виконується у конвеєрі запитів ASP.NET Core і вимагає лише кількох реєстрацій сервісів для кешування та контексту запиту.

Реєстрація проміжного програмного забезпечення

Додайте необхідні сервіси (розподілений кеш пам’яті та HTTP‑контекст accessor) у ConfigureServices. Потім у Configure прив’яжіть endpoint Doconut (зазвичай DocImage.axd) до проміжного програмного забезпечення Doconut. Параметри проміжного програмного забезпечення дозволяють забезпечити безпечне рендеринг та приховати внутрішню діагностику від кінцевих користувачів.

Ініціалізація ліцензії

Doconut потребує файл ліцензії під час запуску. Типовий підхід — вбудувати ліцензію як ресурс і завантажити її як потік під час старту застосунку. Після того, як потік ліцензії передано екземпляру переглядача Doconut, SDK повністю активується і готовий обробляти документи.

Відкриття документа та отримання токену

Коли користувач запитує документ, бек‑енд відкриває файл через API Doconut, передаючи додаткові параметри, такі як захист паролем, роздільна здатність зображення та тайм‑аут. Doconut повертає короткий токен (зазвичай GUID), який унікально ідентифікує відкритий документ. Фронтенд включає цей токен у кожен запит плитки, наприклад /DocImage.axd?token=abcd1234&page=1&zoom=100.

3. Надання захищеного API потокової передачі документів для JavaScript‑фреймворків

Хоча Doconut вже надає низькорівневий обробник плиток через проміжне програмне забезпечення, більшість команд віддає перевагу легкому контролеру‑обгортці, який додає автентифікацію, логування та опціональне водяне позначення.

Типові обов’язки контролера

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, який відображає мікро‑API .NET (відкриття документа, отримання мініатюри). Сервіс використовує 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 сьогодні і побачте, як швидко можна випустити відшліфований, корпоративного рівня переглядач, який сподобається вашим користувачам.