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
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.
React TypeScript
Razor

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
Vorschau

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

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

Textquelle (Inline-Bytes, JSON)

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

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

Nicht gestützt

Unbekannte Erweiterungen werden zu einer freundlichen Informationsnachricht statt zu werfen.

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

Bildquelle

Bildarten delegieren mit ImageViewer Framed + Downloadable Chrome.

React-Beispiel
Blazor-Beispiel
placeholder.png
React TypeScript
Razor
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).