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 obfitującą w dokumenty w coś, co naprawdę podoba się użytkownikom, 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. Jest to serwerowa przeglądarka dokumentów, która strumieniuje renderowane strony do obsługiwanych przeglądarek internetowych i zapewnia natywną adnotację, wyszukiwanie pełnotekstowe (w tym OCR) oraz kontrolowane drukowanie od razu po wyjęciu z pudełka. W tym przewodniku przejdziemy przez cały przepływ pracy: od konfiguracji silnika konwersji Doconut w back‑endzie ASP.NET Core, po osadzenie przeglądarki w front‑endach React, Angular i Vue. Gotowy, aby 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 portali 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 audytów i realizację polityk zapobiegania utracie danych.
- Niska produktywność – recenzenci muszą żonglować wieloma narzędziami, 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) oraz kontrolowane drukowanie bez konieczności dołączania dodatkowych bibliotek.
- Skalować się 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 kryteria. Jego biblioteka przeglądarki działa na serwerze .NET, konwertuje dokumenty źródłowe na strony rastrowe na żądanie i udostępnia te strony przez lekki punkt końcowy HTTP konsumowany przez obsługiwane integracje front‑endowe.
2. Konfigurowanie pośrednika Doconut dla konwersji PDF w aplikacji ASP.NET Core
Pierwszym krokiem jest zarejestrowanie pośrednika Doconut, aby back‑end mógł serwować kafelki dokumentów, miniatury i dane adnotacji. Robi się to w potoku żądań ASP.NET Core i wymaga jedynie kilku rejestracji usług dla pamięci podręcznej i kontekstu żądania.
Rejestrowanie pośrednika
Dodaj wymagane usługi (rozproszona pamięć podręczna w pamięci i dostęp do kontekstu HTTP) w ConfigureServices. Następnie, w Configure, zmapuj punkt końcowy 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 uzyskanie tokenu
Gdy użytkownik żąda dokumentu, back‑end otwiera plik za pośrednictwem 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ż zapewnia niskopoziomowy obsługiwacz 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, ustala fizyczną ścieżkę pliku, wywołuje Doconut w celu otwarcia dokumentu i zwraca wygenerowany token.
- Endpoint miniatury – zwraca mały PNG dla danej strony, przydatny do pasków nawigacyjnych. Kontroler może po prostu przekierować do obsługiwacza 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 obsługiwacz 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 pełnotekstowego wyszukiwania w 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 jest responsywny.
5. Osadzanie przeglądarki w Angular i Vue – wzorce komponentów wielokrotnego użytku
Angular
Utwórz usługę Angular, która odzwierciedla małe API .NET (otwieranie dokumentu, pobieranie miniatury). Usługa 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 użyciu *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 używa hooka cyklu życia created, aby poprosić o token za pomocą fetch lub axios. Przechowuj token i wygenerowane adresy URL stron w obiekcie data komponentu. Renderuj strony przy pomocy pętli v-for. Reactywność Vue ułatwia aktualizację widoku, gdy użytkownik przewija, powiększa lub wyzwala akcję 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 zewnętrznych wtyczek 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, aby 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ą pokochają Twoi użytkownicy.