Jak vývojáři vkládají PDF, Office a CAD prohlížeč 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ů v 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 do hry 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 backendu až po vložení prohlížeče do React, Angular a Vue front‑endů. Připraveni dodat hladký a efektivní dokumentační zážitek? Ponořme se do toho.
1. Proč je dedikovaný prohlížeč důležitý pro podnikovou webovou aplikaci
Skrytá cena „stáhnout‑a‑otevřít“
Většina starších portálů jednoduše nasadí odkaz na soubor na sdíleném úložišti. Kliknutí buď stáhne soubor, nebo ho předá lokálně nainstalovanému programu. V praxi to vytváří několik problémů:
- 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 různě, což vede k rozvržení, které může ovlivnit právní či 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 schvalovací procesy.
Co vývojáři skutečně potřebují
Moderní řešení by mělo:
- Vykreslovat každý podporovaný formát v prohlížeči (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Poskytovat čisté API pro .NET backendy a React, Angular nebo Vue front‑endy.
- Obsahovat 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 běží na .NET serveru, převádí zdrojové dokumenty na rastrové stránky na vyžádání a poskytuje tyto stránky prostřednictvím lehkého HTTP endpointu, který konzumují podporované front‑end integrace.
2. Konfigurace Doconut Middleware pro konverzi PDF v ASP.NET Core aplikaci
Prvním krokem je zaregistrovat Doconut middleware, aby backend mohl poskytovat dlaždice dokumentů, náhledy a data anotací. To se provádí v požadavkovém pipeline ASP.NET Core a vyžaduje jen pár registrací služeb pro cache a kontext požadavku.
Registrace middleware
Přidejte požadované služby (distributed memory cache a HTTP context accessor) v metodě ConfigureServices. Poté v metodě Configure namapujte Doconut endpoint (obvykle DocImage.axd) na Doconut middleware. 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 startu. Typický přístup je vložit licenci jako zdroj a načíst ji jako stream při spuštění aplikace. Jakmile je licenční stream předán instanci Doconut vieweru, 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, backend otevře soubor přes Doconut API, přičemž může předat volitelné parametry jako ochranu heslem, rozlišení obrazu a časový limit. Doconut vrátí krátký token (obvykle GUID), který jednoznačně reprezentuje otevřený dokument. Front‑end tento token zahrne do každého požadavku na dlaždici, např. /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Expozice 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ů preferuje tenký wrapper controller, který přidá autentizaci, logování a volitelné vodoznakování.
Typické odpovědnosti controlleru
- Open endpoint — přijme identifikátor dokumentu, zjistí fyzickou cestu k souboru, zavolá Doconut pro otevření dokumentu a vrátí vygenerovaný token.
- Thumbnail endpoint — vrátí malý PNG pro danou stránku, užitečný pro navigační lišty. Controller může jednoduše přesměrovat na Doconut handler dlaždic s odpovídajícím řetězcem dotazu.
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ě nemůže získat původní soubor bez server‑side cache, dokument zůstává chráněn. Stejné REST API podporuje integraci pro React, Angular i Vue popsanou 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
/opena získá token 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ích deseti stránkami a načítat další na vyžádání).
- Vykreslí stránky jako
<img>elementy a bude reagovat na události posouvání nebo zoomu aktualizací parametrů URL.
Interakce s Doconut JavaScript integračními body
Doconut vkládá lehkou JavaScript pomocnou knihovnu do stránky. Pomocí této knihovny můžete spouštět příkazy jako:
- Zvýraznit termín — požádejte o full‑textové vyhledávání napříč dokumentem a zvýrazněte odpovídající slova.
- Přidat anotaci — umístěte lepkavou poznámku, razítko nebo kresbu na konkrétní stránku tím, že pošlete JSON payload obsahující číslo stránky, typ anotace, souřadnice a případná další data.
Protože těžká část vykreslování 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á zrcadlí malý .NET API (otevřít dokument, získat náhled). Služba používá HttpClient k volání backend endpointů a vrací token jako observable.
Poté vytvořte komponentu, která při inicializaci požádá o token, sestaví URL obrázků stránek a zobrazí je pomocí *ngFor. Komponenta může vystavit tlačítka, která volají Doconut JavaScript pomocnou knihovnu pro anotace a vyhledávání, podobně jako v React příkladu.
Vue
Ve Vue definujte komponentu, která využí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. Stránky vykreslete pomocí v-for smyčky. Vue reaktivita usnadňuje aktualizaci zobrazení při posouvání, zoomu nebo spouštění akce anotace přes Doconut JavaScript integraci.
Všechny tři frameworky sdílejí stejnou backendovou smlouvu, 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 třetích stran pluginů nebo nákladné cloudové služby. S Doconut získají vývojáři jedinou server‑side knihovnu, která vykresluje PDF, Office i CAD soubory, poskytuje anotace, OCR‑poháněné vyhledávání a řízený tisk — a to vše při zachování bezpečnosti a škálovatelnosti dokumentů.
Jste připraveni pozvednout dokumentační zážitek ve vaší .NET, React, Angular nebo Vue aplikaci? Vyzkoušejte Doconut ještě dnes a uvidíte, jak rychle můžete dodat elegantní, podnikovou úroveň prohlížeče, kterou uživatelé zbožňují.