Як розробники вбудовують перегляд 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, що містить номер сторінки, тип анотації, координати та додаткові дані.
Оскільки важка робота з рендерингом залишається на сервері, bundle 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 сьогодні і переконайтеся, як швидко можна випустити витончений, корпоративного рівня переглядач, який полюблять ваші користувачі.