Blazor

Une visionneuse de documents qui fonctionne à l'intérieur de Blazor

Blazor vous fournit un modèle de composants et une boucle de rendu qui ne se soucie guère du JavaScript tiers. Doconut fonctionne avec cela plutôt que contre : le rendu se fait côté serveur dans votre propre processus, et le widget s'installe dans un élément simple que vous contrôlez via le cycle de vie normal de l'interop.

75
extensions de fichiers, aucune analyse côté client
2
modèles d'hébergement pris en charge
0
charge WASM pour le rendu

Le problème

Pourquoi les approches habituelles posent problème dans Blazor

L'itinéraire côté client implique d'envoyer un moteur de rendu dans le navigateur. Dans Blazor WebAssembly, cela impacte directement la taille du téléchargement, et il ne couvre que le PDF — dès que quelqu'un téléverse un DOCX ou un XLSX, vous revenez à la case départ.

L'itinéraire iframe-vers-Office signifie que vos documents passent par l'infrastructure de quelqu'un d'autre, ce qui implique une discussion avec votre équipe de sécurité que vous ne voudriez probablement pas avoir deux fois.

Doconut prend la troisième voie. Le fichier est rasterisé en images de pages par votre propre serveur, et Blazor n'a qu'à héberger un div. Votre arbre de composants ne re-render jamais une visionneuse qu'il ne possède pas, et le moteur de diff n'a rien avec quoi se battre.

Capacités

Ce que vous obtenez dans une application Blazor

Blazor Server et WebAssembly

Le rendu se fait côté serveur dans les deux cas. En Server, l'appel est direct ; en WebAssembly, vous exposez l'appel d'ouverture comme un point d'API minimal et transmettez le jeton retourné au widget. Les deux ne nécessitent que quelques lignes.

Montages via OnAfterRenderAsync

Initialisez le widget une fois, après le premier rendu, via le hook d'interop JS standard. Comme Blazor ne possède jamais le DOM interne du visionneur, les rendus ultérieurs le laissent intact.

Fonctionne avec le mode de rendu que vous avez choisi

Interactive Server, Interactive WebAssembly ou Auto. Le visionneur est piloté par un jeton opaque plutôt que par l'état du composant, ainsi changer le mode de rendu ne modifie pas l'intégration.

Pas de lacunes de format

Le même composant ouvre PDF, DOCX, XLSX, PPTX, DWG, MSG et le reste du catalogue. Vous écrivez une page visionneur, pas une par famille de fichiers.

Miniatures, recherche et impression

L'interface de navigation est fournie avec le widget. Vous configurez un visionneur, pas en construisez un à partir d'un canvas et d'un champ de numéro de page.

Les documents restent sur votre serveur

Rien n'est diffusé vers le navigateur sauf les images de pages rendues, ce qui compte davantage en WebAssembly que ce que l'on pense — le client est, après tout, entièrement inspectable.

Intégration

Program.cs et une page Blazor

doconutHost.mount est quelques lignes de votre propre JavaScript qui appelle $('#div_ctlDoc').docViewer({ ... }) puis .View(token). Le garder en dehors de Blazor est délibéré — le DOM du widget ne doit pas être quelque chose que le moteur de rendu tente de concilier.

Plateformes prises en charge

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);
    }
}

Détails

À savoir avant de commencer

  • Le widget est un plugin jQuery, donc jQuery doit être chargé avant les scripts du visionneur.
  • UseSession() et UseDoconutResources() doivent tous deux être enregistrés avant UseDoconut().
  • En WebAssembly, l'appel d'ouverture doit se faire sur le serveur — exposez-le comme un point d'API minimal et ne renvoyez que le jeton.
  • Le jeton est opaque. Ne le placez pas dans une chaîne de requête que vous journalisez, et ne le mettez pas en cache dans l'état du composant plus longtemps que la page ne vit.

Questions fréquemment posées

Cela fonctionne-t-il dans Blazor WebAssembly, ou seulement Server ?

Les deux. Le rendu se fait toujours côté serveur, donc en WebAssembly vous ajoutez un point d'accès qui appelle OpenDocumentAsync et renvoie le jeton. Le client ne parse jamais un document, ce qui explique exactement pourquoi la charge WASM reste inchangée.

Le moteur de rendu de Blazor se battra-t-il avec le DOM du visionneur ?

Non, à condition que vous montiez dans un élément que Blazor considère comme une feuille. Rendre un div vide et laisser le widget le remplir via l'interop — le moteur de diff n'a aucun enfant à concilier.

Ai-je besoin d'une page visionneur distincte par type de fichier ?

Non. Une page gère tout le catalogue. Le format est détecté à partir du document que vous ouvrez, pas sélectionné à l'avance par vous.

Essayez-le avec vos propres documents

Une licence temporaire prend quelques minutes à demander et s'exécute entièrement sur votre propre machine. Les fichiers qui comptent sont ceux qui posent déjà problème à votre visionneuse actuelle.