XLSX Import & Export

ReoGrid Web can read and write Excel format (.xlsx) files. Load spreadsheets from a URL, a File object, or raw binary data, and export back to xlsx for download.

Import

Loading from a URL

const ws = grid.worksheet

await ws.loadFromUrl('/data/sample.xlsx')

Loading from a File Object

Load a File obtained from a file input element or drag-and-drop.

// File input
const input = document.querySelector<HTMLInputElement>('#file-input')
input.addEventListener('change', async () => {
  const file = input.files?.[0]
  if (file) await ws.loadFromFile(file)
})

// Drag & drop
container.addEventListener('drop', async (e) => {
  e.preventDefault()
  const file = e.dataTransfer?.files[0]
  if (file?.name.endsWith('.xlsx')) {
    await ws.loadFromFile(file)
  }
})

Loading from ArrayBuffer / Uint8Array

const response = await fetch('/data/sample.xlsx')
const buffer = await response.arrayBuffer()
await ws.loadFromBuffer(buffer)

Load Options

await ws.loadFromUrl('/data/sample.xlsx', {
  sheetName: 'Sheet2', // Which sheet to load (defaults to the first sheet)
  chunked: true,       // Chunked async ingest (snappier first paint on big files)
})

Images embedded in the xlsx are always loaded — there is no option to skip them.

Export

Download as xlsx

Note: xlsx export (saveAsXlsx) is available in the Pro edition.

// Download with default filename
ws.saveAsXlsx()

// Specify filename and sheet name
ws.saveAsXlsx({
  filename: 'report.xlsx',
  sheetName: 'Sheet1',
})

Export Snapshot

If you want to work with xlsx data programmatically, you can obtain a snapshot.

const snapshot = ws.getExportSnapshot()
// snapshot contains all cell data, styles, merges, column widths, etc.

Supported Content

ReoGrid JSON Format

For application state persistence — saving and restoring full worksheet state without going through xlsx — use the ReoGrid JSON format. It is lossless and covers everything the runtime needs: cells, styles, number formats, rich text, merges, borders, sizes/visibility, freeze, conditional formats, outlines, filter, cell types, protection, and alternate rows.

import {
  writeReoGridJson,
  readReoGridJson,
  parseReoGridJson,
  type ReoGridJsonDocument,
} from '@reogrid/lite'

// Serialize
const doc: ReoGridJsonDocument = writeReoGridJson(worksheet)
const json = JSON.stringify(doc)
localStorage.setItem('my-sheet', json)

// Restore
const saved = localStorage.getItem('my-sheet')
if (saved) {
  const parsed = parseReoGridJson(saved)   // JSON string -> document
  readReoGridJson(worksheet, parsed)       // apply to worksheet
}

Both @reogrid/lite and @reogrid/pro re-export these from their main entry — no deep imports required.

Retrieving Images

Access images loaded from an xlsx file.

Note: createImageUrl() / revokeImageUrl() are available in the Pro edition.

// List images
const images = ws.getImages()

// Generate Blob URLs
images.forEach((img) => {
  const url = ws.createImageUrl(img.id)
  console.log(img.id, url)
})

// Release Blob URLs when no longer needed
ws.revokeImageUrl(imageId)

// Image change event
ws.onImagesChange((images) => {
  console.log('Images:', images)
})

Example: File Operations in React

import { useRef } from 'react'
import { Reogrid } from '@reogrid/pro/react'
import type { ReogridInstance } from '@reogrid/pro/react'

function SpreadsheetApp() {
  const gridRef = useRef<ReogridInstance>(null)

  async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (file) {
      await gridRef.current?.worksheet.loadFromFile(file)
    }
  }

  function handleExport() {
    gridRef.current?.worksheet.saveAsXlsx({ filename: 'export.xlsx' })
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <div>
        <input type="file" accept=".xlsx" onChange={handleFileChange} />
        <button onClick={handleExport}>Export</button>
      </div>
      <Reogrid ref={gridRef} style={{ flex: 1 }} />
    </div>
  )
}