FileViewer

Datei-Viewer wird automatisch erkannt. Akzeptiert eine FileSource (URL / base64 / Bytes) und leitet nach Kategorie zum rechten Renderer: Bild (delegiert an ImageViewer), Markdown (tabiert Vorschau / Quelle), Text (highlight.js farbig), eingebettet (PDF und andere browser-renderbare Typen über <iframe>), zip (Baum + verschachtelter Viewer für den ausgewählten Eintrag) und nicht unterstützt (Info-Nachricht). Die Erkennung bevorzugt die MIME der Quelle, ansonsten die Dateiendung.

Zip-Archiv (URL-Quelle)

Zip-Archive stellen links einen Ordnerbaum ihrer Inhalte dar; Die Auswahl eines Eintrags zeigt eine Vorschau auf der rechten Seite mit derselben Kategorie-Routing (Text, Code, Bild, ...). Der Viewer ruft die Archivbytes aus und FileSource entpackt sie im Browser. Jeder Eintrag bietet außerdem einen Download.

React-Beispiel Blazor-Beispiel React TypeScript Razor
Konnte keine Vorschau laden.JavaScript 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.

Markdown-Quelle (Inline-Bytes)

UTF-8-Bytes werden mit Markdig (Blazor) oder einem Markdown-Parser (React) in einem Vorschau-/Quell-Tab-Fenster entschlüsselt und gerendert.

React-Beispiel Blazor-Beispiel React TypeScript Razor
Vorschau Text

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

# 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" };
```

Textquelle (Inline-Bytes, JSON)

UTF-8-Bytes, die durch highlight.js mit der aus der Dateiendung abgeleiteten Sprache gerendert werden.

React-Beispiel Blazor-Beispiel React TypeScript Razor 
{
  "name": "ImageViewer",
  "features": ["rotate", "zoom", "flip", "crop"],
  "version": "1.0"
}

Nicht gestützt

Unbekannte Erweiterungen werden zu einer freundlichen Informationsnachricht statt zu werfen.

React-Beispiel Blazor-Beispiel React TypeScript Razor
data.bin
application/octet-stream

Bildquelle

Bildarten delegieren mit ImageViewer Framed + Downloadable Chrome.

React-Beispiel Blazor-Beispiel React TypeScript Razor
placeholder.png
Reagieren Blazor

FileViewer Baureihe

Parameter

Name
Typ
Default
Beschreibung
Downloadablebool
True
Wenn true (der Standard), erscheint oben rechts ein Download-Button Ecke jedes vorschaubaren Arms (Markdown, Text, Eingebettet, Zip) und als die Hauptaktion auf der nicht unterstützten Dateikarte. Der Bildarm rendert Der Button über die verschachtelte Components.ImageViewer Schaltung – dasselbe Verhalten, dasselbe Symbol, nur im eigenen Chrome des Bildviewers.
FallbackRenderFragment?
Gerendert, wenn FileViewer.Source null ist.
FileNamestring?
Dateiname, der für die Kategorienerkennung (Erweiterung) verwendet wird, das eingebettete <iframe> Titel und als Standard-Download-Name. Zieht sich zurück an die eigene FileSource.FileNameQuelle , ansonsten an die Das letzte Pfadsegment der URL, ansonsten zu 'file'.
MaxHeightstring
60vh
Maximale Höhe für Inline-Renderer (Text, Markdown-Viewport, eingebettet) iframe). Setzt den scrollbaren Bereich. Standardmäßig steht 60 Vh.
SourceFileSource?
Dateidaten zum Rendern. Wenn null, FileViewer.Fallback wird stattdessen gerendert (oder gar nichts, wenn kein Notfall bereitgestellt wird).
Name: Downloadable
Typ: bool
Default: True
Beschreibung: Wenn true (der Standard), erscheint oben rechts ein Download-Button Ecke jedes vorschaubaren Arms (Markdown, Text, Eingebettet, Zip) und als die Hauptaktion auf der nicht unterstützten Dateikarte. Der Bildarm rendert Der Button über die verschachtelte Components.ImageViewer Schaltung – dasselbe Verhalten, dasselbe Symbol, nur im eigenen Chrome des Bildviewers.
Name: Fallback
Typ: RenderFragment?
Beschreibung: Gerendert, wenn FileViewer.Source null ist.
Name: FileName
Typ: string?
Beschreibung: Dateiname, der für die Kategorienerkennung (Erweiterung) verwendet wird, das eingebettete <iframe> Titel und als Standard-Download-Name. Zieht sich zurück an die eigene FileSource.FileNameQuelle , ansonsten an die Das letzte Pfadsegment der URL, ansonsten zu 'file'.
Name: MaxHeight
Typ: string
Default: 60vh
Beschreibung: Maximale Höhe für Inline-Renderer (Text, Markdown-Viewport, eingebettet) iframe). Setzt den scrollbaren Bereich. Standardmäßig steht 60 Vh.
Name: Source
Typ: FileSource?
Beschreibung: Dateidaten zum Rendern. Wenn null, FileViewer.Fallback wird stattdessen gerendert (oder gar nichts, wenn kein Notfall bereitgestellt wird).