Dojo 站点中的表

Dojo 工具包 是一个用于构建用户界面的 JavaScript 工具包。它包括代码加载和 DOM 操作的解决方案。

¥Dojo Toolkit is a JavaScript toolkit for building user interfaces. It includes solutions for code loading and DOM manipulation.

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

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

该演示使用 Dojo Toolkit 和 SheetJS 来处理和生成电子表格。我们将探讨如何使用 Dojo 加载器加载 SheetJS 并执行常见任务。

¥This demo uses Dojo Toolkit and SheetJS to process and generate spreadsheets. We'll explore how to load SheetJS using Dojo loader and perform common tasks.

安装

¥Installation

"AMD" 指令 包含将 SheetJS 与 require 一起使用的详细信息。

¥The "AMD" instructions includes details for using SheetJS with require.

本节中的演示使用 SheetJS CDN 的异步加载策略：

¥The demos in this section use the async loading strategy with the SheetJS CDN:

<script>
/* configure package paths */
dojoConfig = {
  packages: [
    {
      /* Dojo only supports the name "xlsx" for the script */
      name: "xlsx",
      /* `location` omits trailing slash */
      location: "https://cdn.sheetjs.com/xlsx-0.20.3/package/dist",
      /* `main` omits the ".js" extension */
      main: "xlsx.full.min"
    }
  ]
}
</script>
<!-- load dojo.js -->
<script src="dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<script>
require(
  /* specify "xlsx" in the module array */
  ["dojo/request/xhr", "xlsx"],
  /* the name of the variable should not be _XLSX ! */
  function(xhr, _XLSX) {
    /* XLSX-related operations happen in the callback. Use the global `XLSX` */
    console.log(XLSX.version);
  }
);
</script>

官方 Google CDN 没有最新版本的 Dojo Toolkit

¥The official Google CDN does not have the newest releases of Dojo Toolkit

这是一个已知的 Google CDN 错误。

¥This is a known Google CDN bug.

脚本 https://xlsx.nodejs.cn/dojo/dojo.js 是从官方 1.17.3 未压缩版本工件 [^1] 中获取的。

¥The script https://xlsx.nodejs.cn/dojo/dojo.js was fetched from the official 1.17.3 uncompressed release artifact[^1].

在线演示

¥Live Demos

测试部署

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

¥This demo was tested in the following environments:

平台	日期
Chromium 125	2024-06-08

专门使用 Dojo Core 的演示是使用 Dojo Toolkit 1.17.3 进行测试的。

¥Demos exclusively using Dojo Core were tested using Dojo Toolkit 1.17.3.

使用 dijit 或 dojox 的演示是使用 Dojo Toolkit 1.14.1 进行测试的。这是 Google CDN 上可用的最新版本。

¥Demos using dijit or dojox were tested using Dojo Toolkit 1.14.1. This was the latest version available on the Google CDN.

• 下载并显示数据

  ¥Download and display data

• 获取 JSON 并生成工作簿

  ¥Fetch JSON and generate a workbook

• 解析文件并创建数据存储

  ¥Parse file and create a data store

• 将数据从存储导出到 XLSX

  ¥Export data from a store to XLSX

操作

¥Operations

解析远程文件

¥Parsing Remote Files

当使用 XHR 获取电子表格时，handleAs: "arraybuffer" 会生成 ArrayBuffer，可以将其传递给 SheetJS read 方法。

¥When fetching spreadsheets with XHR, handleAs: "arraybuffer" yields an ArrayBuffer which can be passed to the SheetJS read method.

以下示例从第一个工作表生成 HTML 表：

¥The following example generates a HTML table from the first worksheet:

