Я
7/10/2026

Як вбудувати переглядач документів без плагінів у ASP.NET

Покроковий посібник для інженерів .NET, які потребують вбудувати безпечний, безплагіновий переглядач документів Doconut App у проекти ASP.NET Core, MVC або WebForms.

Так—ви можете вбудувати безпечний, безплагіновий онлайн‑переглядач файлів у будь‑який застосунок ASP.NET Core, MVC або WebForms всього за кілька хвилин, і Doconut App виконує всю складну роботу.
Компанії, які надають контракти, креслення чи дизайнерські активи, потребують переглядача, що дотримується корпоративних політик безпеки, працює в будь‑якому браузері та ніколи не змушує користувачів встановлювати сторонні плагіни. Doconut App саме це забезпечує: переглядач у браузері, який підтримує PDF, Office, CAD та понад 50 інших форматів, з шифруванням AES‑256, завантаженням лише через SSL та повністю налаштовуваним інтерфейсом. У цій статті ми пройдемо весь процес — від захищеного завантаження файлу до рендерингу переглядача — щоб ви могли створити готове до використання корпоративне рішення без розробки власного рушія рендерингу.


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

Сучасні компанії розглядають кожен документ як потенційну витоку даних. Коли ви вбудовуєте переглядач, який покладається на ActiveX, Flash або нативний клієнт, ви успадковуєте три ризики:

РизикВплив на ваш .NET‑додатокЯк Doconut App усуває його
Залежність від плагінуКористувачі змушені встановлювати або вмикати плагін у браузері, що призводить до запитів у службу підтримки та проблем з відповідністю.Doconut працює повністю в HTML5/Canvas, не потребуючи жодних плагінів.
Нешифрований трансферФайли передаються по HTTP або зберігаються у відкритому вигляді, що порушує GDPR, HIPAA та внутрішні політики.Всі завантаження проходять через SSL, а файли зберігаються з шифруванням AES‑256.
Неконтрольований життєвий циклФайли можуть залишатися на сервері, збільшуючи поверхню уразливості.Doconut автоматично видаляє файли після перегляду, забезпечуючи коротке вікно зберігання.

Оскільки переглядач постачається як JavaScript‑компонент, який спілкується з безпечним сервісом рендерингу Doconut, ваш .NET‑стек залишається чистим — без додаткових нативних бібліотек, сторонніх бінарних файлів та додаткових аудитів відповідності.


2. Підготовка вашого .NET‑проєкту – мінімальне налаштування для ASP.NET Core, MVC та WebForms

Незалежно від того, чи використовуєте ASP.NET Core, MVC 5 чи WebForms, кроки підготовки однакові:

  1. Додайте пакет скриптів Doconut
    Doconut розміщує легковаговий скрипт переглядача на своєму CDN. Додайте наступний рядок у файл макету (наприклад, _Layout.cshtml або Site.Master):

    <script src="https://doconut.app/viewer.min.js"></script>
    
  2. Створіть елемент‑заповнювач
    Переглядач вставляє canvas у будь‑який <div>, який ви вкажете. Приклад для Razor:

    <div id="docViewer" style="width:100%; height:800px;"></div>
    

    Для WebForms розмістіть <asp:Panel> з атрибутом runat="server" та задайте ID="docViewer".

  3. Підключіть CSS Doconut (необов’язково)
    Якщо потрібна стандартна панель інструментів і тема, підключіть файл стилів:

    <link rel="stylesheet" href="https://doconut.app/viewer.min.css" />
    

Це все, що потрібно для статичних ресурсів. Решта роботи виконується у вашому серверному коді (завантаження, шифрування, генерація токену) та невеликому скрипті ініціалізації на боці клієнта.


3. Побудова безпечного кінцевого пункту завантаження – AES‑256, SSL та автоматичне видалення

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

