SheetJS Table to Excel Export and Import (.xlsx) — Free JavaScript Snippet

<div class="sx">
  <header class="sx-head">
    <div>
      <h2>Inventory</h2>
      <p>Cells are editable. Export a real .xlsx with number formats, column widths and a live SUM formula — or import a spreadsheet.</p>
    </div>
    <div class="sx-actions">
      <button type="button" id="sxExport">Export .xlsx</button>
      <button type="button" id="sxRound" class="ghost">Round-trip test</button>
      <label class="sx-file ghost">Import .xlsx / .csv<input type="file" id="sxFile" accept=".xlsx,.xls,.csv,.ods"></label>
    </div>
  </header>
  <div class="sx-sheetbar" id="sxSheets" hidden><label>Sheet <select id="sxSheet"></select></label></div>
  <div class="sx-wrap"><table class="sx-table" id="sxTable"></table></div>
  <div class="sx-log" id="sxLog" role="status" aria-live="polite"></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f0fdf4;color:#14532d;min-height:100vh;padding:20px}
.sx{max-width:980px;margin:0 auto}
.sx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sx h2{font-size:18px}
.sx-head p{font-size:12.5px;color:#166534;margin-top:4px;max-width:520px}
.sx-actions{display:flex;gap:8px;flex-wrap:wrap}
.sx button,.sx-file{border:0;border-radius:9px;padding:9px 13px;font:700 12px system-ui;background:#16a34a;color:#fff;cursor:pointer;display:inline-flex;align-items:center}
.sx .ghost{background:#fff;color:#14532d;border:1px solid #bbf7d0}
.sx-file input{position:absolute;width:1px;height:1px;opacity:0}
.sx :focus-visible,.sx-file:focus-within{outline:2px solid #22c55e;outline-offset:2px}
.sx-sheetbar{margin-bottom:8px;font-size:12.5px;font-weight:600}
.sx-sheetbar select{font:600 12px system-ui;border:1px solid #bbf7d0;border-radius:7px;padding:4px 6px;margin-left:6px}
.sx-wrap{overflow:auto;background:#fff;border:1px solid #bbf7d0;border-radius:12px;max-height:420px;scrollbar-width:thin}
.sx-table{border-collapse:collapse;width:100%;font-size:13px}
.sx-table th{position:sticky;top:0;background:#dcfce7;color:#14532d;text-align:left;padding:7px 10px;font-weight:700;border-bottom:1px solid #bbf7d0;white-space:nowrap}
.sx-table td{padding:6px 10px;border-bottom:1px solid #f0fdf4;white-space:nowrap}
.sx-table td[contenteditable]{outline:none}
.sx-table td[contenteditable]:focus{background:#fefce8;box-shadow:inset 0 0 0 2px #facc15}
.sx-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.sx-table tfoot td{font-weight:800;background:#f0fdf4;border-top:2px solid #bbf7d0}
.sx-log{margin-top:10px;font-size:12.5px;line-height:1.6;background:#fff;border:1px solid #bbf7d0;border-radius:10px;padding:8px 12px;min-height:38px}
.sx-log code{font:600 11.5px ui-monospace,monospace;background:#f0fdf4;padding:1px 4px;border-radius:4px}

var COLS = [
  { key: 'sku', label: 'SKU', w: 12 },
  { key: 'name', label: 'Product', w: 28 },
  { key: 'qty', label: 'Qty', w: 8, num: true, fmt: '#,##0' },
  { key: 'price', label: 'Unit price', w: 12, num: true, fmt: '"$"#,##0.00' },
  { key: 'updated', label: 'Last counted', w: 14, date: true, fmt: 'yyyy-mm-dd' },
];
var rows = [
  { sku: 'KB-104', name: 'Mechanical keyboard', qty: 42, price: 89.5, updated: '2026-09-18' },
  { sku: 'MS-221', name: 'Wireless mouse', qty: 130, price: 24.99, updated: '2026-09-20' },
  { sku: 'MN-270', name: '27" 4K monitor', qty: 18, price: 329, updated: '2026-09-12' },
  { sku: 'HB-007', name: 'USB-C hub, 7 ports', qty: 64, price: 39.9, updated: '2026-09-22' },
  { sku: 'WC-900', name: '1080p webcam', qty: 27, price: 54, updated: '2026-09-15' },
];
var table = document.getElementById('sxTable');
var logEl = document.getElementById('sxLog');
var editable = true;

function money(v) { return '$' + Number(v || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }
function esc(s) { return String(s == null ? '' : s).replace(/[&<>]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]; }); }

function render() {
  var total = rows.reduce(function (s, r) { return s + (Number(r.qty) || 0) * (Number(r.price) || 0); }, 0);
  table.innerHTML = '<thead><tr>' + COLS.map(function (c) { return '<th>' + c.label + '</th>'; }).join('') + '<th>Stock value</th></tr></thead><tbody>' +
    rows.map(function (r, i) {
      return '<tr>' + COLS.map(function (c) {
        var v = c.key === 'price' ? Number(r.price).toFixed(2) : r[c.key];
        return '<td' + (editable ? ' contenteditable="true"' : '') + ' data-r="' + i + '" data-k="' + c.key + '" class="' + (c.num ? 'num' : '') + '">' + esc(v) + '</td>';
      }).join('') + '<td class="num">' + money((Number(r.qty) || 0) * (Number(r.price) || 0)) + '</td></tr>';
    }).join('') + '</tbody><tfoot><tr><td colspan="' + COLS.length + '">Total stock value</td><td class="num">' + money(total) + '</td></tr></tfoot>';
}

table.addEventListener('blur', function (e) {
  var td = e.target;
  if (!td.dataset || td.dataset.r === undefined) return;
  var col = COLS.find(function (c) { return c.key === td.dataset.k; });
  var text = td.textContent.trim();
  rows[td.dataset.r][td.dataset.k] = col.num ? (Number(text.replace(/[^0-9.-]/g, '')) || 0) : text;
  render();
}, true);
table.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); e.target.blur(); } });

// Build the workbook cell by cell so each cell carries a TYPE and a number
// FORMAT. aoa_to_sheet would guess types; being explicit keeps prices as
// numbers (so Excel can sum them) and dates as real dates.
function buildWorkbook() {
  var aoa = [COLS.map(function (c) { return c.label; }).concat('Stock value')];
  rows.forEach(function (r) {
    aoa.push(COLS.map(function (c) {
      if (c.date) return new Date(r[c.key] + 'T00:00:00Z');
      return c.num ? Number(r[c.key]) || 0 : r[c.key];
    }).concat(null));
  });
  var ws = XLSX.utils.aoa_to_sheet(aoa, { cellDates: true });
  var last = rows.length + 1; // header is row 1
  rows.forEach(function (r, i) {
    var row = i + 2;
    COLS.forEach(function (c, ci) {
      var addr = XLSX.utils.encode_cell({ r: row - 1, c: ci });
      if (c.fmt && ws[addr]) ws[addr].z = c.fmt;
    });
    // A per-row formula. f is what Excel stores; v is the cached value
    // shown by readers that don't calculate (including SheetJS itself).
    ws['F' + row] = { t: 'n', f: 'C' + row + '*D' + row, v: (Number(r.qty) || 0) * (Number(r.price) || 0), z: '"$"#,##0.00' };
  });
  var totalRow = last + 1;
  ws['A' + totalRow] = { t: 's', v: 'Total stock value' };
  ws['F' + totalRow] = { t: 'n', f: 'SUM(F2:F' + last + ')', v: rows.reduce(function (s, r) { return s + (Number(r.qty) || 0) * (Number(r.price) || 0); }, 0), z: '"$"#,##0.00' };
  // !ref is the sheet's used range; widen it to include the added row.
  ws['!ref'] = XLSX.utils.encode_range({ s: { r: 0, c: 0 }, e: { r: totalRow - 1, c: 5 } });
  ws['!cols'] = COLS.map(function (c) { return { wch: c.w }; }).concat({ wch: 14 });
  var wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Inventory');
  var notes = XLSX.utils.aoa_to_sheet([['Exported', new Date().toISOString()], ['Rows', rows.length], ['Source', 'SheetJS in the browser']]);
  notes['!cols'] = [{ wch: 10 }, { wch: 28 }];
  XLSX.utils.book_append_sheet(wb, notes, 'About');
  return wb;
}

document.getElementById('sxExport').addEventListener('click', function () {
  XLSX.writeFile(buildWorkbook(), 'inventory.xlsx', { compression: true });
  logEl.innerHTML = 'Saving <code>inventory.xlsx</code> (2 sheets). Sandboxed previews block downloads — use <b>Round-trip test</b> to check the file here, or open the demo in its own tab.';
});

// Write the workbook to bytes and immediately parse them back: proves what
// the .xlsx really contains without needing a download.
document.getElementById('sxRound').addEventListener('click', function () {
  var bytes = XLSX.write(buildWorkbook(), { type: 'array', bookType: 'xlsx', compression: true });
  // cellNF keeps each cell's number format (z); it is dropped by default.
  var wb = XLSX.read(bytes, { cellDates: true, cellFormula: true, cellNF: true });
  var ws = wb.Sheets.Inventory;
  var totalAddr = 'F' + (rows.length + 2);
  logEl.innerHTML = 'Wrote <b>' + (bytes.byteLength / 1024).toFixed(1) + ' KB</b> and read it back: sheets <code>' + wb.SheetNames.join('</code>, <code>') +
    '</code> · C2 type <code>' + ws.C2.t + '</code> format <code>' + esc(ws.C2.z) + '</code> · E2 is a <code>' + (ws.E2.v instanceof Date ? 'Date' : typeof ws.E2.v) + '</code>' +
    ' · ' + totalAddr + ' formula <code>=' + esc(ws[totalAddr].f) + '</code> = ' + money(ws[totalAddr].v) + '.';
});

var currentWb = null;
function showWorkbook(wb, label) {
  currentWb = wb;
  var bar = document.getElementById('sxSheets');
  var sel = document.getElementById('sxSheet');
  sel.innerHTML = wb.SheetNames.map(function (n) { return '<option>' + esc(n) + '</option>'; }).join('');
  bar.hidden = wb.SheetNames.length < 2;
  renderSheet(wb.SheetNames[0]);
}

// Imported sheets are shown read-only, exactly as SheetJS parsed them.
// sheet_to_json with header:1 returns rows as arrays; raw:false applies the
// cell number formats so values look the way they did in Excel.
function renderSheet(name) {
  editable = false;
  var data = XLSX.utils.sheet_to_json(currentWb.Sheets[name], { header: 1, raw: false, blankrows: false, defval: '' });
  if (!data.length) { table.innerHTML = '<tbody><tr><td>This sheet is empty.</td></tr></tbody>'; return; }
  table.innerHTML = '<thead><tr>' + data[0].map(function (h) { return '<th>' + esc(h) + '</th>'; }).join('') + '</tr></thead><tbody>' +
    data.slice(1, 201).map(function (r) { return '<tr>' + r.map(function (v) { return '<td>' + esc(v) + '</td>'; }).join('') + '</tr>'; }).join('') + '</tbody>';
}
document.getElementById('sxSheet').addEventListener('change', function (e) { renderSheet(e.target.value); });

document.getElementById('sxFile').addEventListener('change', function (e) {
  var f = e.target.files[0];
  if (!f) return;
  f.arrayBuffer().then(function (buf) {
    var wb = XLSX.read(buf, { cellDates: true });
    logEl.innerHTML = 'Imported <b>' + esc(f.name) + '</b>: ' + wb.SheetNames.length + ' sheet(s). Showing up to 200 rows, read-only. Reload to return to the editable inventory.';
    showWorkbook(wb, f.name);
  }).catch(function (err) { logEl.textContent = 'Could not read ' + f.name + ': ' + err.message; });
  e.target.value = '';
});

render();
logEl.innerHTML = 'Click any cell to edit it. The stock value and total update when you leave the cell.';