Jak programiści osadzają podgląd PDF, Office i CAD w aplikacjach webowych .NET, React, Angular lub Vue, aby zwiększyć przyjazność dla użytkownika i wydajność: krok po kroku
Jeśli próbujesz przekształcić aplikację .NET pełną dokumentów w coś, co użytkownicy naprawdę lubią, potrzebujesz przeglądarki, która obsługuje PDF‑y, pliki Word, arkusze Excel, prezentacje PowerPoint i rysunki CAD — wszystko bez zmuszania użytkowników do pobierania aplikacji desktopowej lub polegania na zewnętrznej usłudze w chmurze. Właśnie tutaj wkracza Doconut. To serwerowa przeglądarka dokumentów, która strumieniuje wyrenderowane strony do obsługiwanych przeglądarek internetowych i zapewnia natywną adnotację, wyszukiwanie pełnotekstowe (w tym OCR) oraz kontrolowane drukowanie od razu po instalacji. W tym przewodniku przejdziemy przez cały proces: od konfiguracji silnika konwersji Doconut w back‑endzie ASP.NET Core, po osadzenie przeglądarki w front‑endach React, Angular i Vue. Gotowy, by dostarczyć płynne i wydajne doświadczenie dokumentacyjne? Zanurzmy się.
1. Dlaczego dedykowana przeglądarka ma znaczenie dla aplikacji webowych w przedsiębiorstwach
Ukryty koszt „pobierz‑i‑otwórz”
Większość starszych portalów po prostu umieszcza link do pliku na udostępnionym zasobie. Kliknięcie go albo pobiera plik, albo przekazuje go do lokalnie zainstalowanego programu. W praktyce powoduje to kilka problemów:
- Utracony kontekst – użytkownicy opuszczają portal, otwierają dokument w osobnym oknie i muszą pamiętać, gdzie byli.
- Niespójne renderowanie – lokalnie zainstalowane przeglądarki Word, Excel i CAD mogą interpretować pliki inaczej, co prowadzi do błędów układu, które mogą mieć wpływ na decyzje prawne lub inżynieryjne.
- Ryzyko bezpieczeństwa – pliki wyciekają poza granice korporacyjne, co utrudnia śledzenie audytowe i polityki zapobiegania utracie danych.
- Niska produktywność – recenzenci muszą korzystać z wielu narzędzi, aby adnotować, wyszukiwać lub drukować, co spowalnia proces zatwierdzania.
Czego naprawdę potrzebują programiści
Nowoczesne rozwiązanie powinno:
- Renderować każdy obsługiwany format w przeglądarce (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Udostępniać czyste API dla back‑endów .NET oraz front‑endów React, Angular lub Vue.
- Zawierać adnotacje, wyszukiwanie pełnotekstowe (w tym OCR) i kontrolowane drukowanie bez konieczności dołączania dodatkowych bibliotek.
- Skalować bezpiecznie — przetwarzać dokumenty na serwerze, strumieniować je jako kafelki obrazów i nigdy nie udostępniać surowych plików klientowi.
Doconut spełnia wszystkie te wymagania. Jego biblioteka przeglądarki działa na serwerze .NET, konwertuje dokumenty źródłowe na strony rastrowe na żądanie i serwuje je przez lekki endpoint HTTP wykorzystywany przez integracje front‑endowe.
2. Konfigurowanie pośrednika Doconut do konwersji PDF w aplikacji ASP.NET Core
Pierwszym krokiem jest zarejestrowanie pośrednika Doconut, aby back‑end mógł udostępniać kafelki dokumentów, miniatury i dane adnotacji. Robi się to w potoku żądań ASP.NET Core i wymaga jedynie kilku rejestracji usług do buforowania i kontekstu żądania.
Rejestrowanie pośrednika
Dodaj wymagane usługi (rozproszona pamięć podręczna i dostęp do kontekstu HTTP) w ConfigureServices. Następnie, w Configure, zamapuj endpoint Doconut (zwykle DocImage.axd) do pośrednika Doconut. Opcje pośrednika pozwalają wymusić bezpieczne renderowanie i ukryć wewnętrzne diagnostyki przed użytkownikami końcowymi.
Inicjalizacja licencji
Doconut wymaga pliku licencyjnego przy uruchamianiu. Typowe podejście polega na osadzeniu licencji jako zasobu i wczytaniu jej jako strumienia, gdy aplikacja się uruchamia. Po przekazaniu strumienia licencji do instancji przeglądarki Doconut, SDK jest w pełni aktywowane i gotowe do przetwarzania dokumentów.
Otwieranie dokumentu i uzyskiwanie tokenu
Gdy użytkownik żąda dokumentu, back‑end otwiera plik poprzez API Doconut, podając opcjonalne parametry, takie jak ochrona hasłem, rozdzielczość obrazu i limit czasu. Doconut zwraca krótki token (zwykle GUID), który jednoznacznie reprezentuje otwarty dokument. Front‑end dołącza ten token do każdego żądania kafelka, np. /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Udostępnianie bezpiecznego API strumieniowania dokumentów dla frameworków JavaScript
Choć Doconut już udostępnia niskopoziomowy handler kafelków poprzez pośrednika, większość zespołów woli cienką warstwę kontrolera, która dodaje uwierzytelnianie, logowanie i opcjonalne znakowanie wodne.
Typowe obowiązki kontrolera
- Endpoint otwierania – przyjmuje identyfikator dokumentu, wyznacza fizyczną ścieżkę pliku, wywołuje Doconut w celu otwarcia dokumentu i zwraca wygenerowany token.
- Endpoint miniatury – zwraca mały PNG dla podanej strony, przydatny do pasków nawigacyjnych. Kontroler może po prostu przekierować do handlera kafelków Doconut z odpowiednim ciągiem zapytania.
Rozważania bezpieczeństwa
Przechowuj token w sesji użytkownika lub osadź go w krótkotrwałym roszczeniu JWT. Ponieważ sam token nie pozwala na pobranie oryginalnego pliku bez pamięci podręcznej po stronie serwera, dokument pozostaje chroniony. Ten sam REST API obsługuje wzorce integracji React, Angular i Vue opisane w tym przewodniku.
4. Osadzanie przeglądarki w aplikacji React
Programiści React mogą stworzyć komponent funkcyjny, który:
- Wywołuje endpoint
/open, aby pobrać token dla żądanego dokumentu. - Buduje tablicę adresów URL obrazów, które wskazują na handler kafelków Doconut dla każdej strony (można zacząć od pierwszych dziesięciu stron i ładować kolejne w miarę potrzeby).
- Renderuje strony jako elementy
<img>, obsługując zdarzenia przewijania lub powiększania poprzez aktualizację parametrów URL.
Interakcja z punktami integracji JavaScript Doconut
Doconut wstrzykuje lekką pomocniczą bibliotekę JavaScript do strony. Dzięki niej możesz wydawać polecenia, takie jak:
- Podświetlenie terminu – żądanie wyszukiwania pełnotekstowego w całym dokumencie i podświetlenie pasujących słów.
- Dodanie adnotacji – umieszczenie notatki, pieczątki lub rysunku na konkretnej stronie poprzez wysłanie ładunku JSON zawierającego numer strony, typ adnotacji, współrzędne i ewentualne dodatkowe dane.
Ponieważ ciężka praca renderująca pozostaje po stronie serwera, pakiet React pozostaje mały, a interfejs użytkownika responsywny.
5. Osadzanie przeglądarki w Angular i Vue – wzorce komponentów wielokrotnego użytku
Angular
Utwórz serwis Angular, który odzwierciedla małe API .NET (otwieranie dokumentu, pobieranie miniatury). Serwis korzysta z HttpClient, aby wywołać endpointy back‑endu i zwraca token jako obserwowalny obiekt.
Następnie zbuduj komponent, który przy inicjalizacji żąda tokenu, konstruuje adresy URL obrazów stron i wyświetla je przy pomocy *ngFor. Komponent może udostępniać przyciski wywołujące pomocniczą bibliotekę JavaScript Doconut do adnotacji i wyszukiwania, analogicznie do przykładu React.
Vue
W Vue zdefiniuj komponent, który w hooku created żąda tokenu przy pomocy fetch lub axios. Przechowuj token i wygenerowane adresy URL stron w obiekcie data komponentu. Renderuj strony w pętli v-for. Reactywność Vue ułatwia aktualizację widoku przy przewijaniu, powiększaniu lub wywoływaniu akcji adnotacji poprzez integrację JavaScript Doconut.
Wszystkie trzy frameworki korzystają z tego samego kontraktu back‑endu, więc możesz ponownie używać tego samego kontrolera ASP.NET Core bez modyfikacji.
Zakończenie
Osadzenie w pełni funkcjonalnej przeglądarki dokumentów nie wymaga już mozaiki wtyczek firm trzecich ani kosztownych usług w chmurze. Dzięki Doconut programiści otrzymują jedną, serwerową bibliotekę, która renderuje pliki PDF, Office i CAD, zapewnia adnotacje, wyszukiwanie oparte na OCR oraz kontrolowane drukowanie — wszystko przy zachowaniu bezpieczeństwa i skalowalności dokumentów.
Gotowy, by podnieść jakość doświadczenia dokumentowego w swojej aplikacji .NET, React, Angular lub Vue? Wypróbuj Doconut już dziś i zobacz, jak szybko możesz dostarczyć dopracowaną, klasy korporacyjnej przeglądarkę, którą Twoi użytkownicy pokochają.