4.9 KiB
title | pagination_prev | pagination_next | sidebar_position | sidebar_custom_props | ||
---|---|---|---|---|---|---|
NW.js | demos/mobile/index | demos/data/index | 2 |
|
import current from '/version.js'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import CodeBlock from '@theme/CodeBlock';
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:
Win10 | 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 in the following environments:
OS and Version | Arch | NW.js | Date |
---|---|---|---|
macOS 13.5.2 | x64 | 0.78.1 |
2023-09-27 |
macOS 13.5.2 | ARM | 0.78.1 |
2023-09-27 |
Windows 10 | x64 | 0.78.1 |
2023-09-27 |
Windows 11 | ARM | 0.78.1 |
2023-09-27 |
Linux (HoloOS) | x64 | 0.78.1 |
2023-10-11 |
There is no official Linux ARM64 release. The community release1 was tested and verified on 2023-09-27.
:::
- 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.78.1", "xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz" } }
}
- Download
index.html
into the same folder.
:::caution pass
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 .
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.
- To build a standalone app, run the builder:
npx -p nw-builder nwbuild --mode=build --version=0.78.1 --glob=false --outDir=../out ./
This will generate the standalone app in the ..\out\
folder.
-
The
nw60-arm64_2022-01-08
release included an ARM64 version ofnw
. ↩︎