Visualiseur de fichiers

Visualiseur de fichiers auto-détectant. Accepte une FileSource (URL / base64 / octets) et redirige vers le bon moteur de rendu par catégorie : image (déléguée à ImageViewer), markdown (onglet Aperçu / Source), texte (highlight.js coloré), intégré (PDF et autres types rendables par navigateur via <iframe>), zip (arborescence + visualiseur imbriqué pour l’entrée sélectionnée), et non supporté (message info). La détection préfère le MIME de la source, sinon l’extension de fichier.

Archive zip (source URL)

Les archives zip affichent un arbre de dossiers de leur contenu à gauche ; Choisir une entrée la prévisualise à droite avec la même catégorie de routage (texte, code, image, ...). Le visualiseur récupère les octets d’archive depuis le FileSource et les dézippe dans le navigateur. Chaque participation propose également un téléchargement.

Exemple de réaction
Exemple de Blazor
Impossible de charger l’aperçuJavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.
React TypeScript
Razor

Source Markdown (octets en ligne)

Octets UTF-8 décodés et rendus avec Markdig (Blazor) ou un analyseur markdown (React) dans un panneau à onglet Aperçu / Source.

Exemple de réaction
Exemple de Blazor
Aperçu

Hello FileViewer

The FileViewer picks a renderer per file kind.

  • Images flow through ImageViewer.
  • Markdown picks up Markdig.
  • Text/code is coloured with highlight.js.
  • Zip archives expand to a tree.
var source = new FileSource.Bytes(bytes) { FileName = "readme.md" };
Texte 
# Hello FileViewer

The **FileViewer** picks a renderer per file kind.

- Images flow through `ImageViewer`.
- Markdown picks up Markdig.
- Text/code is coloured with highlight.js.
- Zip archives expand to a tree.

```csharp
var source = new FileSource.Bytes(bytes) { FileName = "readme.md" };
```
React TypeScript
Razor

Source texte (octets en ligne, JSON)

Octets UTF-8 rendus via highlight.js en utilisant le langage déduit de l’extension de fichier.

Exemple de réaction
Exemple de Blazor 
{
  "name": "ImageViewer",
  "features": ["rotate", "zoom", "flip", "crop"],
  "version": "1.0"
}
React TypeScript
Razor

Non supporté

Les extensions inconnues se retrouvent dans un message d’information amical au lieu de les jeter.

Exemple de réaction
Exemple de Blazor
data.bin
application/octet-stream
React TypeScript
Razor

Source de l’image

Les types d’images déléguent à ImageViewer avec Framed + Downloadable chrome.

Exemple de réaction
Exemple de Blazor
placeholder.png
React TypeScript
Razor
Réagir Blazor

FileViewer Classe

Paramètres

Nom
Type
Par défaut
Description
Downloadablebool
True
Lorsqu’il est vrai (par défaut), un bouton de téléchargement apparaît en haut à droite coin de chaque bras prévisualisable (markdown, texte, embedded, zip) et comme l’action principale sur la carte de fichier non supportée. Le bras image rend le bouton via le bouton imbriqué Components.ImageViewer à la place — pareil Comportement, même icône, mais possédée par le Chrome du Visualiseur d’Image.
FallbackRenderFragment?
Affiché lorsque FileViewer.Source est nul.
FileNamestring?
Nom de fichier utilisé pour la détection de catégories (extension), le fichier embarqué <iframe> titre, et comme nom de téléchargement par défaut. Recule à la source elle-même FileSource.FileName, sinon à la Le dernier segment de chemin de l’URL, sinon « file ».
MaxHeightstring
60vh
Hauteur maximale pour les moteurs de rendu en ligne (texte, viewport markdown, embarqué iframe). Définit la région défilable. Par défaut est à 60 vh.
SourceFileSource?
Données de fichier à afficher. Lorsque nul, FileViewer.Fallback est rendu à la place (ou rien si aucun repli n’est fourni).
Nom: Downloadable
Type: bool
Par défaut: True
Description: Lorsqu’il est vrai (par défaut), un bouton de téléchargement apparaît en haut à droite coin de chaque bras prévisualisable (markdown, texte, embedded, zip) et comme l’action principale sur la carte de fichier non supportée. Le bras image rend le bouton via le bouton imbriqué Components.ImageViewer à la place — pareil Comportement, même icône, mais possédée par le Chrome du Visualiseur d’Image.
Nom: Fallback
Type: RenderFragment?
Description: Affiché lorsque FileViewer.Source est nul.
Nom: FileName
Type: string?
Description: Nom de fichier utilisé pour la détection de catégories (extension), le fichier embarqué <iframe> titre, et comme nom de téléchargement par défaut. Recule à la source elle-même FileSource.FileName, sinon à la Le dernier segment de chemin de l’URL, sinon « file ».
Nom: MaxHeight
Type: string
Par défaut: 60vh
Description: Hauteur maximale pour les moteurs de rendu en ligne (texte, viewport markdown, embarqué iframe). Définit la région défilable. Par défaut est à 60 vh.
Nom: Source
Type: FileSource?
Description: Données de fichier à afficher. Lorsque nul, FileViewer.Fallback est rendu à la place (ou rien si aucun repli n’est fourni).