NW.js 中的表格

NW.js（以前称为 node-webkit）是一个使用 Web 技术构建桌面应用的现代工具包。

¥NW.js, formerly node-webkit, is a modern toolkit for building desktop apps using web technologies.

SheetJS 是一个用于从电子表格读取和写入数据的 JavaScript 库。

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

"完整示例" 部分涵盖了用于读取和写入工作簿的完整桌面应用。该应用将如下图所示：

¥The "Complete Example" section covers a complete desktop app to read and write workbooks. The app will look like the screenshots below:

Windows	macOS	Linux

集成详情

¥Integration Details

可以在入口点 HTML 页面的 SCRIPT 标记中引用 SheetJS 独立脚本。

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

NW.js 提供了读写文件的解决方案。

¥NW.js provides solutions for reading and writing files.

读取文件

¥Reading Files

浏览器中的标准 HTML5 FileReader 技术适用于 NW.js！

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

NW.js 处理将文件拖到应用窗口中的操作系统细节。拖放片段适用于页面上的 DIV 元素。

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

同样，文件输入元素自动映射到标准 Web API。

¥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" />

事件处理程序将像处理 Web 事件一样处理该事件：

¥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

具有 nwsaveas 属性的文件输入元素显示用于保存文件的 UI。标准技巧是生成一个隐藏文件输入 DOM 元素并对其进行 "click"。由于 NW.js 在 fs 包中不存在 writeFileSync，因此需要手动步骤：

¥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

测试部署

本 demo 在以下环境下进行了测试：

¥This demo was tested in the following environments:

操作系统和版本	架构	NW.js	日期	注意
macOS 15.2	`darwin-x64`	`0.94.0`	2024-12-31
macOS 14.5	`darwin-arm`	`0.88.0`	2024-05-28
视窗 11	`win11-x64`	`0.94.0`	2024-12-19
视窗 11	`win11-arm`	`0.94.0`	2025-02-23
Linux（全息操作系统）	`linux-x64`	`0.89.0`	2025-01-10
Linux（Debian）	`linux-arm`	`0.60.0`	2025-02-16	非官方版本 [^1]

创建项目文件夹：

¥Create a project folder:

mkdir sheetjs-nwjs
cd sheetjs-nwjs

创建指定入口点的 package.json 文件：

¥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.94.0",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
  }
}

将 index.html 下载到同一文件夹中。

¥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://xlsx.nodejs.cn/nwjs/index.html

安装依赖：

¥Install dependencies:

npm i

要验证应用是否有效，请在测试环境中运行：

¥To verify the app works, run in the test environment:

npx nw .

启动时，应用将获取并解析 https://xlsx.nodejs.cn/pres.numbers 。

¥On launch, the app will fetch and parse https://xlsx.nodejs.cn/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.

单击 "导出数据！" 并将生成的文件保存到 SheetJSNWDemo.xlsx。此文件可以在 Excel 或其他电子表格编辑器中打开。

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

Linux ARM64 support (click to show)

NW.js does not officially support linux-arm. The official recommendation is to use a third-party pre-built version.

curl -LO https://github.com/LeonardLaszlo/nw.js-armv7-binaries/releases/download/nw60-arm64_2022-01-08/nw60-arm64_2022-01-08.tar.gz
tar -xzf nw60-arm64_2022-01-08.tar.gz
cp usr/docker/dist/nwjs-chromium-ffmpeg-branding/nwjs-v0.60.1-linux-arm64.tar.gz
tar -xzf nwjs-v0.60.1-linux-arm64.tar.gz
./nwjs-v0.60.1-linux-arm64/nw .

Unfortunately nw-builder will not be able to build a standalone program.

要构建独立应用，请运行构建器：

¥To build a standalone app, run the builder:

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

这将在 ..\out\ 文件夹中生成独立应用。

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

nw-builder 版本 4.12.0 中存在回归问题。在本地 win11-x64 测试中，版本 4.11.6 正确生成了独立应用。

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

架构	命令
`darwin-x64`	`open ../out/sheetjs-nwjs.app`
`win11-x64`	`..\out\sheetjs-nwjs.exe`
`win11-arm`	`..\out\sheetjs-nwjs.exe`
`linux-x64`	`../out/sheetjs-nwjs`

[^1]: nw60-arm64_2022-01-08 发布包括 nw 的 ARM64 版本。

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

集成详情​

读取文件​

写入文件​

完整示例​

集成详情

读取文件

写入文件

完整示例