Blazor

Ein Dokumentenbetrachter, der sich innerhalb von Blazor verhält

Blazor bietet Ihnen ein Komponentenmodell und eine Render-Schleife, die sich nicht besonders um Drittanbieter-JavaScript kümmert. Doconut arbeitet damit statt dagegen: Das Rendering erfolgt serverseitig in Ihrem eigenen Prozess, und das Widget wird in ein einfaches Element eingebunden, das Sie über den normalen Interop-Lebenszyklus steuern.

75
Dateierweiterungen, keine clientseitige Analyse
2
unterstützte Hosting-Modelle
0
WASM-Payload für das Rendering

Das Problem

Warum die üblichen Ansätze in Blazor problematisch sind

Der clientseitige Ansatz bedeutet, dass ein Rendering‑Engine in den Browser geliefert wird. In Blazor WebAssembly wirkt sich das direkt auf Ihre Downloadgröße aus, und er unterstützt nur PDF — sobald jemand ein DOCX oder ein XLSX hochlädt, sind Sie wieder am Anfang.

Der iframe‑zu‑Office‑Ansatz bedeutet, dass Ihre Dokumente über die Infrastruktur eines Dritten geleitet werden, was ein Gespräch mit Ihrem Sicherheitsteam erfordert, das Sie wahrscheinlich nicht zweimal führen möchten.

Doconut wählt den dritten Weg. Die Datei wird von Ihrem eigenen Server in Seitenbilder gerastert, und Blazor muss nur ein div hosten. Ihr Komponentenbaum rendert nie einen Viewer neu, den er nicht besitzt, und die Diff‑Engine hat nichts, womit sie kämpfen muss.

Funktionen

Was Sie in einer Blazor‑App erhalten

Blazor Server und WebAssembly

Das Rendering erfolgt in jedem Fall serverseitig. Im Server‑Modus ist der Aufruf direkt; in WebAssembly stellen Sie den Öffnungsaufruf als Minimal‑API‑Endpunkt bereit und übergeben das zurückgegebene Token an das Widget. Beide benötigen nur ein paar Zeilen.

Einbindung über OnAfterRenderAsync

Initialisieren Sie das Widget einmalig nach dem ersten Rendern über den standardmäßigen JS‑Interop‑Hook. Da Blazor das interne DOM des Viewers nie besitzt, bleiben nachfolgende Render‑Durchläufe unberührt.

Funktioniert mit dem von Ihnen gewählten Render‑Modus

Interactive Server, Interactive WebAssembly oder Auto. Der Viewer wird von einem undurchsichtigen Token gesteuert, nicht vom Komponenten‑State, sodass ein Wechsel des Render‑Modus die Integration nicht ändert.

Keine Formatlücken

Die gleiche Komponente öffnet PDF, DOCX, XLSX, PPTX, DWG, MSG und den Rest des Katalogs. Sie schreiben eine Viewer‑Seite, nicht eine pro Dateifamilie.

Vorschaubilder, Suche und Druck

Die Navigations‑UI ist im Widget enthalten. Sie verbinden einen Viewer, anstatt einen aus einem Canvas und einem Seitenzahl‑Eingabefeld zu bauen.

Dokumente bleiben auf Ihrem Server

Es wird nichts zum Browser gestreamt, außer gerenderten Seitenbildern, was in WebAssembly wichtiger ist, als man erwartet — der Client ist schließlich vollständig einsehbar.

Integration

Program.cs und eine Blazor‑Seite

doconutHost.mount ist ein paar Zeilen Ihres eigenen JavaScripts, das $('#div_ctlDoc').docViewer({ ... }) aufruft und dann .View(token). Es bewusst außerhalb von Blazor zu halten — das DOM des Widgets sollte nichts sein, womit der Renderer versucht, abzugleichen.

Unterstützte Plattformen

Blazor ServerBlazor WebAssembly.NET 8.NET 6WindowsDocker
csharp
// Program.cs — order matters
builder.Services.AddDoconut(options =>
{
    options.LicensePath = "Doconut.Viewer.lic";
});
builder.Services.AddSession();

app.UseSession();          // before UseDoconut()
app.UseDoconutResources(); // before UseDoconut()
app.UseDoconut();

// Viewer.razor — open server-side, hand the token to the widget
@inject Doconut.Viewer Viewer
@inject IJSRuntime JS

<div id="divDocViewer"><div id="div_ctlDoc"></div></div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;

        // Authorize first — the viewer renders whatever you hand it.
        string token = await Viewer.OpenDocumentAsync("wwwroot/files/Sample.pdf");
        await JS.InvokeVoidAsync("doconutHost.mount", token);
    }
}

Details

Wissenswertes, bevor Sie beginnen

  • Das Widget ist ein jQuery‑Plugin, daher muss jQuery vor den Viewer‑Skripten geladen werden.
  • UseSession() und UseDoconutResources() müssen beide vor UseDoconut() registriert werden.
  • In WebAssembly muss der Öffnungsaufruf auf dem Server liegen — stellen Sie ihn als Minimal‑API‑Endpunkt bereit und geben Sie nur das Token zurück.
  • Das Token ist undurchsichtig. Legen Sie es nicht in eine Abfragezeichenfolge, die Sie protokollieren, und speichern Sie es nicht länger im Komponenten‑State, als die Seite lebt.

Häufig gestellte Fragen

Funktioniert das in Blazor WebAssembly oder nur im Server?

Beides. Das Rendering findet immer serverseitig statt, sodass Sie in WebAssembly einen Endpunkt hinzufügen, der OpenDocumentAsync aufruft und das Token zurückgibt. Der Client analysiert niemals ein Dokument, was genau der Grund ist, warum die WASM‑Payload unverändert bleibt.

Wird der Renderer von Blazor mit dem DOM des Viewers kämpfen?

Nein, vorausgesetzt, Sie binden in ein Element ein, das Blazor als Blatt behandelt. Rendern Sie ein leeres div und lassen Sie das Widget es über Interop füllen — die Diff‑Engine hat keine Kinder, die sie abgleichen muss.

Brauche ich für jeden Dateityp eine separate Viewer‑Seite?

Nein. Eine Seite verarbeitet den gesamten Katalog. Das Format wird aus dem Dokument, das Sie öffnen, erkannt, nicht von Ihnen im Voraus ausgewählt.

Probieren Sie es mit Ihren eigenen Dokumenten aus

Eine temporäre Lizenz lässt sich in wenigen Minuten anfordern und läuft vollständig auf Ihrem eigenen Rechner. Die wichtigen Dateien sind bereits die, die Ihren aktuellen Viewer zum Absturz bringen.