Images — Insert, Move, Resize
Place a logo and a 承認 seal on an invoice, then drag to move and drag a grip to resize — one Ctrl+Z per drag. Excel's three cell anchors, and a real xl/media round-trip, so a picture survives a save.
How it works
This demo renders an invoice carrying two floating images — a company logo over the header band, and a red 承認 seal beside the total. Before v1.6.0 images were read-only: a picture loaded from an xlsx was displayed, then silently dropped when the workbook was saved. Now they are first-class, and Pro-only.
- Click either image to select it — eight resize grips appear — then drag to move it, or drag a grip to resize (Shift keeps the aspect ratio). Each drag is a single
Ctrl/Cmd+Z - Both images are placed from
data:URLs, so the demo carries no binary assets;addImage()also takes aUint8ArrayorArrayBuffer, andaddImageFromFile()takes aFile - The logo uses the
oneCellanchor — pinned to a cell, fixed size. “setImageAnchor() → twoCell” switches it to span two cell corners, so it then resizes with columns A–B - Anchors follow row and column inserts and deletes, exactly as Excel behaves: deleting the rows under a logo no longer deletes the logo
- “setImageEditEnabled(false)” switches the mouse interaction off while the images stay visible and the API keeps working — sheet protection does the same implicitly
- Images round-trip through xlsx as real
xl/media+xl/drawingsparts (identical images stored once), through JSON, and into PDF export
Key APIs used
ws.addImage(source, anchor, options?) Place an image from bytes, an ArrayBuffer, or a data: URL. Returns the new image id
ws.addImageFromFile(file, anchor) Take a File/Blob from a picker; defaults to the image's natural size
ws.moveImage(id, target) Move to a cell anchor { row, column } or a raw content-pixel point { x, y }
ws.resizeImage(id, { width, height }) Resize in pixels; returns false when the id is unknown
ws.setImageAnchor(id, anchor) Swap the anchor outright — oneCell, twoCell, or absolute
ws.setImageEditEnabled(false) Turn the mouse interaction off; images stay visible and the API keeps working
ws.getImages() Every image on the sheet — id, name, mimeType, raw bytes, and normalized anchor
Source Code
Related Documentation
Related Demos
Cell Types Dashboard
Progress bars, star ratings, sparkline charts, checkboxes, and hyperlinks — all rendered inside spreadsheet cells.
Data Filter & Sort
Click column header dropdowns to filter and sort rows. Switch between 300, 1K, and 10K rows to test performance.
Cell Styles
Font styles, colors, backgrounds, text alignment, and border options — a showcase of the Cell Style API.