Skip to main content

Bundling Sheets with ParcelJS

ParcelJS is a module bundler.

SheetJS is a JavaScript library for reading and writing data from spreadsheets.

This demo uses ParcelJS and SheetJS to export data. We'll explore how to bundle SheetJS in a site using ParcelJS and how to export data to spreadsheets.

This demo focuses on integration details with the ParcelJS bundler.

The demos follow the "Export Tutorial", which covers SheetJS library usage in more detail.

Tested Deployments

This demo was tested in the following environments:

VersionDate
2.10.32023-12-04
1.12.32023-12-04

Integration Details​

The "Frameworks" section covers installation with Yarn and other package managers.

After installing the SheetJS module in a RollupJS project, import statements can load relevant parts of the library:

import { read, utils, writeFileXLSX } from 'xlsx';
Parcel Bug

Errors of the form Could not statically evaluate fs call stem from a Parcel bug1. Upgrade to Parcel version 1.5.0 or later.

Complete Example​

This demo follows the Export Example.

  1. Initialize a new project:
mkdir sheetjs-parceljs
cd sheetjs-parceljs
npm init -y
  1. Save the following to index.html:
index.html
<body>
<h3>SheetJS <span id="vers"></span> export demo</h3>
<button id="xport">Click to Export!</button>
<!-- the script tag must be marked as `type="module"` -->
<script type="module">
// ESM-style import from "xlsx"
import { utils, version, writeFileXLSX } from 'xlsx';

document.getElementById("vers").innerText = version;
document.getElementById("xport").onclick = 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");
};
</script>
<body>

ParcelJS v1 did not support import statements within inline scripts.

For ParcelJS version 1, the entire script should be copied to index.js and the main index.html page should load the index.js script:

ParcelJS v1 example (click to show)
index.html
<body>
<h3>SheetJS <span id="vers"></span> export demo</h3>
<button id="xport">Click to Export!</button>
<script src="index.js"></script>
<body>
index.js
// ESM-style import from "xlsx"
import { utils, version, writeFileXLSX } from 'xlsx';

document.getElementById("vers").innerText = version;
document.getElementById("xport").onclick = 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");
};
  1. Install the SheetJS NodeJS module:
yarn add https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz

Development​

  1. Run the ParcelJS development server:
npx -y [email protected] index.html

The process will print a URL:

Server running at http://localhost:1234
  1. Access the URL from the previous step (typically http://localhost:1234) in a web browser and click the "Click to Export!" button to generate a file.

Production​

  1. Edit package.json and remove the following line:
package.json (search for this line and remove)
   "main": "index.js"
  1. Build the production site:
npx -y [email protected] build index.html

The production site will be stored in the dist folder

  1. Start a local web server and serve the dist folder:
npx http-server dist

Access the displayed URL (typically http://localhost:8080/) in a web browser. Click on "Click here to export" to generate a file.

Footnotes​

  1. See Issue 523 in the Parcel issue tracker ↩