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
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 11 | win11-x64 | 0.94.0 | 2024-12-19 | |
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 |
- Create a project folder:
mkdir sheetjs-nwjs
cd sheetjs-nwjs
- Create a
package.json
file that specifies the entry point:
{
"name": "sheetjs-nwjs",
"author": "sheetjs",
"version": "0.0.0",
"main": "index.html",
"dependencies": {
"nw": "0.94.0",
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
}
}
- 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
- Install dependencies:
npm i
- 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.
- To build a standalone app, run the builder:
npx -p [email protected] nwbuild --mode=build --version=0.94.0 --glob=false --outDir=../out ./
This will generate the standalone app in the ..\out\
folder.
There is a regression in nw-builder
version 4.12.0
. In local win11-x64
testing, version 4.11.6
correctly generated the standalone application.
- Launch the generated application:
Architecture | Command |
---|---|
linux-x64 | ../out/sheetjs-nwjs |
win11-x64 | ..\out\sheetjs-nwjs.exe |
Footnotes
-
The
nw60-arm64_2022-01-08
release included an ARM64 version ofnw
. ↩