Jak vývojáři vkládají prohlížení PDF, Office a CAD do .NET, React, Angular nebo Vue webových aplikací pro zvýšení uživatelské přívětivosti a efektivity: krok za krokem

Pokud se snažíte proměnit .NET aplikaci plnou dokumentů na něco, co uživatelé skutečně ocení, potřebujete prohlížeč, který zvládne PDF, Word soubory, Excel tabulky, PowerPoint prezentace a CAD výkresy — a to vše bez nutnosti nutit uživatele stahovat desktopovou aplikaci nebo spoléhat na externí cloudovou službu. Právě zde vstupuje Doconut. Jedná se o server‑side prohlížeč dokumentů, který streamuje vykreslené stránky do podporovaných webových prohlížečů a poskytuje nativní anotace, full‑textové vyhledávání (včetně OCR) a řízený tisk přímo z krabice. V tomto průvodci projdeme celý workflow: od konfigurace konverzního enginu Doconut v ASP.NET Core back‑endu až po vložení prohlížeče do React, Angular a Vue front‑endů. Připraveni dodat plynulý, efektivní dokumentový zážitek? Ponořme se do toho.

Server‑side .NET zpracování dokumentů propojené s prohlížeči dokumentů v aplikacích React, Angular a Vue

1. Proč je dedikovaný prohlížeč důležitý pro podnikové webové aplikace

Skrytá cena „stáhnout‑a‑otevřít“

Ztracený kontext – uživatelé opustí portál, otevřou dokument v samostatném okně a pak si musí pamatovat, kde byli.
Nekonzistentní vykreslování – lokálně nainstalované prohlížeče Word, Excel a CAD mohou soubory interpretovat odlišně, což vede k chybám v rozvržení, které mohou ovlivnit právní nebo inženýrské rozhodnutí.
Bezpečnostní riziko – soubory uniknou mimo firemní perimetr, což ztěžuje auditní stopy a politiku prevence ztráty dat.
Nízká produktivita – recenzenti musí balancovat mezi několika nástroji jen pro anotaci, vyhledávání nebo tisk, což zpomaluje schvalování.

Co vývojáři skutečně potřebují

