🍋
Menu
General

Preview

プレビュー(ファイルの視覚的確認)

ダウンロードや処理の前にファイルの内容を視覚的に表示し、操作結果を確定する前にユーザーが確認できるようにするものです。

技術的詳細

ブラウザベースのプレビューはネイティブのレンダリング機能を活用します:タグやCanvasで画像を、PDF.jsやでPDFを、HTML5の

やシンタックスハイライト付きのブロックでテキストを表示します。大きなファイルの場合、メモリを節約するために最初のページのみやダウンサンプル版をレンダリングすることがあります。Object URL(URL.createObjectURL)はbase64エンコードのオーバーヘッドなしにBlobデータを表示し、不要になったらメモリリークを防止するためURL.revokeObjectURLで解放する必要があります。

```javascript
// Preview: file processing example
const file = document.getElementById('fileInput').files[0];
const reader = new FileReader();
reader.onload = (e) => {
  const data = e.target.result;
  console.log(`Loaded: ${file.name} (${file.size} bytes)`);
};
reader.readAsArrayBuffer(file);
```

関連用語