Wie Entwickler PDF-, Office- und CAD-Anzeige in .NET-, React-, Angular- oder Vue-Webanwendungen einbetten, um Benutzerfreundlichkeit und Effizienz zu steigern: Schritt für Schritt
Wenn Sie versuchen, eine dokumentenintensive .NET‑Anwendung in etwas zu verwandeln, das Benutzer tatsächlich genießen, benötigen Sie einen Viewer, der PDFs, Word‑Dateien, Excel‑Tabellen, PowerPoint‑Präsentationen und CAD‑Zeichnungen verarbeitet – und das, ohne dass Benutzer eine Desktop‑App herunterladen oder auf einen externen Cloud‑Dienst angewiesen sind. Genau hier kommt Doconut ins Spiel. Es ist ein serverseitiger Dokumenten‑Viewer, der gerenderte Seiten an unterstützte Webbrowser streamt und sofort native Anmerkungen, Volltextsuche (inklusive OCR) und kontrollierten Druck bereitstellt. In diesem Leitfaden gehen wir den gesamten Workflow durch: von der Konfiguration der Doconut‑Konvertierungs‑Engine in einem ASP.NET‑Core‑Backend bis hin zur Einbettung des Viewers in React-, Angular‑ und Vue‑Frontends. Bereit, ein reibungsloses, effizientes Dokumentenerlebnis auszuliefern? Dann tauchen wir ein.
1. Warum ein dedizierter Viewer für Enterprise‑Web‑Apps wichtig ist
Die versteckten Kosten von “download‑and‑open”
Die meisten Legacy‑Portale stellen einfach einen Link zu einer Datei auf einem Share bereit. Ein Klick lädt die Datei entweder herunter oder übergibt sie an ein lokal installiertes Programm. In der Praxis führt das zu mehreren Problemen:
- Verlorener Kontext – Benutzer verlassen das Portal, öffnen das Dokument in einem separaten Fenster und müssen sich anschließend daran erinnern, wo sie waren.
- Inkonsistente Darstellung – lokal installierte Word‑, Excel‑ und CAD‑Viewer können Dateien unterschiedlich interpretieren, was zu Layout‑Fehlern führt, die rechtliche oder technische Entscheidungen beeinflussen können.
- Sicherheitsrisiko – Dateien gelangen außerhalb des Unternehmensperimeters, wodurch Prüfpfade und Richtlinien zur Verhinderung von Datenverlust zu einem Albtraum werden.
- Geringe Produktivität – Prüfer jonglieren mit mehreren Tools nur zum Anmerken, Suchen oder Drucken, was Genehmigungen verlangsamt.
Was Entwickler wirklich benötigen
Eine moderne Lösung sollte:
- Alle unterstützten Formate im Browser rendern (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Eine saubere API bereitstellen für .NET‑Backends sowie React-, Angular‑ oder Vue‑Frontends.
- Annotation, Volltextsuche (inkl. OCR) und kontrollierten Druck enthalten, ohne zusätzliche Bibliotheken einzubinden.
- Sicher skalieren – Dokumente auf dem Server verarbeiten, sie als Bildkacheln streamen und niemals Rohdateien dem Client preisgeben.
Doconut erfüllt all diese Kriterien. Seine Viewer‑Bibliothek läuft auf dem .NET‑Server, konvertiert Quellendokumente bei Bedarf in Rasterseiten und stellt diese über einen leichten HTTP‑Endpunkt bereit, der von den unterstützten Front‑End‑Integrationen genutzt wird.
2. Konfiguration der Doconut‑Middleware für PDF‑Konvertierung in einer ASP.NET‑Core‑Anwendung
Der erste Schritt besteht darin, Doconut’s Middleware zu registrieren, damit das Backend Dokumentenkacheln, Thumbnails und Anmerkungsdaten bereitstellen kann. Dies geschieht in der ASP.NET‑Core‑Request‑Pipeline und erfordert nur ein paar Service‑Registrierungen für Caching und Request‑Context.
Registrierung der Middleware
Fügen Sie die erforderlichen Services (verteilten Memory‑Cache und HTTP‑Context‑Accessor) in ConfigureServices hinzu. Anschließend mappen Sie in Configure den Doconut‑Endpunkt (üblicherweise DocImage.axd) zur Doconut‑Middleware. Die Middleware‑Optionen ermöglichen es Ihnen, sicheres Rendering durchzusetzen und interne Diagnosen vor Endbenutzern zu verbergen.
Initialisierung der Lizenz
Doconut benötigt beim Start eine Lizenzdatei. Der übliche Ansatz besteht darin, die Lizenz als Ressource einzubetten und sie beim Anwendungsstart als Stream zu laden. Sobald der Lizenz‑Stream der Doconut‑Viewer‑Instanz übergeben wurde, ist das SDK vollständig aktiviert und bereit, Dokumente zu verarbeiten.
Öffnen eines Dokuments und Abrufen eines Tokens
Wenn ein Benutzer ein Dokument anfordert, öffnet das Backend die Datei über Doconut’s API und übergibt optionale Parameter wie Passwortschutz, Bildauflösung und ein Timeout. Doconut gibt ein kurzes Token (in der Regel ein GUID) zurück, das das geöffnete Dokument eindeutig repräsentiert. Das Frontend fügt dieses Token bei jeder Kachel‑Anfrage hinzu, zum Beispiel /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Bereitstellung einer sicheren Dokument‑Stream‑API für JavaScript‑Frameworks
Obwohl Doconut bereits einen Low‑Level‑Kachel‑Handler über die Middleware bereitstellt, bevorzugen die meisten Teams einen dünnen Wrapper‑Controller, der Authentifizierung, Logging und optionales Wasserzeichen hinzufügt.
Typische Aufgaben eines Controllers
- Open‑Endpoint – Akzeptiert einen Dokumenten‑Identifier, ermittelt den physischen Dateipfad, ruft Doconut zum Öffnen des Dokuments auf und gibt das erzeugte Token zurück.
- Thumbnail‑Endpoint – Gibt ein kleines PNG für eine gegebene Seite zurück, nützlich für Navigationsleisten. Der Controller kann einfach zum Doconut‑Kachel‑Handler mit dem entsprechenden Query‑String weiterleiten.
Sicherheitsüberlegungen
Speichern Sie das Token in der Benutzersitzung oder betten Sie es in einen kurzlebigen JWT‑Claim ein. Da das Token allein die Originaldatei ohne den serverseitigen Cache nicht abrufen kann, bleibt das Dokument geschützt. dieselbe REST‑API unterstützt die in diesem Leitfaden beschriebenen Integrations‑Muster für React, Angular und Vue.
4. Einbettung des Viewers in einer React‑Anwendung
React‑Entwickler können eine funktionale Komponente erstellen, die:
- den
/open‑Endpoint aufruft, um ein Token für das angeforderte Dokument zu erhalten. - ein Array von Bild‑URLs erstellt, die auf Doconut’s Kachel‑Handler für jede Seite verweisen (Sie können mit den ersten zehn Seiten beginnen und bei Bedarf weitere laden).
- die Seiten als
<img>‑Elemente rendert und dabei Scroll‑ oder Zoom‑Ereignisse verarbeitet, indem die URL‑Parameter aktualisiert werden.
Interaktion mit Doconut’s JavaScript‑Integrationspunkten
Doconut injiziert einen leichten JavaScript‑Helper in die Seite. Über diesen Helper können Sie Befehle ausführen wie:
- Einen Begriff hervorheben – eine Volltextsuche im gesamten Dokument anfordern und passende Wörter hervorheben.
- Eine Anmerkung hinzufügen – eine Notiz, einen Stempel oder eine Zeichnung auf einer bestimmten Seite platzieren, indem ein JSON‑Payload gesendet wird, das Seitenzahl, Anmerkungstyp, Koordinaten und weitere Daten enthält.
Da die aufwändige Rendering‑Arbeit auf dem Server bleibt, bleibt das React‑Bundle klein und die UI reaktionsfähig.
5. Einbettung des Viewers in Angular und Vue – Wiederverwendbare Komponenten‑Muster
Angular
Erstellen Sie einen Angular‑Service, der die kleine .NET‑API (Dokument öffnen, Thumbnail holen) spiegelt. Der Service nutzt HttpClient, um die Backend‑Endpoints aufzurufen und gibt das Token als Observable zurück.
Anschließend bauen Sie eine Komponente, die bei der Initialisierung das Token anfordert, die Seiten‑Bild‑URLs zusammensetzt und sie mit *ngFor anzeigt. Die Komponente kann Buttons bereitstellen, die Doconut’s JavaScript‑Helper für Annotation und Suche aufrufen, ähnlich dem React‑Beispiel.
Vue
In Vue definieren Sie eine Komponente, die den created‑Lifecycle‑Hook nutzt, um das Token über fetch oder axios anzufordern. Speichern Sie das Token und die generierten Seiten‑URLs im Daten‑Objekt der Komponente. Rendern Sie die Seiten mit einer v-for‑Schleife. Vue’s Reaktivität macht es einfach, die Ansicht zu aktualisieren, wenn der Benutzer scrollt, zoomt oder über Doconut’s JavaScript‑Integration eine Anmerkungs‑Aktion auslöst.
Alle drei Frameworks nutzen denselben Backend‑Vertrag, sodass Sie denselben ASP.NET‑Core‑Controller ohne Änderungen wiederverwenden können.
Fazit
Die Einbettung eines vollwertigen Dokumenten‑Viewers erfordert nicht mehr ein Flickwerk aus Drittanbieter‑Plugins oder teuren Cloud‑Diensten. Mit Doconut erhalten Entwickler eine einzige serverseitige Bibliothek, die PDF‑, Office‑ und CAD‑Dateien rendert, Annotationen, OCR‑gestützte Suche und kontrollierten Druck bereitstellt – und das alles, während die Dokumente sicher und skalierbar bleiben.
Bereit, das Dokumentenerlebnis in Ihrer .NET‑, React‑, Angular‑ oder Vue‑Anwendung zu verbessern? Testen Sie Doconut noch heute und sehen Sie, wie schnell Sie einen ausgereiften, unternehmensgerechten Viewer ausliefern können, den Ihre Nutzer lieben werden.