Vykreslit každý podporovaný formát v prohlížeči (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
Poskytnout čisté API pro .NET back‑endy a React, Angular nebo Vue front‑endy.
Zahrnout anotace, full‑textové vyhledávání (včetně OCR) a řízený tisk bez nutnosti přidávat další knihovny.
Škálovat bezpečně — zpracovávat dokumenty na serveru, streamovat je jako obrazové dlaždice a nikdy neukazovat surové soubory klientovi.

Doconut splňuje všechny tyto požadavky. Jeho knihovna prohlížeče běží na .NET serveru, převádí zdrojové dokumenty na rastrové stránky na požádání a poskytuje tyto stránky přes lehký HTTP endpoint, který využívají podporované front‑end integrace.

2. Konfigurace middleware Doconut pro PDF konverzi v ASP.NET Core aplikaci

Prvním krokem je zaregistrovat middleware Doconut, aby back‑end mohl poskytovat dlaždice dokumentů, náhledy a data anotací. To se provádí v pipeline požadavků ASP.NET Core a vyžaduje pouze několik registrací služeb pro cachování a kontext požadavku.

Registrace middleware

Přidejte požadované služby (distribuovanou paměťovou cache a HTTP context accessor) v ConfigureServices. Poté v Configure namapujte endpoint Doconut (obvykle DocImage.axd) na middleware Doconut. Možnosti middleware vám umožní vynutit bezpečné vykreslování a skrýt interní diagnostiku před koncovými uživateli.

Inicializace licence

Doconut vyžaduje licenční soubor při spuštění. Typický přístup je vložit licenci jako zdroj a načíst ji jako stream při startu aplikace. Jakmile je licenční stream předán instanci prohlížeče Doconut, SDK je plně aktivováno a připraveno zpracovávat dokumenty.

Otevření dokumentu a získání tokenu

Když uživatel požaduje dokument, back‑end otevře soubor přes API Doconut a předá volitelné parametry jako ochranu heslem, rozlišení obrázku a časový limit. Doconut vrátí krátký token (obvykle GUID), který jednoznačně představuje otevřený dokument. Front‑end zahrnuje tento token do každého požadavku na dlaždici, například /DocImage.axd?token=abcd1234&page=1&zoom=100.

3. Zveřejnění zabezpečeného Document‑Stream API pro JavaScript frameworky

Zatímco Doconut již poskytuje nízkoúrovňový handler dlaždic přes middleware, většina týmů upřednostňuje tenký wrapper controller, který přidává autentizaci, logování a volitelné vodoznaky.

Typické odpovědnosti controlleru

Open endpoint – Přijímá identifikátor dokumentu, určuje fyzickou cestu k souboru, volá Doconut pro otevření dokumentu a vrací vygenerovaný token.
Thumbnail endpoint – Vrací malý PNG pro danou stránku, užitečný pro navigační pásky. Controller může jednoduše přesměrovat na Doconut tile handler s odpovídajícím query stringem.

Bezpečnostní úvahy

Uložte token do uživatelské relace nebo jej vložte do krátkodobého JWT claimu. Protože token sám o sobě nedokáže získat původní soubor bez server‑side cache, dokument zůstává chráněn. Stejné REST API podporuje integrační vzory pro React, Angular a Vue popsané v tomto průvodci.

4. Vložení prohlížeče do React aplikace

React vývojáři mohou vytvořit funkční komponentu, která:

Zavolá endpoint /open pro získání tokenu pro požadovaný dokument.
Sestaví pole URL obrázků, které ukazují na Doconut tile handler pro každou stránku (můžete začít s prvními deseti stránkami a načítat další na vyžádání).
Vykreslí stránky jako elementy <img>, přičemž zpracovává události posunu nebo přiblížení aktualizací parametrů URL.

Interakce s JavaScript integračními body Doconut

Doconut vloží lehký JavaScript pomocník do stránky. Pomocí tohoto pomocníka můžete spouštět příkazy jako:

Zvýraznit termín – požádat o full‑textové vyhledávání napříč dokumentem a zvýraznit odpovídající slova.
Přidat anotaci – umístit lepkavou poznámku, razítko nebo kresbu na konkrétní stránku zasláním JSON payloadu, který obsahuje číslo stránky, typ anotace, souřadnice a případná další data.

Protože těžká práce s vykreslováním zůstává na serveru, React bundle zůstává malý a UI zůstává responzivní.

5. Vložení prohlížeče do Angular a Vue – znovupoužitelné komponentní vzory

Angular

Vytvořte Angular službu, která odráží malou .NET API (otevření dokumentu, získání náhledu). Služba používá HttpClient k volání back‑end endpointů a vrací token jako observable.

Poté vytvořte komponentu, která při inicializaci požaduje token, sestaví URL obrázků stránek a zobrazí je pomocí *ngFor. Komponenta může vystavit tlačítka, která volají JavaScript pomocník Doconut pro anotaci a vyhledávání, podobně jako v React příkladu.

Vue

Ve Vue definujte komponentu, která používá lifecycle hook created k požádání o token pomocí fetch nebo axios. Uložte token a vygenerované URL stránek do datového objektu komponenty. Vykreslete stránky pomocí smyčky v-for. Reactivita Vue usnadňuje aktualizaci zobrazení, když uživatel posouvá, přibližuje nebo spustí akci anotace přes JavaScript integraci Doconut.

Všechny tři frameworky sdílejí stejný back‑end kontrakt, takže můžete znovu použít stejný ASP.NET Core controller bez úprav.

Závěr

Vložení plnohodnotného prohlížeče dokumentů již nevyžaduje mozaiku pluginů třetích stran nebo nákladné cloudové služby. S Doconut vývojáři získají jedinou server‑side knihovnu, která vykresluje PDF, Office a CAD soubory, poskytuje anotace, vyhledávání poháněné OCR a řízený tisk — a to vše při zachování bezpečnosti a škálovatelnosti dokumentů.

Připraveni pozvednout dokumentový zážitek ve vaší .NET, React, Angular nebo Vue aplikaci? Vyzkoušejte Doconut ještě dnes a uvidíte, jak rychle můžete dodat vyladěný, enterprise‑grade prohlížeč, který vaši uživatelé budou milovat.