Skip to main content

使用 RequireJS 打包工作表

RequireJS 是一个 JavaScript 文件和模块加载器。它包括浏览器内加载器和静态优化器。

¥RequireJS is a JavaScript file and module loader. It includes an in-browser loader as well as a static optimizer.

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

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

本演示使用 RequireJS 和 SheetJS 导出数据。我们将探讨如何使用 RequireJS 在站点中加载 SheetJS 以及如何使用 r.js 优化器创建打包站点。

¥This demo uses RequireJS and SheetJS to export data. We'll explore how to load SheetJS in a site using RequireJS and how to use the r.js optimizer to create a bundled site.

在线演示 从 CDN 加载 RequireJS，使用它从 SheetJS CDN 加载独立脚本，并使用 XLSX 变量创建一个用于创建工作簿的按钮单击处理程序。

¥The Live demo loads RequireJS from the CDN, uses it to load the standalone script from the SheetJS CDN, and uses the XLSX variable to create a button click handler that creates a workbook.

该演示重点介绍与 RequireJS 加载器的集成细节。

¥This demo focuses on integration details with the RequireJS loader.

这些演示遵循 "导出教程"，其中更详细地介绍了 SheetJS 库的用法。

¥The demos follow the "Export Tutorial", which covers SheetJS library usage in more detail.

测试部署

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

¥This demo was tested in the following environments:

RequireJS日期
2.3.62024-04-27
2.1.222024-04-27

集成详情​

¥Integration Details

SheetJS 独立脚本 符合 AMD define 语义。它们开箱即用地支持 RequireJS 和 r.js 优化器。

¥The SheetJS Standalone scripts comply with AMD define semantics. They support RequireJS and the r.js optimizer out of the box.

配置​

¥Config

RequireJS 配置应在 paths 属性中设置 xlsx 别名。

¥The RequireJS config should set the xlsx alias in the paths property.

SheetJS CDN​

SheetJS CDN URL 可以直接在路径别名中引用：

¥The SheetJS CDN URL can be directly referenced in a path alias:

require.config({
  baseUrl: ".",
  name: "app",
  paths: {
    xlsx: "https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min"
  }
});

库​

¥Vendoring

下载 SheetJS 独立脚本后，可以在路径别名中使用相对路径。例如，如果独立脚本下载到与 HTML 页面相同的目录中，则路径应为 ./xlsx.full.min：

¥After downloading the SheetJS standalone script, a relative path can be used in the path alias. For example, if the standalone script was downloaded in the same directory as the HTML page, the path should be ./xlsx.full.min:

require.config({
  baseUrl: ".",
  name: "app",
  paths: {
    xlsx: "./xlsx.full.min"
  }
});

用法​

¥Usage

设置别名后，可以从应用脚本中获取 "xlsx"：

¥Once the alias is set, "xlsx" can be required from app scripts:

require(["xlsx"], function(XLSX) {
  /* use XLSX here */
  console.log(XLSX.version);
});

在回调中，XLSX 变量公开文档的 "API 参考" 部分中列出的函数。

¥Within the callback, the XLSX variable exposes the functions listed in the "API Reference" section of the documentation.

完整示例​

¥Complete Example

该演示将探索独立的 RequireJS 脚本和 r.js 优化器。

¥This demo will explore the standalone RequireJS script and the r.js optimizer.

独立的 RequireJS​

¥Standalone RequireJS

  1. 下载 SheetJS Standalone 脚本并移至项目目录：

    ¥Download the SheetJS Standalone script and move to the project directory:

curl -LO https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js

  1. 将以下内容保存到 index.html：

    ¥Save the following to index.html:

index.html
<!DOCTYPE html>
<html lang="en">
  

<head></head>


  <body>
    <h1>SheetJS Presidents Demo</h1>
    <button id="xport">Click here to export</button>
    <script src="http://requirejs.org/docs/release/2.3.6/comments/require.js"></script>
    <script>
/* Wire up RequireJS */
require.config({
  baseUrl: ".",
  name: "SheetJSRequire",
  paths: {
    xlsx: "./xlsx.full.min"
  }
});
    </script>
    <script src="SheetJSRequire.js"></script>
  </body>
</html>

要更改 RequireJS 版本，请更改高亮的行中的版本。例如，以下脚本对应于 RequireJS 2.1.22：

