Hur utvecklare bäddar in PDF-, Office- och CAD-visning i .NET-, React-, Angular- eller Vue-webbappar för att öka användarvänlighet och effektivitet: Steg för steg
Om du försöker förvandla en dokumenttung .NET‑applikation till något som användarna faktiskt gillar, behöver du en visare som hanterar PDF‑filer, Word‑dokument, Excel‑blad, PowerPoint‑presentationer och CAD‑ritningar—allt utan att tvinga användarna att ladda ner ett skrivbordsprogram eller förlita sig på en extern molntjänst. Det är där Doconut kommer in. Det är en server‑sidig dokumentvisare som strömmar renderade sidor till stödjade webbläsare och erbjuder inbyggd annotering, fulltextsökning (inklusive OCR) och kontrollerad utskrift direkt ur lådan. I den här guiden går vi igenom hela arbetsflödet: från att konfigurera Doconut:s konverteringsmotor i en ASP.NET Core‑backend till att bädda in visaren i React-, Angular‑ och Vue‑frontend. Är du redo att leverera en smidig, effektiv dokumentupplevelse? Låt oss dyka ner.
1. Varför en dedikerad visare är viktig för företags‑webbappar
Den dolda kostnaden för “ladda‑ner‑och‑öppna”
De flesta äldre portaler släpper bara en länk till en fil på en delning. När man klickar på den laddas filen antingen ner eller överlämnas till ett lokalt installerat program. I praktiken skapar detta flera problem:
- Förlorat sammanhang – användare lämnar portalen, öppnar dokumentet i ett separat fönster och måste sedan komma ihåg var de var.
- Inkonsistent återgivning – lokalt installerade Word-, Excel- och CAD‑visare kan tolka filer olika, vilket kan leda till layoutfel som kan påverka juridiska eller tekniska beslut.
- Säkerhetsrisk – filer läcker utanför företagets perimeter, vilket gör revisionsspår och dataförlust‑förebyggande policies till en mardröm.
- Låg produktivitet – granskare jonglerar med flera verktyg bara för att annotera, söka eller skriva ut, vilket fördröjer godkännanden.
Vad utvecklare faktiskt behöver
En modern lösning bör:
- Rendera varje stödd format i webbläsaren (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Exponera ett rent API för .NET‑back‑ends och React-, Angular‑ eller Vue‑frontend.
- Inkludera annotering, fulltextsökning (OCR inkluderat) och kontrollerad utskrift utan att behöva dra in extra bibliotek.
- Skala säkert — bearbeta dokument på servern, strömma dem som bildbrickor och exponera aldrig råfiler för klienten.
Doconut uppfyller alla dessa krav. Dess visarbibliotek körs på .NET‑servern, konverterar källdokument till raster‑sidor på begäran och levererar dessa sidor via en lättviktig HTTP‑endpoint som konsumeras av de stödjade frontend‑integrationerna.
2. Konfigurera Doconut‑middleware för PDF‑konvertering i en ASP.NET Core‑applikation
Det första steget är att registrera Doconut:s middleware så att back‑enden kan leverera dokumentbrickor, miniatyrbilder och annoteringsdata. Detta görs i ASP.NET Core‑request‑pipeline och kräver bara ett par service‑registreringar för cache och request‑kontext.
Registrering av middleware
Lägg till de nödvändiga tjänsterna (distribuerad minnescache och HTTP‑context‑accessor) i ConfigureServices. Därefter, i Configure, mappa Doconut‑endpointen (vanligtvis DocImage.axd) till Doconut‑middleware. Middleware‑alternativen låter dig upprätthålla säker rendering och dölja interna diagnostikmeddelanden för slutanvändare.
Initiering av licensen
Doconut kräver en licensfil vid start. Det vanliga tillvägagångssättet är att bädda in licensen som en resurs och läsa in den som en ström när applikationen startar. När licensströmmen har levererats till Doconut‑visarinstansen är SDK:n fullt aktiverad och redo att bearbeta dokument.
Öppna ett dokument och erhålla en token
När en användare begär ett dokument öppnar back‑enden filen via Doconut:s API och tillhandahåller valfria parametrar såsom lösenordsskydd, bildupplösning och en timeout. Doconut returnerar en kort token (vanligtvis ett GUID) som unikt representerar det öppnade dokumentet. Front‑enden inkluderar denna token i varje brickförfrågan, till exempel /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Exponera ett säkert Document‑Stream‑API för JavaScript‑ramverk
Även om Doconut redan tillhandahåller en låg‑nivå brick‑hanterare via middleware, föredrar de flesta team en tunn wrapper‑controller som lägger till autentisering, loggning och valfri vattenmärkning.
Vanliga controller‑ansvar
- Öppna endpoint – Accepterar en dokumentidentifierare, löser den fysiska filsökvägen, anropar Doconut för att öppna dokumentet och returnerar den genererade token.
- Miniatyr‑endpoint – Returnerar en liten PNG för en given sida, användbar för navigationsfält. Controllern kan helt enkelt omdirigera till Doconut‑brick‑hanteraren med lämplig query‑string.
Säkerhetsaspekter
Lagra token i användarens session eller bädda in den i ett kortlivat JWT‑claim. Eftersom token ensam inte kan hämta den ursprungliga filen utan server‑sidans cache, förblir dokumentet skyddat. Samma REST‑API stödjer React‑, Angular‑ och Vue‑integrationsmönstren som beskrivs i den här guiden.
4. Bädda in visaren i en React‑applikation
React‑utvecklare kan skapa en funktionell komponent som:
- Anropar
/open‑endpointen för att hämta en token för det begärda dokumentet. - Bygger en array av bild‑URL:er som pekar på Doconut:s brick‑hanterare för varje sida (du kan börja med de första tio sidorna och ladda fler vid behov).
- Renderar sidorna som
<img>‑element, hanterar scroll‑ eller zoom‑händelser genom att uppdatera URL‑parametrarna.
Interaktion med Doconut:s JavaScript‑integrationspunkter
Doconut injicerar en lättviktig JavaScript‑helper i sidan. Genom denna helper kan du utfärda kommandon såsom:
- Markera ett uttryck – begär en fulltextsökning i hela dokumentet och markera matchande ord.
- Lägg till en annotering – placera en klisterlapp, stämpel eller ritning på en specifik sida genom att skicka en JSON‑payload som inkluderar sidnummer, annoteringstyp, koordinater och eventuell ytterligare data.
Eftersom det tunga renderingsarbetet sker på servern förblir React‑paketet litet och UI:t responsivt.
5. Bädda in visaren i Angular och Vue – återanvändbara komponentmönster
Angular
Skapa en Angular‑service som speglar det lilla .NET‑API:t (öppna dokument, hämta miniatyr). Servicen använder HttpClient för att anropa back‑end‑endpointarna och returnerar token som en observable.
Bygg sedan en komponent som vid initiering begär token, konstruerar sidans bild‑URL:er och visar dem med *ngFor. Komponenten kan exponera knappar som anropar Doconut:s JavaScript‑hjälp för annotering och sökning, liknande React‑exemplet.
Vue
I Vue, definiera en komponent som använder created‑livscykelhaken för att begära token via fetch eller axios. Lagra token och genererade sid‑URL:er i komponentens data‑objekt. Rendera sidorna med en v-for‑loop. Vue:s reaktivitet gör det enkelt att uppdatera vyn när användaren scrollar, zoomar eller triggar en annoteringsåtgärd via Doconut:s JavaScript‑integration.
Alla tre ramverk delar samma back‑end‑kontrakt, så du kan återanvända samma ASP.NET Core‑controller utan ändringar.
Slutsats
Att bädda in en fullutrustad dokumentvisare kräver inte längre en mosaik av tredjeparts‑plugins eller dyra molntjänster. Med Doconut får utvecklare ett enda, server‑sidigt bibliotek som renderar PDF-, Office- och CAD-filer, erbjuder annotering, OCR‑driven sökning och kontrollerad utskrift — allt medan dokumenten hålls säkra och skalbara.
Redo att höja dokumentupplevelsen i din .NET-, React-, Angular- eller Vue‑applikation? Prova Doconut idag och se hur snabbt du kan leverera en polerad, företagsklassad visare som dina användare kommer att älska.