ファイルビューア

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

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

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

Reactの例 ブレイザーの例 React TypeScript Razor
プレビューを読み込めませんでした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.

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

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

Reactの例 ブレイザーの例 React TypeScript Razor
プレビュー 本文

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

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

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

Reactの例 ブレイザーの例 React TypeScript Razor 
{
  "name": "ImageViewer",
  "features": ["rotate", "zoom", "flip", "crop"],
  "version": "1.0"
}

サポートなし

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

Reactの例 ブレイザーの例 React TypeScript Razor
data.bin
application/octet-stream

画像出典

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

Reactの例 ブレイザーの例 React TypeScript Razor
placeholder.png
反応してください ブレイザー

FileViewer クラス

パラメータ

名称
種類
デフォルト
概要
Downloadablebool
True
true(デフォルト)の場合、右上にダウンロードボタンが表示されます プレビュー可能なアーム(マークダウン、テキスト、埋め込み、zip)の隅とAS サポートされていないファイルカードのプライマリアクションです。画像アームはレンダリングします 代わりにネストされたComponents.ImageViewerでボタンを使います — 同じです 動作は同じアイコンで、画像ビューア自身のChromeに所有されているだけです。
FallbackRenderFragment?
FileViewer.Sourceがnullのときにレンダリングされます。
FileNamestring?
カテゴリ検出に使われるファイル名(拡張子)は、埋め込み型です <iframe> のタイトルであり、デフォルトのダウンロード名としても使われています。後退 ソース自身の FileSource.FileNameに、そうでなければ URLの最後のパスセグメントで、それ以外は 「file」です。
MaxHeightstring
60vh
インラインレンダラー(テキスト、マークダウンビューポート、埋め込み)の最大高さ iframe)。スクロール可能な領域を設定します。デフォルトは 60vhです。
SourceFileSource?
レンダリングするファイルデータ。nullの場合は、代わりに FileViewer.Fallback をレンダリングします (またはフォールバックが提供されなければ何もない)。
名称: Downloadable
種類: bool
デフォルト: True
概要: true(デフォルト)の場合、右上にダウンロードボタンが表示されます プレビュー可能なアーム(マークダウン、テキスト、埋め込み、zip)の隅とAS サポートされていないファイルカードのプライマリアクションです。画像アームはレンダリングします 代わりにネストされたComponents.ImageViewerでボタンを使います — 同じです 動作は同じアイコンで、画像ビューア自身のChromeに所有されているだけです。
名称: Fallback
種類: RenderFragment?
概要: FileViewer.Sourceがnullのときにレンダリングされます。
名称: FileName
種類: string?
概要: カテゴリ検出に使われるファイル名(拡張子)は、埋め込み型です <iframe> のタイトルであり、デフォルトのダウンロード名としても使われています。後退 ソース自身の FileSource.FileNameに、そうでなければ URLの最後のパスセグメントで、それ以外は 「file」です。
名称: MaxHeight
種類: string
デフォルト: 60vh
概要: インラインレンダラー(テキスト、マークダウンビューポート、埋め込み)の最大高さ iframe)。スクロール可能な領域を設定します。デフォルトは 60vhです。
名称: Source
種類: FileSource?
概要: レンダリングするファイルデータ。nullの場合は、代わりに FileViewer.Fallback をレンダリングします (またはフォールバックが提供されなければ何もない)。