Bundlers
SheetJS predates ECMAScript modules and most bundler tools. As best practices have evolved, stress testing SheetJS libraries have revealed bugs in bundlers and other tools. This demo collects various notes and provides basic examples.
Issues should be reported to the respective bundler projects. Typically it is considered a bundler bug if the tool cannot properly handle JS libraries.
The following tools are covered in separate pages:
Dojo​
Integration details are included in the "AMD" installation
Complete Examples are included in the "Dojo" demo
Snowpack​
Snowpack was a development tool built by the AstroJS team.
Snowpack is no longer maintained. The developers recommend ViteJS
Snowpack works with no caveats.
Complete Example (click to show)
This demo was tested in the following environments:
| Version | Date |
|---|---|
3.8.8 | 2024-04-14 |
- Initialize a new project:
mkdir sheetjs-snowpack
cd sheetjs-snowpack
npm init -y
- Install the tarball using a package manager:
- npm
- pnpm
- Yarn
npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
pnpm install --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
yarn add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
- Save the following to
index.js:
import { utils, version, writeFileXLSX } from 'xlsx';
document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
const url = "https://docs.sheetjs.com/executive.json";
const raw_data = await (await fetch(url)).json();
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
birthday: row.bio.birthday
}));
/* generate worksheet and workbook */
const worksheet = utils.json_to_sheet(rows);
const workbook = utils.book_new();
utils.book_append_sheet(workbook, worksheet, "Dates");
/* fix headers */
utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });
/* calculate column width */
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];
/* create an XLSX file and try to save to Presidents.xlsx */
writeFileXLSX(workbook, "Presidents.xlsx");
});
- Create a small HTML page that loads the script. Save to
index.html:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h1>SheetJS Presidents Demo</h1>
<button id="xport">Click here to export</button>
<script type="module" src="./index.js"></script>
</body>
</html>
Unlike other bundlers, Snowpack requires a full page including HEAD element.
- Build for production:
npx snowpack@3.8.8 build
- Start a local HTTP server, then go to
http://localhost:8080/
npx http-server build/
Click on "Click here to export" to generate a file.
WMR​
WMR was a development tool built by the PreactJS team.
WMR is no longer maintained. The developers recommend ViteJS
WMR works with no caveats.
Complete Example (click to show)
This demo was tested in the following environments:
| Version | Date |
|---|---|
3.8.0 | 2024-04-14 |
- Initialize a new project:
mkdir sheetjs-wmr
cd sheetjs-wmr
npm init -y
- Install the tarball using a package manager:
- npm
- pnpm
- Yarn
npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
pnpm install --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
yarn add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
- Save the following to
index.js:
import { utils, version, writeFileXLSX } from 'xlsx';
document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
const url = "https://docs.sheetjs.com/executive.json";
const raw_data = await (await fetch(url)).json();
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
birthday: row.bio.birthday
}));
/* generate worksheet and workbook */
const worksheet = utils.json_to_sheet(rows);
const workbook = utils.book_new();
utils.book_append_sheet(workbook, worksheet, "Dates");
/* fix headers */
utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });
/* calculate column width */
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];
/* create an XLSX file and try to save to Presidents.xlsx */
writeFileXLSX(workbook, "Presidents.xlsx");
});
- Create a small HTML page that loads the script. Save to
index.html:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h1>SheetJS Presidents Demo</h1>
<button id="xport">Click here to export</button>
<script type="module" src="./index.js"></script>
</body>
</html>
- Build for production:
npx wmr@3.8.0 build
- Start a local HTTP server in
distfolder and go tohttp://localhost:8080/
npx http-server dist/
Click on "Click here to export" to generate a file.
Browserify​
The exposition has been moved to a separate page.
Bun​
The exposition has been moved to a separate page.
esbuild​
The exposition has been moved to a separate page.
Parcel​
The exposition has been moved to a separate page.
RequireJS​
The exposition has been moved to a separate page.
Rollup​
The exposition has been moved to a separate page.
SWC​
The exposition has been moved to a separate page.
SystemJS​
The exposition has been moved to a separate page.
Vite​
The exposition has been moved to a separate page.