<div id="tbl"></div>
<script>
require(["dojo/request/xhr", "xlsx"], function(xhr, _XLSX) {
  xhr("https://xlsx.nodejs.cn/pres.numbers", {
    headers: { "X-Requested-With": null },
    handleAs: "arraybuffer"
  }).then(function(ab) {
    /* read ArrayBuffer */
    var wb = XLSX.read(ab);
    /* display first worksheet data */
    var ws = wb.Sheets[wb.SheetNames[0]];
    document.getElementById("tbl").innerHTML = XLSX.utils.sheet_to_html(ws);
  });
});
</script>

X-Requested-With 标头设置解决了与 CORS 相关的一些问题。

¥The X-Requested-With header setting resolves some issues related to CORS.

写入本地文件

¥Writing Local Files

SheetJS writeFile 方法尝试创建并下载文件：

¥The SheetJS writeFile method attempts to create and download a file:

require(["xlsx"], function(_XLSX) {
  /* create a sample workbook */
  var ws = XLSX.utils.aoa_to_sheet(["SheetJS".split(""), [5,4,3,3,7,9,5]]);
  var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  /* create an XLSX file and try to save to SheetJSDojo.xlsx */
  XLSX.writeFile(workbook, "SheetJSDojo.xlsx");
});

数据存储

¥Data Stores

dojo/store[^2] 是处理结构化数据的主要接口。

¥dojo/store[^2] is the primary interface for working with structured data.

导入数据

¥Importing Data

SheetJS sheet_to_json 方法可以生成可以支持 dojo/store/Memory 存储的数组的数组。

¥The SheetJS sheet_to_json method can generate an array of arrays that can back a dojo/store/Memory store.

以下示例获取测试文件，根据第一个工作表中的数据创建内存存储，并分配给 dijit UI 小部件：

¥The following example fetches a test file, creates a Memory store from the data in the first worksheet, and assigns to a dijit UI Widget:

<script>
require([
  "dojo/ready", "dojo/request/xhr", "dojo/store/Memory", "dijit/registry", "xlsx"
], function(ready, xhr, Memory, registry, _XLSX) {
  ready(function() {
    /* fetch test file */
    xhr("https://xlsx.nodejs.cn/pres.xlsx", {
      headers: { "X-Requested-With": null },
      handleAs: "arraybuffer"
    }).then(function(ab) {
      /* parse ArrayBuffer */
      var wb = XLSX.read(ab);
      /* get first worksheet */
      var ws = wb.Sheets[wb.SheetNames[0]];
      /* generate row objects from first worksheet */
      const aoo = XLSX.utils.sheet_to_json(ws);

      /* generate memory store and assign to combo box */
      var store = new Memory({ data: aoo });
      registry.byId("widget").store = store;
    });
  });
});
</script>

导出数据

¥Exporting Data

从数据存储开始，查询结果是对象数组。可以使用 SheetJS json_to_sheet 方法创建工作表：

¥Starting from a data store, query results are arrays of objects. Worksheets can be created using the SheetJS json_to_sheet method:

function export_all_data_from_store(store) {
  require(["xlsx"], function(_XLSX) {
    /* pull all data rows from the store */
    var rows = store.query(function() { return true; });

    /* generate SheetJS worksheet */
    var ws = XLSX.utils.json_to_sheet(rows);

    /* generate SheetJS workbook and write to XLSX */
    var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Export");
    XLSX.writeFile(wb, "SheetJSDojoExport.xlsx");
  });
}

[^1]: 所有 Dojo Toolkit 版本均在 https://download.dojotoolkit.org/ 上提供。镜像的 dojo.js 对应于 1.17.3 未压缩的脚本 http://download.dojotoolkit.org/release-1.17.3/dojo.js.uncompressed.js。

¥All Dojo Toolkit releases are available at https://download.dojotoolkit.org/. The mirrored dojo.js corresponds to the 1.17.3 uncompressed script http://download.dojotoolkit.org/release-1.17.3/dojo.js.uncompressed.js.

[^2]: 请参阅 Dojo Toolkit 文档中的 dojo/store。

¥See dojo/store in the Dojo Toolkit documentation.