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 här Doconut kommer in. Det är en server‑sidig dokumentvisare som strömmar renderade sidor till stödda 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 Doco nuts konverteringsmotor i en ASP.NET Core‑backend till att bädda in visaren i React‑, Angular‑ och Vue‑frontend. 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 delad plats. När man klickar på den laddas filen ner eller öppnas i ett lokalt installerat program. I praktiken skapar detta flera problem:
- Förlorat sammanhang – användarna lämnar portalen, öppnar dokumentet i ett separat fönster och måste sedan komma ihåg var de var.
- Inkonsistent rendering – lokalt installerade Word‑, Excel‑ och CAD‑visare kan tolka filer olika, vilket leder till layoutfel som kan påverka juridiska eller ingenjörsmässiga beslut.
- Säkerhetsrisk – filer hamnar utanför företagets perimeter, vilket gör revisionsspår och data‑fö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 saktar ner godkännanden.
Vad utvecklare faktiskt behöver
En modern lösning bör:
- Rendera alla stödda format i webbläsaren (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Erbjuda ett rent API för .NET‑back‑ends samt React‑, Angular‑ eller Vue‑front‑ends.
- Inkludera annotering, fulltextsökning (OCR inkluderat) och kontrollerad utskrift utan att behöva extra bibliotek.
- Skala säkert – bearbeta dokument på servern, strömma dem som bild‑brickor 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ödda frontend‑integrationerna.
2. Konfigurera Doconut‑middleware för PDF‑konvertering i en ASP.NET Core‑applikation
Det första steget är att registrera Doco nuts middleware så att back‑end kan leverera dokument‑brickor, miniatyrer och annoteringsdata. Detta görs i ASP.NET Core‑request‑pipeline och kräver bara ett par service‑registreringar för cache och request‑context.
Registrera middleware
Lägg till de nödvändiga tjänsterna (distribuerad minnes‑cache och HTTP‑context‑accessor) i ConfigureServices. Därefter, i Configure, mappa Doconut‑endpointen (vanligtvis DocImage.axd) till Doconut‑middleware. Middleware‑alternativen låter dig verkställa säker rendering och dölja interna diagnostikuppgifter för slutanvändarna.
Initiera 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‑visar‑instansen är SDK:n fullt aktiverad och klar att bearbeta dokument.
Öppna ett dokument och hämta en token
När en användare begär ett dokument öppnar back‑end filen via Doco nuts API och kan skicka valfria parametrar såsom lösenordsskydd, bild‑upplösning och timeout. Doconut returnerar en kort token (vanligtvis ett GUID) som unikt representerar det öppnade dokumentet. Front‑end inkluderar denna token i varje brick‑förfrågan, t.ex. /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Exponera ett säkert Document‑Stream‑API för JavaScript‑ramverk
Även om Doconut redan erbjuder en låg‑nivå brick‑handler via middleware, föredrar de flesta team ett tunt wrapper‑controller som lägger till autentisering, loggning och valfri vattenstämpel.
Vanliga controller‑ansvar
- Open‑endpoint – Accepterar ett dokument‑identifierare, löser den fysiska filsökvägen, anropar Doconut för att öppna dokumentet och returnerar den genererade tokenen.
- Thumbnail‑endpoint – Returnerar en liten PNG för en given sida, användbart för navigationslistor. Controllern kan helt enkelt omdirigera till Doconut‑brick‑handlern med rätt query‑string.
Säkerhetsaspekter
Spara tokenen i användarens session eller bädda in den i ett kort‑livat JWT‑claim. Eftersom tokenen ensam inte kan hämta originalfilen 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å Doco nuts brick‑handler för varje sida (du kan börja med de första tio sidorna och ladda fler vid behov).
- Renderar sidorna som
<img>‑element och hanterar scroll‑ eller zoom‑händelser genom att uppdatera URL‑parametrarna.
Interaktion med Doco nuts JavaScript‑integrationspunkter
Doconut injicerar en lättviktig JavaScript‑hjälpare i sidan. Genom denna hjälpare kan du utfärda kommandon såsom:
- Markera ett uttryck – utför en fulltextsökning i 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 innehåller sidnummer, annoteringstyp, koordinater och eventuell extra data.
Eftersom den tunga renderingen sker på servern förblir React‑paketet litet och UI‑tillståndet 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 backend‑endpoints och returnerar tokenen som en observable.
Bygg sedan en komponent som vid initiering begär tokenen, konstruerar bild‑URL:erna för sidorna och visar dem med *ngFor. Komponenten kan exponera knappar som anropar Doco nuts JavaScript‑hjälpare för annotering och sökning, på samma sätt som React‑exemplet.
Vue
I Vue definierar du en komponent som använder created‑livscykelhaken för att begära tokenen via fetch eller axios. Spara tokenen och de genererade sid‑URL:erna i komponentens data. 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 Doco nuts JavaScript‑integration.
Alla tre ramverk delar samma backend‑kontrakt, så du kan återanvända samma ASP.NET Core‑controller utan förändring.
Slutsats
Att bädda in en fullfjädrad dokumentvisare kräver inte längre en mosaik av tredjeparts‑plugins eller kostsamma 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 – samtidigt som dokumenten hålls säkra och skalbara.
Redo att lyfta 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.