Wie Entwickler PDF-, Office- und CAD-Anzeige in .NET-, React-, Angular- oder Vue-Web‑Apps einbetten, um Benutzerfreundlichkeit und Effizienz zu steigern: Schritt für Schritt
Wenn Sie versuchen, eine dokumentlastige .NET‑Anwendung in etwas zu verwandeln, das Benutzer tatsächlich gerne nutzen, benötigen Sie einen Viewer, der PDFs, Word‑Dateien, Excel‑Tabellen, PowerPoint‑Präsentationen und CAD‑Zeichnungen verarbeitet – und das, ohne dass die Benutzer eine Desktop‑App herunterladen oder einen externen Cloud‑Dienst nutzen müssen. Genau hier kommt Doconut ins Spiel. Es ist ein serverseitiger Dokumenten‑Viewer, der gerenderte Seiten an unterstützte Web‑Browser streamt und native Anmerkungen, Volltextsuche (inklusive OCR) sowie kontrolliertes Drucken out‑of‑the‑box bietet. 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‑Front‑Ends. Bereit, ein reibungsloses, effizientes Dokumentenerlebnis zu liefern? Dann legen wir los.
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 – Nutzer verlassen das Portal, öffnen das Dokument in einem separaten Fenster und müssen sich anschließend erinnern, wo sie waren.
- Inkonsistente Darstellung – lokal installierte Word‑, Excel‑ und CAD‑Viewer können dieselben Dateien unterschiedlich interpretieren, was zu Layout‑Fehlern führen kann, die rechtliche oder ingenieurtechnische Entscheidungen beeinflussen.
- Sicherheitsrisiko – Dateien verlassen das Unternehmens‑Perimeter, wodurch Audit‑Logs und Data‑Loss‑Prevention‑Richtlinien zur Herausforderung werden.
- Geringe Produktivität – Prüfer jonglieren mit mehreren Tools, nur um zu annotieren, zu suchen oder zu drucken, was Genehmigungen verlangsamt.
Was Entwickler wirklich brauchen
Eine moderne Lösung sollte:
- Jedes unterstützte Format im Browser rendern (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Eine saubere API für .NET‑Back‑Ends sowie React‑, Angular‑ oder Vue‑Front‑Ends bereitstellen.
- Annotation, Volltextsuche (inkl. OCR) und kontrolliertes Drucken bieten, ohne zusätzliche Bibliotheken zu benötigen.
- Sicher skalieren – Dokumente auf dem Server verarbeiten, als Bild‑Tiles streamen und niemals rohe Dateien an den Client ausliefern.
Doconut erfüllt all diese Anforderungen. Die Viewer‑Bibliothek läuft auf dem .NET‑Server, konvertiert Quelldokumente bei Bedarf in Rasterseiten und stellt diese über einen leichten HTTP‑Endpunkt bereit, der von den unterstützten Front‑End‑Integrationen konsumiert wird.
2. Konfiguration der Doconut‑Middleware für PDF‑Konvertierung in einer ASP.NET‑Core‑Anwendung
Der erste Schritt besteht darin, die Doconut‑Middleware zu registrieren, damit das Backend Dokument‑Tiles, Thumbnails und Annotations‑Daten 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 (Distributed Memory Cache und HTTP‑Context‑Accessor) in ConfigureServices hinzu. Anschließend mappen Sie in Configure den Doconut‑Endpunkt (üblich DocImage.axd) zur Doconut‑Middleware. Die Middleware‑Optionen ermöglichen es Ihnen, sicheres Rendering zu erzwingen und interne Diagnosedaten vor End‑Usern zu verbergen.
Lizenzinitialisierung
Doconut benötigt beim Start eine Lizenzdatei. Der gängige Ansatz besteht darin, die Lizenz als Ressource einzubetten und beim Anwendungsstart als Stream zu laden. Sobald der Lizenz‑Stream an die 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 Nutzer ein Dokument anfordert, öffnet das Backend die Datei über die Doconut‑API und übergibt optionale Parameter wie Passwortschutz, Bildauflösung und Timeout. Doconut gibt ein kurzes Token (in der Regel eine GUID) zurück, das das geöffnete Dokument eindeutig repräsentiert. Das Front‑End fügt dieses Token jedem Tile‑Request hinzu, zum Beispiel /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Bereitstellung einer sicheren Document‑Stream‑API für JavaScript‑Frameworks
Während Doconut bereits einen Low‑Level‑Tile‑Handler über die Middleware bereitstellt, bevorzugen die meisten Teams einen dünnen Wrapper‑Controller, der Authentifizierung, Logging und optionales Watermarking hinzufügt.
Typische Aufgaben des Controllers
- Open‑Endpoint – Akzeptiert einen Dokument‑Identifier, ermittelt den physischen Dateipfad, ruft Doconut zum Öffnen des Dokuments auf und gibt das erzeugte Token zurück.
- Thumbnail‑Endpoint – Liefert ein kleines PNG für eine angegebene Seite, nützlich für Navigations‑Strips. Der Controller kann einfach zum Doconut‑Tile‑Handler mit dem passenden 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 das Originaldokument ohne den serverseitigen Cache nicht abrufen kann, bleibt das Dokument geschützt. Die gleiche REST‑API unterstützt die React‑, Angular‑ und Vue‑Integrationsmuster, die in diesem Leitfaden beschrieben werden.
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 gewünschte Dokument zu erhalten. - Ein Array von Bild‑URLs zusammenstellt, die auf den Doconut‑Tile‑Handler für jede Seite zeigen (man kann mit den ersten zehn Seiten beginnen und bei Bedarf weitere nachladen).
- Die Seiten als
<img>‑Elemente rendert und Scroll‑ bzw. Zoom‑Ereignisse verarbeitet, indem die URL‑Parameter aktualisiert werden.
Interaktion mit Doconut‑JavaScript‑Integrationspunkten
Doconut injiziert einen leichten JavaScript‑Helper in die Seite. Über diesen Helper können Sie Befehle ausführen wie:
- Begriff hervorheben – Volltextsuche im Dokument anstoßen und gefundene Wörter markieren.
- Annotation hinzufügen – Einen Haftnotiz‑, Stempel‑ oder Zeichen‑Eintrag auf einer bestimmten Seite platzieren, indem ein JSON‑Payload mit Seitenzahl, Annotationstyp, Koordinaten und optionalen Zusatzdaten gesendet wird.
Da das aufwändige Rendering auf dem Server bleibt, bleibt das React‑Bundle klein und die UI reaktionsschnell.
5. Einbettung des Viewers in Angular und Vue – Wiederverwendbare Komponenten‑Muster
Angular
Erstellen Sie einen Angular‑Service, der die kleinen .NET‑APIs (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 beim Initialisieren das Token anfordert, die Seiten‑Image‑URLs zusammensetzt und sie mit *ngFor anzeigt. Die Komponente kann Buttons bereitstellen, die Doconut‑JavaScript‑Helper für Annotation und Suche aufrufen – analog zum React‑Beispiel.
Vue
In Vue definieren Sie eine Komponente, die im created‑Lifecycle‑Hook das Token via fetch oder axios anfordert. Token und generierte Seiten‑URLs werden im data‑Objekt der Komponente gespeichert. Die Seiten werden mit einer v-for‑Schleife gerendert. Vues Reaktivität macht es einfach, die Ansicht zu aktualisieren, wenn der Nutzer scrollt, zoomt oder eine Anmerkungs‑Aktion über Doconut‑JavaScript 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 kontrolliertes Drucken bietet – und das alles, während die Dokumente sicher und skalierbar bleiben.
Bereit, das Dokumentenerlebnis in Ihrer .NET-, React-, Angular‑ oder Vue‑Anwendung zu verbessern? Probieren Sie Doconut noch heute und sehen Sie, wie schnell Sie einen polierten, unternehmensgerechten Viewer ausliefern können, den Ihre Nutzer lieben werden.