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.loadFromXlsx(buffer)

Load Options

await ws.loadFromUrl('/data/sample.xlsx', {
  startRow: 0,        // Starting row for insertion
  startColumn: 0,     // Starting column for insertion
  loadImages: true,    // Load images
  autoFit: true,       // Auto-fit column widths
})

Export

Download as xlsx

// 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

Retrieving Images

Access images loaded from an xlsx file.

// 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/lite/react'
import type { ReogridInstance } from '@reogrid/lite/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>
  )
}