Робочий процес на сервері

  1. Прийняти завантажений файл — використовуйте стандартний IFormFile (або HttpPostedFile у WebForms) для отримання документа від клієнта.
  2. Зашифрувати файл за допомогою AES‑256 — перед збереженням потоку зашифруйте його, використовуючи бібліотеку System.Security.Cryptography.Aes. Збережіть зашифрований blob у безпечному місці (наприклад, Azure Blob Storage з увімкненим серверним шифруванням або S3‑бакет з SSE‑AES256).
  3. Згенерувати підписаний URL з коротким терміном дії — створіть URL, дійсний кілька хвилин (наприклад, 5 хвилин). URL має бути HTTPS і містити криптографічний токен, який може перевірити Doconut. Більшість провайдерів хмарних сховищ пропонують функцію “pre‑signed URL”, що підходить для цього.
  4. Повернути підписаний URL клієнту — надішліть JSON‑відповідь, що містить URL. Клієнт передасть цей URL переглядачу Doconut.
  5. Запланувати автоматичне видалення — після закінчення терміну дії підписаного URL фонове завдання (Hangfire, Azure Functions тощо) видаляє зашифрований blob, гарантуючи, що файл не залишиться на сервері.

Аналоги для MVC / WebForms

  • MVC — розмістіть ту ж логіку у звичайному методі контролера та поверніть JsonResult.
  • WebForms — реалізуйте обробник .ashx або метод сторінки, який виконує ті ж кроки: отримати Request.Files[0], зашифрувати, згенерувати підписаний URL і записати JSON‑відповідь.

Єдина різниця — синтаксис маршрутизації; безпековий процес залишається ідентичним.


4. Рендеринг переглядача Doconut – від URL до канваса в браузері

Після того, як клієнт отримав підписаний URL, переглядач можна запустити одним викликом JavaScript. SDK Doconut автоматично обробляє потокове передавання, рендеринг та взаємодію UI.

<script>
    // Припустимо, що `response.viewerUrl` містить підписаний URL, повернутий кінцевою точкою завантаження
    function launchViewer(viewerUrl) {
        // Ініціалізуємо переглядач Doconut. Глобальний об’єкт, який надає скрипт, — `DoconutViewer`.
        DoconutViewer.init({
            containerId: "docViewer",   // <div>, який ми розмістили вище
            fileUrl: viewerUrl,          // Підписаний, HTTPS‑URL до зашифрованого файлу
            toolbar: true,               // Показати вбудовану панель інструментів
            theme: "light"              // Додаткова візуальна тема
        });
    }

    // Приклад: після успішного завантаження
    fetch("/api/document/upload", {
        method: "POST",
        body: myFormData,
        credentials: "include"
    })
    .then(r => r.json())
    .then(data => launchViewer(data.viewerUrl));
</script>

Чому це працює у будь‑якій .NET‑версії

  • ASP.NET Core Razor — скрипт розташований у тому ж view, що містить форму завантаження, тому процес плавний.
  • MVC — використайте @section Scripts, щоб вставити той самий фрагмент; контролер повертає JSON, який споживає $.ajax.
  • WebForms — зареєструйте скрипт через ClientScript.RegisterStartupScript після завершення завантаження і викличте launchViewer так само.

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


5. Налаштування переглядача під ваш бренд – тонка настройка онлайн‑переглядача файлів

Корпоративні клієнти часто потребують, щоб переглядач виглядав як частина їхнього порталу. UI Doconut App повністю налаштовується і дозволяє:

НалаштуванняЯк застосувати у .NET
Розташування панелі інструментівПередайте toolbar: false і створіть власні кнопки, що викликають JavaScript‑API переглядача (наприклад, zoomIn(), print()).
Колірна схемаВстановіть theme: "dark" або підключіть власний CSS‑файл, що перевизначає стандартні класи.
Мова та доступністьDoconut читає атрибут lang у контейнері; можна також додати ARIA‑мітки через параметр accessibility.
Обробники подійКолбеки типу onPageChange, onError та onDownload дозволяють записувати метрики використання у вашу існуючу систему телеметрії.

