画像

ReoGrid Web は xlsx ファイルに埋め込まれた画像を自動的に描画します。 loadFromUrl() や loadFromFile() を呼び出すと、スプレッドシート内の画像が抽出され、グリッドの上にオーバーレイ表示されます。追加の設定は不要です。

画像機能はPro版で利用可能です。

自動描画

xlsx ファイルを読み込むと、画像は自動的に表示されます。

// xlsx 内の画像は読み込み後すぐに描画される
await worksheet.loadFromUrl('/data/report-with-logo.xlsx')

画像のオーバーレイ位置は xlsx ファイル内のアンカーデータに基づきます。 2 種類のアンカータイプに対応しています。

画像データへのアクセス

getImages() でワークシート内の画像一覧を取得できます。

const images = worksheet.getImages()

images.forEach((image) => {
  console.log(image.id)        // 一意のID文字列
  console.log(image.mimeType)  // 例: 'image/png', 'image/jpeg'
  console.log(image.anchor)    // 配置情報
})

WorksheetImageInfo

WorksheetImagePlacement

// oneCell: セルに固定、明示的なサイズ指定
type WorksheetImagePlacement =
  | { type: 'oneCell'; from: WorksheetImageAnchorPosition; width: number; height: number }
  | { type: 'twoCell'; from: WorksheetImageAnchorPosition; to: WorksheetImageAnchorPosition }

type WorksheetImageAnchorPosition = {
  row: number     // 0ベースの行インデックス
  column: number  // 0ベースの列インデックス
  offsetX: number // セルの左端からのピクセルオフセット
  offsetY: number // セルの上端からのピクセルオフセット
}

表示用 URL の作成

グリッドの外部で画像を描画する場合（サイドバーやダウンロードリンクなど）、createImageUrl() で Blob URL を生成できます。

const images = worksheet.getImages()
if (images.length > 0) {
  const url = worksheet.createImageUrl(images[0].id)
  const img = document.createElement('img')
  img.src = url
  document.body.appendChild(img)
}

不要になった URL は必ず解放してメモリを開放してください。

worksheet.revokeImageUrl(images[0].id)

画像変更の監視

onImagesChange() は画像リストが変更されたときに発火します。サブスクリプション時に現在の画像リストで即座に呼び出されます。 外部 UI との同期に使用できます。

const unsubscribe = worksheet.onImagesChange((images) => {
  console.log(`${images.length} 個の画像がワークシートにあります`)

  // 例: サムネイルリストの構築
  images.forEach((image) => {
    const url = worksheet.createImageUrl(image.id)
    // ... サムネイルを描画し、完了後に revokeImageUrl で解放
  })
})

// 監視を停止
unsubscribe()

React での使用例

import { useEffect, useState } from 'react'
import { Reogrid } from '@reogrid/lite/react'
import type { ReogridInstance, WorksheetImageInfo } from '@reogrid/lite/react'

export default function App() {
  const [images, setImages] = useState<WorksheetImageInfo[]>([])

  function onReady({ worksheet }: ReogridInstance) {
    worksheet.loadFromUrl('/data/report.xlsx')
    worksheet.onImagesChange((imgs) => setImages(imgs))
  }

  return (
    <>
      <Reogrid onReady={onReady} style={{ width: '100%', height: '400px' }} />
      <p>{images.length} 個の画像が読み込まれました</p>
    </>
  )
}

注意事項

• 読み取り専用。 現在、プログラムからグリッドに画像を挿入する API はありません。画像は読み込まれた xlsx ファイルからのみ取得できます。
• メモリ管理。 createImageUrl() で作成した Blob URL は revokeImageUrl() で明示的に解放するまで保持されます。グリッド内部の画像レイヤーは独自に URL を管理するため、管理が必要なのは自分で作成した URL のみです。
• 対応フォーマット。 xlsx ファイルに埋め込まれた PNG、JPEG、GIF、SVG 画像に対応しています（ブラウザの <img> 要素がサポートする形式に準じます）。