Багато розробників спочатку шукають бібліотеки UI‑компонентів, коли потрібно відображати документи у веб‑застосунку. Doconut Viewer – це .NET SDK для додавання безплагінового перегляду в браузері до проектів ASP.NET Core, MVC або класичних WebForms. Безпека все ще залежить від повної архітектури застосунку: автентифікація, авторизація, транспорт, зберігання, валідація, очистка, патчі та моніторинг.
1. Встановіть SDK Doconut App та підготуйте ваш .NET‑проект для роботи з кількома форматами файлів
1.1 Додайте підтримуваний пакет
Використайте поточний пакет і інструкції з офіційної сторінки завантаження Doconut. Зафіксуйте обрану версію та переконайтеся, що вона підтримує цільове середовище виконання .NET.
1.2 Перевірте посилання на пакет
Після встановлення підтвердіть посилання на пакет і розв’язану версію у файлі проєкту. Явне зазначення версій допомагає робити збірки та розгортання відтворюваними.
1.3 Увімкніть HTTPS
Doconut App вимагає SSL для всіх завантажень файлів. Переконайтеся, що ваш застосунок прослуховує HTTPS. Для застосунку, що працює на Kestrel, додайте конфігурацію кінцевої точки у appsettings.json:
{
"Kestrel": {
"Endpoints": {
"Https": {
"Url": "
}
}
}
}
Якщо ви розгортаєте на IIS, прив’яжіть HTTPS‑сертифікат до сайту. При увімкненому HTTPS кожен файл передається по захищеному каналу перед тим, як потрапити до рушія рендерингу Doconut App.
Чому Doconut App?
Doconut App – єдиний .NET‑нативний переглядач, який поєднує рендеринг без плагінів з наскрізним шифруванням AES‑256, дозволяючи відповідати вимогам комплаєнсу без додаткової інфраструктури.
2. Налаштуйте безпечне завантаження файлів та їх зберігання для управління документами
Модель безпеки Doconut App базується на трьох стовпах: SSL‑транспорт, шифрування AES‑256 у спокої та автоматичне видалення після перегляду. SDK надає готовий сервіс, який можна зареєструвати у вашому застосунку.
2.1 Зареєструйте сервіс завантаження
У Startup.cs (або Program.cs для .NET 6+) додайте сервіси Doconut до контейнера впровадження залежностей. Налаштуйте тимчасову папку зберігання, увімкніть шифрування AES‑256 та встановіть інтервал автоматичного видалення (наприклад, 10 хвилин після перегляду документа).
2.2 Створіть кінцеву точку завантаження
Реалізуйте дію контролера, яка приймає завантажений файл, передає його сервісу Doconut для безпечного зберігання та повертає короткий одноразовий токен. Токен використовується переглядачем на боці клієнта для отримання та рендерингу документа.
2.3 Захистіть кінцеву точку
Оскільки кінцева точка завантаження працює з конфіденційними даними, захистіть її автентифікацією та рол‑базованою авторизацією (наприклад, лише користувачі з роллю DocumentViewer можуть завантажувати). Це гарантує, що лише уповноважений персонал може зберігати та переглядати конфіденційні документи.
Перевага Doconut App: SDK самостійно обробляє шифрування та очистку, тому вам не доведеться писати власний криптографічний код або турбуватися про залишкові файли.
3. Вбудуйте компонент переглядача в ASP.NET Core, MVC або WebForms
Після підготовки бекенду ініціалізуйте переглядач, використовуючи ресурси та API, задокументовані для встановленої версії Doconut.
3.1 Додайте JavaScript‑пакет
У вашому спільному макеті підключіть лише ті ресурси переглядача, які описані в документації для вашої версії SDK. Не припускайте фіксованих імен пакетів або їх розташування між різними випусками.
3.2 Створіть Razor‑view для Core/MVC
Додайте представлення (наприклад, Views/Document/View.cshtml), яке містить елемент вводу файлу, контейнер для переглядача та невеликий скрипт, що завантажує вибраний файл, отримує захищений токен і ініціалізує віджет Doconut Viewer.
Скрипт має:
- Захопити вибраний файл з елемента
<input type="file">. - Відправити файл до кінцевої точки завантаження за допомогою
fetchабоXMLHttpRequest. - Після отримання авторизованої відповіді ініціалізувати переглядач, використовуючи підтримуване API встановленої версії.
3.3 Еквівалент для WebForms
У WebForms‑сторінці (наприклад, DocumentViewer.aspx) розмістіть контроль asp:FileUpload, кнопку для запуску завантаження та <div>, який буде хостити переглядач. У код‑бекенді викличте сервіс Doconut для зберігання файлу, отримайте токен і зареєструйте стартовий скрипт, що викликає JavaScript‑функцію (initViewer(token)) для створення екземпляра переглядача.
Перевага Doconut App: Один JavaScript‑віджет, три .NET UI‑моделі, жодних додаткових бібліотек. Простота у найкращому вигляді.
4. Налаштуйте переглядач для управління документами
За замовчуванням Doconut Viewer надає чисту панель інструментів, керування масштабом та перемикач теми світла/темна. Ви можете адаптувати інтерфейс під ваш бренд і під конкретні типи документів.
4.1 Налаштування панелі інструментів
При ініціалізації переглядача можна вказати, які елементи панелі мають бути видимими (наприклад, download, print, zoomIn, zoomOut, fullScreen). Видалення кнопки download запобігає збереженню оригінального файлу користувачами.
4.2 Тема та кольори
Встановіть параметр theme у значення 'dark' або 'light' і, за потреби, задайте primaryColor, що відповідає вашій корпоративній палітрі. Переглядач підтримує CSS‑змінні, що дозволяє глибше стилізувати його за допомогою власної таблиці стилів.
4.3 Інструменти, специфічні для CAD
Якщо ви відображаєте файли DWG, DXF або DGN, увімкніть параметри CAD enableMeasurement та enableLayerToggle. Це додасть інструменти вимірювання відстані, кута та площі, а також панель керування видимістю шарів безпосередньо в панелі інструментів.
4.4 Локалізація
Передайте код locale (наприклад, 'fr' для французької) під час ініціалізації. Усі рядки інтерфейсу, підказки та повідомлення про помилки будуть відображені обраною мовою.
Чому налаштовувати? Doconut App дозволяє зберегти вигляд переглядача як природного продовження вашого сайту, одночасно забезпечуючи той самий безпечний, безплагіновий досвід.
5. Перевірте інтеграцію для всіх підтримуваних форматів
Перед запуском у продакшн проведіть швидку перевірку кожного типу файлу, який ваші користувачі можуть переглядати. За допомогою переглядача Doconut App відкрийте зразок кожного формату та переконайтеся, що рендеринг, навігація та спеціалізовані інструменти працюють згідно опису.
| Формат | Сценарій тесту | Очікуваний результат |
|---|---|---|
| Великий багатосторінковий звіт з вбудованими зображеннями | Плавна прокрутка, масштабування та точне відтворення кольорів | |
| DOCX | Документ Word з таблицями та виносками | Увесь текст, таблиці та виноски видимі; без зсуву макету |
| XLSX | Електронна таблиця з діаграмами | Діаграми відображаються як векторна графіка; масштабування зберігає чіткість |
| PPTX | Презентація зі статичним попереднім переглядом | Перша слайд відображається правильно; немає пошкоджених ресурсів |
| DWG | Технічний креслення з кількома шарами | Перемикання шарів, вимірювання працює, лінії залишаються чіткими |
| PSD | Файл Photoshop з шарами | Шари видимі, кольори точні, масштабування залишається різким |
| SVG | Векторна графіка з градієнтами | Градієнти відображаються плавно; масштабування залишається різким |
| TIFF | Скан високої роздільної здатності | Зображення завантажується швидко; масштабування розкриває деталі |
Пройшовши цей чек‑лист з Doconut App, ви переконаєтеся, що кожен підтримуваний формат працює надійно для ваших користувачів.
Висновок
Вбудовування безпечного, безплагінового переглядача документів тепер просте завдяки Doconut App. Дотримуючись наведених кроків — встановлення SDK, налаштування зашифрованих завантажень, вбудовування легкого JavaScript‑віджета та кастомізації інтерфейсу — ви зможете забезпечити швидке, якісне рендеринг документів у ASP.NET Core, MVC та WebForms застосунках.
Готові оцінити? Почніть з офіційної сторінки завантаження та документації Doconut, а потім протестуйте SDK у межах того ж процесу безпекової ревізії, який застосовується до решти вашого Windows‑базованого ASP.NET застосунку.