JavaScript XLSX Viewer Library

Story · Demo

The full workbook viewer

Unlike slides and pages, a spreadsheet is one continuous grid — so XlsxViewer owns its own canvas, sheet-tab bar and zoom slider. Switch sheets along the bottom, click-drag to select a range, press Ctrl/Cmd+C to copy it as TSV, zoom with the slider or Ctrl/Cmd+wheel · trackpad pinch (10–400%), and drag a column/row header border to resize it. Resizing and zooming are view-only — they change what you see, never the loaded file.

sample-1.xlsx live · WASM

import { XlsxViewer } from '@silurus/ooxml/xlsx';

// XlsxViewer owns its canvas, sheet-tab bar and zoom slider — hand it a
// container element (not a canvas). Click-drag selects a range; Ctrl/Cmd+C
// copies it as TSV.
const container = document.getElementById('sheet') as HTMLElement;
const viewer = new XlsxViewer(container, { showZoomSlider: true });

await viewer.load('/sample.xlsx');

Workbook · Multi-window

One workbook. Many windows.

Parse the file once in the parent page, then open any sheet in its own browser window. Every window gets its own visible scrollbars, zoom and selection state while the workbook archive, worksheet cache and render worker remain shared. Open two or more sheets to compare them side by side.

sample-1.xlsx live · WASM

import { XlsxSheetViewer, XlsxWorkbook } from '@silurus/ooxml/xlsx';

const workbook = await XlsxWorkbook.load('/sample.xlsx');
const viewers = new Map<Window, XlsxSheetViewer>();

async function openSheetInWindow(sheetIndex: number): Promise<void> {
  // Call this function directly from a click handler so popup blockers allow it.
  const popup = window.open('', '_blank', 'popup,width=1100,height=720,resizable=yes');
  if (!popup) throw new Error('The browser blocked the popup');

  const canvas = popup.document.createElement('canvas');
  canvas.style.cssText = 'display:block;width:100%;height:100%';
  popup.document.body.style.margin = '0';
  popup.document.body.appendChild(canvas);

  const viewer = XlsxSheetViewer.fromWorkbook(canvas, workbook);
  viewers.set(popup, viewer);
  popup.addEventListener('pagehide', (event) => {
    if (event.persisted) return;
    viewer.destroy();
    viewers.delete(popup);
  });

  await viewer.goToSheet(sheetIndex);
}

// Example: openSheetInWindow(1) from a sheet button's click handler.
window.addEventListener('pagehide', (event) => {
  if (event.persisted) return;
  viewers.forEach((viewer, popup) => {
    viewer.destroy();
    popup.close();
  });
  workbook.destroy();
});