ホーム/コンポーネント/データ表示/ファイルプレビュー FilePreview

FilePreview / FilePreviewCard

iframe ベースのファイルプレビュー。PDF・画像をブラウザネイティブ描画で表示します。FilePreviewCard はファイル情報行 + トグル式プレビュー + ダウンロードリンクの完全パターンです。

|

import { FilePreview, FilePreviewCard } from "@blueai/ui"

Examples

FilePreview — シンプルな iframe プレビュー

<FilePreview
  src="https://example.com/sample.pdf"
  fileName="sample.pdf"
  height={400}
/>

FilePreviewCard — ファイル情報 + トグルプレビュー

請求書_2024-01.pdf

240.0 KB

<FilePreviewCard
  src="https://example.com/invoice.pdf"
  fileName="請求書_2024-01.pdf"
  fileSize={245760}
/>

FilePreviewCard — 初期展開

契約書.pdf

1.0 MB

<FilePreviewCard
  src="https://example.com/contract.pdf"
  fileName="契約書.pdf"
  fileSize={1048576}
  defaultOpen
/>

FilePreviewCard — サイズなし

資料.pdf

Prop	Type	Default	Description
src*	string	—	プレビュー対象の URL（iframe src）
fileName	string	—	表示用ファイル名（FilePreview: title属性に使用）
height	number \| string	600	プレビューの高さ
fileSize	number	—	ファイルサイズ（bytes）— FilePreviewCard のみ。自動で formatFileSize 変換
downloadHref	string	—	ダウンロードURL — FilePreviewCard のみ。省略時は src を使用
defaultOpen	boolean	false	初期展開状態 — FilePreviewCard のみ