NW.js

The SheetJS Standalone scripts can be referenced in a SCRIPT tag from the entry point HTML page.

The "Complete Example" creates an app that looks like the screenshots below:

Windows	macOS	Linux

Integration Details

NW.js provides solutions for reading and writing files.

Reading Files

The standard HTML5 FileReader techniques from the browser apply to NW.js!

NW.js handles the OS minutiae for dragging files into app windows. The drag and drop snippet apply to DIV elements on the page.

Similarly, file input elements automatically map to standard Web APIs.

For example, assuming a file input element on the page:

<input type="file" name="xlfile" id="xlf" />

The event handler would process the event as if it were a web event:

async function handleFile(e) {
  const file = e.target.files[0];
  const data = await file.arrayBuffer();
  /* data is an ArrayBuffer */
  const workbook = XLSX.read(data);

  /* DO SOMETHING WITH workbook HERE */
}
document.getElementById("xlf").addEventListener("change", handleFile, false);

Writing Files

File input elements with the attribute nwsaveas show UI for saving a file. The standard trick is to generate a hidden file input DOM element and "click" it. Since NW.js does not present a writeFileSync in the fs package, a manual step is required:

/* pre-build the hidden nwsaveas input element */
var input = document.createElement('input');
input.style.display = 'none';
input.setAttribute('nwsaveas', 'SheetJSNWDemo.xlsx');
input.setAttribute('type', 'file');
document.body.appendChild(input);

/* show a message if the save is canceled */
input.addEventListener('cancel',function(){ alert("Save was canceled!"); });

/* write to a file on the 'change' event */
input.addEventListener('change',function(e){
  /* the `value` is the path that the program will write */
  var filename = this.value;

  /* use XLSX.write with type "buffer" to generate a buffer" */
  var wbout = XLSX.write(workbook, {type:'buffer', bookType:"xlsx"});
  require("fs").writeFile(filename, wbout, function(err) {
    if(!err) return alert("Saved to " + filename);
    alert("Error: " + (err.message || err));
  });
});

input.click();

Complete Example

Tested Deployments

This demo was tested in the following environments:

OS and Version	Architecture	NW.js	Date	Notes
macOS 14.3.1	darwin-x64	0.85.0	2024-03-12
macOS 14.5	darwin-arm	0.88.0	2024-05-28
Windows 10	win10-x64	0.83.0	2024-03-04
Windows 11	win11-arm	0.88.0	2024-05-28
Linux (HoloOS)	linux-x64	0.89.0	2024-07-07
Linux (Debian)	linux-arm	0.60.0	2024-05-23	Unofficial build1

0. Create a project folder:

mkdir sheetjs-nwjs
cd sheetjs-nwjs

1. Create a package.json file that specifies the entry point:

package.json

{
  "name": "sheetjs-nwjs",
  "author": "sheetjs",
  "version": "0.0.0",
  "main": "index.html",
  "dependencies": {
    "nw": "0.89.0",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
  }
}

2. Download index.html into the same folder.

Right-click the link and select "Save Link As...". Left-clicking the link will try to load the page in your browser. The goal is to save the file contents.

In the terminal window, the download can be performed with:

curl -LO https://docs.sheetjs.com/nwjs/index.html

3. Install dependencies:

npm i

4. To verify the app works, run in the test environment:

npx nw .

On launch, the app will fetch and parse https://docs.sheetjs.com/pres.numbers .

Using the file input element, a file can be selected from the filesystem and the table will refresh with the contents of the selected file.

Click "Export Data!" and save the generated file to SheetJSNWDemo.xlsx. This file can be opened in Excel or another spreadsheet editor.

5. To build a standalone app, run the builder:

npx -p nw-builder nwbuild --mode=build --version=0.89.0 --glob=false --outDir=../out ./

This will generate the standalone app in the ..\out\ folder.

6. Launch the generated application:

Architecture	Command
linux-x64	../out/sheetjs-nwjs

Footnotes

1. The nw60-arm64_2022-01-08 release included an ARM64 version of nw. ↩