ファイルビューア

自動検出ファイルビューア。 FileSource (URL / base64 / bytes)を受け付け、カテゴリごとに適切なレンダラーにルーティングします: 画像 ( ImageViewerに委任)、 マークダウン (タブ付きプレビュー/ソース)、 テキスト (highlight.js色付き)、 埋め込み 型(PDFや <iframe>による他のブラウザレンダリング可能なタイプ)、 zip (選択されたエントリの木+ネストビューア)、 およびサポートされていない (情報メッセージ)。検出はソースのMIMEを優先し、そうでなければファイル拡張子を優先します。

zipアーカイブ(URLソース)

Zipアーカイブは左側にその内容のフォルダツリーをレンダリングします。エントリーを選択すると右側で同じカテゴリルーティング(テキスト、コード、画像など)でプレビューできます。ビューアは FileSource からアーカイブバイトを取得し、ブラウザ内で解凍します。各エントリーはダウンロードも提供しています。

Reactの例

ブレイザーの例

プレビューを読み込めませんでした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

マークダウンソース(インラインバイト)

UTF-8バイトはMarkdig(Blazor)またはMarkdownパーサー(React)でデコード・レンダリングされ、プレビュー/ソースタブペインで処理されます。

Reactの例

ブレイザーの例

プレビュー

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

React TypeScript

Razor

テキストソース(インラインバイト、JSON)

拡張子から推定された言語でレンダリングされたUTF-8バイトhighlight.js。

Reactの例

ブレイザーの例

{
  "name": "ImageViewer",
  "features": ["rotate", "zoom", "flip", "crop"],
  "version": "1.0"
}

React TypeScript

Razor

サポートなし

未知の内線は、送るのではなくフレンドリーな情報メッセージに繋がります。

Reactの例

ブレイザーの例

data.bin

application/octet-stream

React TypeScript

Razor

画像出典

画像の種類はFramed + Downloadable ChromeでImageViewerに割り当てられます。

Reactの例

ブレイザーの例

React TypeScript

Razor

反応してください

ブレイザー

FileViewer クラス

パラメータ

名称	種類	デフォルト
`Downloadable`	bool	True
`Fallback`	RenderFragment?
`FileName`	string?
`MaxHeight`	string	60vh
`Source`	FileSource?

名称: Downloadable

種類: bool

デフォルト: True

名称: Fallback

種類: RenderFragment?

名称: FileName

種類: string?

名称: MaxHeight

種類: string

デフォルト: 60vh

名称: Source

種類: FileSource?