Preview an XLSX file in Next.js

npm install eatsheet

'use client';

import { useEffect, useRef, useState } from 'react';
import 'eatsheet/eatsheet.css';

export function ExcelPreview({ file }) {
  const box = useRef(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const element = box.current;
    let book, gone = false, frame = 0;
    setError(null);

    const draw = async () => {
      const { html } = await book.render(0, { offset: element.scrollTop });
      if (!gone) element.innerHTML = html; // EatSheet escapes cell content
    };
    const onScroll = () => {
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(() => draw().catch(setError));
    };

    // Imported here so it only ever loads in the browser
    import('eatsheet/worker')
      .then(({ openWorkbook }) => openWorkbook(file))
      .then(opened => {
        if (gone) return opened.close();
        book = opened;
        element.addEventListener('scroll', onScroll);
        return draw();
      })
      .catch(failure => { if (!gone) setError(failure); });

    return () => {
      gone = true;
      cancelAnimationFrame(frame);
      element.removeEventListener('scroll', onScroll);
      book?.close();
    };
  }, [file]);

  return (
    <>
      {error && <p role="alert">Couldn't open this file: {error.code ?? error.message}</p>}
      <div ref={box} tabIndex={0} hidden={!!error} style={{ height: 480, overflow: 'auto' }} />
    </>
  );
}

'use client';

import { useState } from 'react';
import { ExcelPreview } from './excel-preview';

export default function Page() {
  const [file, setFile] = useState(null);
  return (
    <>
      <input type="file" accept=".xlsx,.csv,.tsv" onChange={e => setFile(e.target.files[0])} />
      {file && <ExcelPreview file={file} />}
    </>
  );
}