Усі ці параметри задаються в тому ж JavaScript‑об’єкті, що показано вище. Оскільки переглядач працює повністю на клієнті, навантаження на сервер не зростає — ваш .NET‑бекенд продовжує займатися лише автентифікацією, шифруванням та бізнес‑логікою.


6. Продуктивність та масштабованість – зберігайте швидкість роботи

Вбудовування переглядача у портал з великим навантаженням піднімає два практичні питання: час завантаження та одночасний рендеринг. Doconut App вирішує обидва питання «з коробки», проте ви можете підвищити продуктивність за допомогою кількох .NET‑специфічних трюків.

ПитанняВбудована перевага DoconutДодаткова порада для .NET
Початкове завантаженняСкрипт переглядача важить лише ~150 KB у gzipped‑версії.Увімкніть статичну компресію (app.UseResponseCompression()) та кешування (Cache‑Control: public, max‑age=31536000).
Потокове передавання файлівDoconut передає лише потрібні сторінки, використовуючи HTTP‑range‑запити.Розмістіть зашифровані блоби у регіональному CDN (Azure Front Door, Amazon CloudFront) для зниження затримки.
Одночасні користувачіРендеринг виконується на клієнті; сервер лише один раз подає зашифрований файл за перегляд.Обмежте швидкість запитів до кінцевої точки завантаження за допомогою IApplicationRateLimiter, щоб захиститися від пікових навантажень.
Використання пам’ятіНемає серверних бібліотек конвертування PDF, тому процес ASP.NET залишається легким.За потреби винесіть сервіс завантаження у окремий мікросервіс, якщо вже використовуєте важку чергу фонових задач.

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


Ключові висновки

  • Doconut App пропонує безплагіновий, 100 % безпечний переглядач, який працює з ASP.NET Core, MVC та WebForms.
  • Завантаження здійснюються лише через SSL, зберігаються з шифруванням AES‑256 та автоматично видаляються після закінчення терміну дії підписаного URL.
  • Інтеграція вимагає лише скрипту CDN, контейнерного <div> і невеликої серверної кінцевої точки, що повертає підписаний URL.
  • Переглядач підтримує PDF, Office, CAD та понад 50 форматів зображень — без потреби у серверному конвертуванні.
  • UI можна повністю кастомізувати під корпоративний стиль, а переглядач пропонує вбудовані інструменти масштабування, вимірювання та шарування для CAD‑файлів.
  • Продуктивність забезпечується на боці клієнта; розробникам .NET потрібно лише налаштувати компресію статичних файлів та, за потреби, кешування CDN.
  • Весь процес — від захищеного завантаження до рендерингу у браузері — чітко вписується у вже існуючі .NET‑механізми автентифікації та авторизації.

Поширені запитання

Q1: Чи потрібно встановлювати якісь пакети NuGet для використання Doconut?
A: Ні. Переглядач постачається як клієнтський JavaScript‑бандл з CDN Doconut. На сервері потрібні лише стандартні middleware ASP.NET Core для завантаження файлів та їх шифрування, які, швидше за все, вже присутні у вашому проєкті.

Q2: Як Doconut гарантує, що файл буде видалений після перегляду?
A: Doconut генерує підписаний URL з коротким терміном дії (зазвичай п’ять хвилин). Після закінчення цього терміну ви (або фонове завдання очищення) видаляєте зашифрований blob. Це забезпечує, що документ не зберігається довше, ніж потрібно, і відповідає суворим політикам зберігання даних.

Q3: Чи можна друкувати або експортувати документ за допомогою переглядача?
A: Так. Вбудована панель інструментів Doconut включає кнопки друку та експорту, які зберігають оригінальну якість і макет вихідного файлу.


Готові вбудувати безпечний, безплагіновий переглядач документів у ваш .NET‑додаток? Почніть працювати з Doconut App вже сьогодні та безпечно, миттєво надавайте PDF, Office, CAD та десятки інших форматів.