制表机

制表机 是一个功能强大的数据表库，易于使用。

¥Tabulator is a powerful data table library designed for ease of use.

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

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

Tabulator 提供与 SheetJS 的深度集成，用于导入和导出数据。此演示涵盖了包括文档自定义在内的更多细节。

¥Tabulator offers deep integration with SheetJS for importing and exporting data. This demo covers additional detail including document customization.

单击此处查看实时独立集成演示。

¥Click here for a live standalone integration demo.

测试部署

该演示在以下部署中进行了测试：

¥This demo was tested in the following deployments:

浏览器	版本	日期
Chromium 125	6.2.1	2024-06-13

集成详情

¥Integration Details

SheetJS 独立脚本 适用于使用 Tabulator CDN 脚本的站点。

¥The SheetJS Standalone scripts are appropriate for sites that use the Tabulator CDN scripts.

"构架" 章节 涵盖了使用框架的项目的安装说明。

¥The "Frameworks" section covers installation instructions for projects using a framework.

Tabulator 脚本必须在 SheetJS 脚本之后加载！

¥The Tabulator script must be loaded after the SheetJS scripts!

<!-- Load SheetJS Scripts -->
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<!-- Tabulator must be loaded after SheetJS scripts -->
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>

预览数据

¥Previewing Data

Tabulator 提供了一种特殊的 setData 方法，用于在创建表后分配数据。结合 autoColumns 选项，Tabulator 将自动刷新表格。

¥Tabulator offers a special setData method for assigning data after the table is created. Coupled with the autoColumns option, Tabulator will automatically refresh the table.

该库扫描第一行对象以确定标题标签。如果第一个对象中的列缺少值，则不会加载！

¥The library scans the first row object to determine the header labels. If a column is missing a value in the first object, it will not be loaded!

获取文件

¥Fetching Files

当文件远程存储时，建议的方法是获取文件，使用 SheetJS read 方法解析，使用 sheet_to_json 从目标工作表生成对象数组，并使用 Tabulator setData 方法加载数据。以下代码片段获取示例文件并加载第一个工作表：

¥When files are stored remotely, the recommended approach is to fetch the files, parse with the SheetJS read method, generate arrays of objects from the target sheet using sheet_to_json, and load data with the Tabulator setData method. The following snippet fetches a sample file and loads the first sheet:

Fetching a spreadsheet and Displaying the first worksheet

<!-- Tabulator DIV -->
<div id="htmlout"></div>

<script>
/* Initialize Tabulator with the `autoColumns: true` setting */
var tbl = new Tabulator('#htmlout', { autoColumns: true });

/* fetch and display https://xlsx.nodejs.cn/pres.numbers */
(function() { try {
  fetch("https://xlsx.nodejs.cn/pres.numbers")
    .then(function(res) { return res.arrayBuffer(); })
    .then(function(ab) {
      /* parse ArrayBuffer */
      var wb = XLSX.read(ab);
      /* get first worksheet from SheetJS workbook object */
      var ws = wb.Sheets[wb.SheetNames[0]];
      /* generate array of row objects */
      var data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
      /* update Tabulator */
      tbl.setData(data);
    });
} catch(e) {} })();
</script>

本地文件

¥Local Files

Tabulator 提供了一种特殊的 import 方法来显示对话框并加载数据。由于导入器需要原始二进制数据，因此必须将第三个参数设置为 "buffer" 来调用该方法：

¥Tabulator provides a special import method to show a dialog and load data. Since the importer requires the raw binary data, the method must be called with the third argument set to "buffer":

Parsing a local spreadsheet and Displaying the first worksheet

<button id="imp"><b>Click here to import from XLSX file</b></button>
<!-- Tabulator DIV -->
<div id="htmlout"></div>

<script>
/* Initialize Tabulator with the `autoColumns: true` setting */
var tbl = new Tabulator('#htmlout', { autoColumns: true });

/* use Tabulator SheetJS integration to import data */
document.getElementById("imp").addEventListener("click", function() {
  tbl.import("xlsx", ".xlsx", "buffer");
})
</script>

保存数据

¥Saving Data

Tabulator 提供了一种特殊的 download 方法来启动导出：

¥Tabulator provides a special download method to initiate the export:

Exporting data from Tabulator to XLSX

<input type="submit" value="Export to XLSX!" id="xport" onclick="export_xlsx();">
<!-- Tabulator DIV -->
<div id="htmlout"></div>

<script>
/* Initialize Tabulator with the `autoColumns: true` setting */
var tbl = new Tabulator('#htmlout', { autoColumns: true });

/* use Tabulator SheetJS integration to import data */
function export_xlsx() {
  /* use Tabulator SheetJS integration */
  tbl.download("xlsx", "SheetJSTabulator.xlsx");
}
</script>

官方文档 涵盖支持的选项。

¥The official documentation covers supported options.

后处理

¥Post-processing

Tabulator 生成 SheetJS 工作簿对象后，将调用 documentProcessing 事件处理程序。这允许在创建最终工作簿文件之前进行调整。以下示例添加包含日期的第二个工作表：

¥The documentProcessing event handler is called after Tabulator generates a SheetJS workbook object. This allows for adjustments before creating the final workbook file. The following example adds a second sheet that includes the date:

Exporting data and metadata

tbl.download("xlsx", "SheetJSTabulator.xlsx", {
  documentProcessing: function(wb) {

    /* create a new worksheet */
    var ws = XLSX.utils.aoa_to_sheet([
      ["SheetJS + Tabulator Demo"],
      ["Export Date:", new Date()]
    ]);

    /* add to workbook */
    XLSX.utils.book_append_sheet(wb, ws, "Metadata");

    return wb;
  }
});