PRO images logo invoice xlsx v1.6
画像の挿入・移動・リサイズ
請求書にロゴと承認印を配置し、ドラッグで移動、グリップのドラッグでリサイズ — ドラッグ1回につきCtrl+Z1回。Excelと同じ3種類のセルアンカーに対応し、xl/mediaの実体を伴って往復するため、保存しても画像が消えません。
デモの解説
このデモは、2枚のフローティング画像を載せた請求書を描画します — ヘッダー帯の上に会社ロゴ、合計欄の横に赤い承認印。v1.6.0より前、画像は読み取り専用で、xlsxから読み込んだ画像は表示はされるものの保存すると黙って捨てられていました。現在は編集可能な第一級の要素で、Pro限定の機能です。
- どちらかの画像をクリックすると選択され、8つのリサイズグリップが表示されます。ドラッグで移動、グリップのドラッグでリサイズ（Shiftで縦横比を維持）。ドラッグ1回が
Ctrl/Cmd+Z1手に対応します - どちらの画像も
data:URLから配置しているため、このデモはバイナリのアセットを持ちません。addImage()はUint8ArrayやArrayBufferも受け取り、addImageFromFile()はFileを受け取ります - ロゴは
oneCellアンカー（セルに固定、サイズは不変）です。「setImageAnchor() → twoCell」で2つのセル角にまたがる形に切り替わり、A〜B列の幅に合わせてサイズも変わるようになります - アンカーは行・列の挿入と削除に追従します。Excelと同じく、ロゴの下の行を削除してもロゴは消えません
- 「setImageEditEnabled(false)」は、画像を表示したままAPIも使えるまま、マウス操作だけを止めます。シート保護でも同じ状態になります
- 画像はxlsxを実体のある
xl/media+xl/drawingsパートとして往復し（同一画像は1つにまとめて格納）、JSONとPDFエクスポートにも対応します
主要 API
ws.addImage(source, anchor, options?) バイト列・ArrayBuffer・data: URL から画像を配置。新しい画像のidを返します
ws.addImageFromFile(file, anchor) ファイル選択のFile/Blobを受け取り、既定で画像本来のサイズを使います
ws.moveImage(id, target) セルアンカー { row, column } またはコンテンツ座標 { x, y } へ移動します
ws.resizeImage(id, { width, height }) ピクセル単位でリサイズ。idが見つからない場合はfalseを返します
ws.setImageAnchor(id, anchor) アンカーごと差し替え — oneCell / twoCell / absolute
ws.setImageEditEnabled(false) マウス操作を無効化。画像は表示されたまま、APIも使えます
ws.getImages() シート上のすべての画像 — id・名前・mimeType・生のバイト列・正規化済みアンカー
ソースコード
TypeScript