FileViewer

Visualizador de arquivos com detecção automática. Aceita um FileSource (URL / base64 / bytes) e direciona para o renderizador correto por categoria: imagem (delega para ImageViewer), markdown (Preview / Source com abab), texto (highlight.js colorido), incorporado (PDF e outros tipos renderizáveis pelo navegador via <iframe>), zip (árvore + visualizador aninhado para a entrada selecionada) e não suportado (mensagem de informação). Detecção prefere o MIME da fonte, caso contrário a extensão do arquivo.

Fonte da imagem

Tipos de imagem delegam para ImageViewer com Framed + Downloadable chrome.

Exemplo de reação
Exemplo de Blazor
placeholder.png
React TypeScript
Razor

Markdown source (bytes inline)

Bytes UTF-8 decodificados e renderizados com Markdig (Blazor) ou um parser markdown (React) em um painel de abas de Pré-visualização / Código-fonte.

Exemplo de reação
Exemplo de Blazor
Prévia

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

Fonte de texto (bytes inline, JSON)

Bytes UTF-8 renderizados através de highlight.js usando a linguagem inferida da extensão do arquivo.

Exemplo de reação
Exemplo de Blazor
{
  "name": "ImageViewer",
  "features": ["rotate", "zoom", "flip", "crop"],
  "version": "1.0"
}
React TypeScript
Razor

Não suportado

Extensões desconhecidas aparecem para uma mensagem de informação amigável em vez de serem lançadas.

Exemplo de reação
Exemplo de Blazor
data.bin
application/octet-stream
React TypeScript
Razor
React Blazor

FileViewer Classe

Parâmetros

Nome
Tipo
Padrão
Descrição
Downloadablebool
True
Quando verdadeiro (o padrão), aparece um botão de download no canto superior direito canto de cada braço pré-visualizável (markdown, texto, embedded, zip) e como a ação principal no cartão de arquivo não suportado. O braço de imagem renderiza o botão via o aninhado Components.ImageViewer — mesma coisa Comportamento, mesmo ícone, só que pertence ao Chrome do visualizador de imagens.
FallbackRenderFragment?
Renderizado quando FileViewer.Source é nulo.
FileNamestring?
Nome de arquivo usado para detecção de categorias (extensão), o embedded <iframe> título, e como nome padrão para download. Recuos para a própria FileSource.FileNamefonte , caso contrário para o Último segmento de caminho da URL, caso contrário para 'file'.
MaxHeightstring
60vh
Altura máxima para renderizadores inline (texto, viewport markdown, incorporado iframe). Define a região rolável. O padrão é 60vh.
SourceFileSource?
Dados do arquivo para renderizar. Quando nulo, FileViewer.Fallback é renderizado em vez disso (ou nada se não houver recuo).
Nome: Downloadable
Tipo: bool
Padrão: True
Descrição: Quando verdadeiro (o padrão), aparece um botão de download no canto superior direito canto de cada braço pré-visualizável (markdown, texto, embedded, zip) e como a ação principal no cartão de arquivo não suportado. O braço de imagem renderiza o botão via o aninhado Components.ImageViewer — mesma coisa Comportamento, mesmo ícone, só que pertence ao Chrome do visualizador de imagens.
Nome: Fallback
Tipo: RenderFragment?
Descrição: Renderizado quando FileViewer.Source é nulo.
Nome: FileName
Tipo: string?
Descrição: Nome de arquivo usado para detecção de categorias (extensão), o embedded <iframe> título, e como nome padrão para download. Recuos para a própria FileSource.FileNamefonte , caso contrário para o Último segmento de caminho da URL, caso contrário para 'file'.
Nome: MaxHeight
Tipo: string
Padrão: 60vh
Descrição: Altura máxima para renderizadores inline (texto, viewport markdown, incorporado iframe). Define a região rolável. O padrão é 60vh.
Nome: Source
Tipo: FileSource?
Descrição: Dados do arquivo para renderizar. Quando nulo, FileViewer.Fallback é renderizado em vez disso (ou nada se não houver recuo).