docs.sheetjs.com/docz/docs/03-demos/03-desktop/02-nwjs.md

title	pagination_prev	pagination_next	sidebar_position	sidebar_custom_props
NW.js	demos/mobile/index	demos/cloud/index	2	summary Embedded Chromium + NodeJS

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

The 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:

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" */
  /* highlight-next-line */
  var wbout = XLSX.write(workbook, {type:'buffer', bookType:"xlsx"});
  /* highlight-next-line */
  require("fs").writeFile(filename, wbout, function(err) {
    if(!err) return alert("Saved to " + filename);
    alert("Error: " + (err.message || err));
  });
});

input.click();

Complete Example

:::note

This demo was tested against NW.js 0.66.0 on 2023 January 07.

:::

1. 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.66.0",
    "xlsx": "https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz"
  }
}

2. Download index.html into the same folder.

:::caution

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.

:::

3. Run npm install to install dependencies

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

npx nw .

The app will show and you should be able to verify reading and writing by using the file input element to select a spreadsheet and clicking the export button.

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

npx -p nw-builder nwbuild --mode=build .

This will generate the standalone app in the build\sheetjs-nwjs\ folder.