mini-xlsx/example.html at main · MubsiraAnalytics/mini-xlsx · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mini-xlsx — live demo</title>
<style>
  body { font-family: system-ui, sans-serif; max-width: 720px; margin: 40px auto; padding: 0 20px; color: #1f2937; }
  h1 { color: #0d9488; }
  button { background: #0d9488; color: white; border: 0; padding: 12px 20px; border-radius: 6px; font-size: 16px; cursor: pointer; }
  button:hover { background: #0b7d72; }
  pre { background: #f3f4f6; padding: 16px; border-radius: 6px; overflow-x: auto; font-size: 13px; }
  a { color: #0d9488; }
</style>
</head>
<body>

<h1>mini-xlsx — live demo</h1>

<p>
  Build a real <code>.xlsx</code> file in the browser with zero dependencies.<br>
  Source: <a href="./mini-xlsx.js">mini-xlsx.js</a> ·
  Repo: <a href="https://github.com/MubsiraAnalytics/mini-xlsx">GitHub</a> ·
  In production: <a href="https://www.mubsiraanalytics.com/business/">Mubsira Business</a>
</p>

<button id="dl">Download example.xlsx</button>

<h2>The code</h2>

<pre><code>const bytes = miniXlsx([
  {
    name: "Invoices",
    headers: ["ID", "Client", "Date", "Amount"],
    rows: [
      ["INV-001", "ACME Corp",  "2026-04-24", 1250.00],
      ["INV-002", "Globex",     "2026-04-25",  890.50],
      ["INV-003", "Initech",    "2026-04-26", 2410.75],
    ],
  },
  {
    name: "Expenses",
    headers: ["Date", "Vendor", "Category", "Amount"],
    rows: [
      ["2026-04-20", "Office Depot",   "Supplies",  42.99],
      ["2026-04-21", "AWS",            "Hosting",  118.40],
      ["2026-04-22", "Local cafe",     "Meals",     12.50],
    ],
  },
]);
</code></pre>

<script src="./mini-xlsx.js"></script>
<script>
document.getElementById("dl").addEventListener("click", function () {
  var bytes = miniXlsx([
    {
      name: "Invoices",
      headers: ["ID", "Client", "Date", "Amount"],
      rows: [
        ["INV-001", "ACME Corp",  "2026-04-24", 1250.00],
        ["INV-002", "Globex",     "2026-04-25",  890.50],
        ["INV-003", "Initech",    "2026-04-26", 2410.75],
      ],
    },
    {
      name: "Expenses",
      headers: ["Date", "Vendor", "Category", "Amount"],
      rows: [
        ["2026-04-20", "Office Depot",   "Supplies",  42.99],
        ["2026-04-21", "AWS",            "Hosting",  118.40],
        ["2026-04-22", "Local cafe",     "Meals",     12.50],
      ],
    },
  ]);
  var blob = new Blob([bytes], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
  var url = URL.createObjectURL(blob);
  var a = Object.assign(document.createElement("a"), { href: url, download: "example.xlsx" });
  document.body.appendChild(a); a.click(); a.remove();
  URL.revokeObjectURL(url);
});
</script>

</body>
</html>