¥To change the RequireJS version, change the version in the highlighted line. For example, the following script corresponds to RequireJS 2.1.22:

    <script src="http://requirejs.org/docs/release/2.1.22/comments/require.js"></script>

  1. 将以下内容保存到 SheetJSRequire.js：

    ¥Save the following to SheetJSRequire.js:

SheetJSRequire.js
require(["xlsx"], function(XLSX) {
  document.getElementById("xport").addEventListener("click", function() {
    /* fetch JSON data and parse */
    var url = "https://xlsx.nodejs.cn/executive.json";
    fetch(url).then(function(res) { return res.json(); }).then(function(raw_data) {

    /* filter for the Presidents */
    var prez = raw_data.filter(function(row) { return row.terms.some(function(term) { return term.type === "prez"; }); });

    /* sort by first presidential term */
    prez.forEach(function(row) { row.start = row.terms.find(function(term) {return term.type === "prez"; }).start; });
    prez.sort(function(l,r) { return l.start.localeCompare(r.start); });

    /* flatten objects */
    var rows = prez.map(function(row) { return {
      name: row.name.first + " " + row.name.last,
      birthday: row.bio.birthday
    }; });

    /* generate worksheet and workbook */
    var worksheet = XLSX.utils.json_to_sheet(rows);
    var workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

    /* fix headers */
    XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

    /* calculate column width */
    var max_width = rows.reduce(function(w, r) { return Math.max(w, r.name.length); }, 10);
    worksheet["!cols"] = [ { wch: max_width } ];

    /* create an XLSX file and try to save to Presidents.xlsx */
    XLSX.writeFileXLSX(workbook, "Presidents.xlsx");
    });
  });
});

r.js 优化器不处理 async 函数或 ES6 箭头函数。

¥The r.js optimizer does not handle async functions or ES6 arrow functions.

为了演示与旧版 RequireJS 版本的兼容性，SheetJSRequire.js 使用普通函数和传统的 Promise 链。

¥To demonstrate compatibility with older RequireJS releases, SheetJSRequire.js uses normal functions and traditional Promise chains.

  1. 启动本地 HTTP 服务器：

    ¥Start a local HTTP server:

npx http-server .

  1. 在 Web 浏览器中加载显示的 URL（通常为 http://localhost:8080/）。

    ¥Load the displayed URL (typically http://localhost:8080/) in a web browser.

点击 "点击此处导出" 生成文件。

¥Click on "Click here to export" to generate a file.

r.js 优化器​

¥r.js Optimizer

  1. 为优化器创建 build.js 配置：

    ¥Create build.js configuration for the optimizer:

build.js
({
  baseUrl: ".",
  name: "SheetJSRequire",
  paths: {
    xlsx: "./xlsx.full.min"
  },
  out: "SheetJSRequire.min.js"
});

  1. 运行 r.js 优化器来创建 SheetJSRequire.min.js：

    ¥Run the r.js optimizer to create SheetJSRequire.min.js:

npx -p requirejs@2.3.6 r.js -o build.js

要更改 RequireJS 版本，请更改命令中的版本。例如，以下命令使用 RequireJS 2.1.22 生成优化脚本：

¥To change the RequireJS version, change the version in the command. For example, the following command uses RequireJS 2.1.22 to generate an optimized script:

npx -p requirejs@2.1.22 r.js -o build.js

  1. 将以下内容保存到 optimized.html：

    ¥Save the following to optimized.html:

optimized.html
<!DOCTYPE html>
<html lang="en">
  

<head></head>


  <body>
    <h1>SheetJS Presidents Demo</h1>
    <button id="xport">Click here to export</button>
    <script src="http://requirejs.org/docs/release/2.3.6/comments/require.js"></script>
    <script src="SheetJSRequire.min.js"></script>
  </body>
</html>

要更改 RequireJS 版本，请更改高亮的行中的版本。例如，以下脚本对应于 RequireJS 2.1.22：

¥To change the RequireJS version, change the version in the highlighted line. For example, the following script corresponds to RequireJS 2.1.22:

    <script src="http://requirejs.org/docs/release/2.1.22/comments/require.js"></script>

  1. 在浏览器中打开 optimized.html（http://localhost:8080/optimized.html）

    ¥Open optimized.html in the browser (http://localhost:8080/optimized.html)

点击 "点击此处导出" 生成文件。

¥Click on "Click here to export" to generate a file.