Show an uploaded Excel file in the browser

To show an uploaded Excel file in the browser without freezing the page, parse it in a Web Worker and render only the rows in view. EatSheet does both in 27 KB, and the file never leaves the device.

Why spreadsheets freeze pages

An XLSX file is a zip of XML. Unzipping and parsing it on the main thread stops clicks, scrolling and animation until it finishes, and putting every row in the page makes scrolling slow afterwards. In our 50,000-row test, SheetJS on the main thread froze the page for about 1 second. EatSheet didn't freeze it at all and showed the first rows in about 140 ms. See the benchmarks.

The code

npm install eatsheet

<input type="file" id="file" accept=".xlsx,.csv,.tsv">
<div id="sheet" tabindex="0" style="height: 480px; overflow: auto"></div>

<script type="module">
  import { openWorkbook } from 'eatsheet/worker';
  import 'eatsheet/eatsheet.css';

  const container = document.querySelector('#sheet');
  let book;

  const draw = async () => {
    container.innerHTML = (await book.render(0, { offset: container.scrollTop })).html;
  };
  container.addEventListener('scroll', () => {
    if (book) requestAnimationFrame(draw);
  });

  document.querySelector('#file').addEventListener('change', async event => {
    book?.close();
    book = null;
    try {
      book = await openWorkbook(event.target.files[0]);
      container.scrollTop = 0;
      await draw();
    } catch (error) {
      container.textContent = `Couldn't open this file: ${error.code ?? error.message}`;
    }
  });
</script>

The script uses bare imports, so run it through a bundler such as Vite. For React, use the React example.

Handling files people upload

If the file is

EatSheet throws

An old .xls file

LEGACY_XLS

Corrupt, or not a spreadsheet

MALFORMED_FILE

Encrypted, or has unsafe content

UNSAFE_FILE

Over the size limits

LIMIT_EXCEEDED

Still opening after 30 seconds

TIMEOUT

Each error has a stable code, so you can show your own message. Try it with your own file on the home page.

More: SheetJS alternative · SheetJS vs ExcelJS vs EatSheet · React · Vue · Next.js · Angular · Svelte · Electron · Troubleshooting · Security · Docs · Benchmarks