在前端开发中，我们经常需要从 Google Sheets 或 Excel 等表格应用程序中获取数据并将其呈现到网页上。tabletop.js 是一个流行的 npm 包，它可以帮助我们轻松地将这些表格数据加载到我们的前端应用程序中。本文将介绍如何使用 tabletop.js 来实现这个目标。
安装
安装 tabletop.js 很简单，只需使用 npm 命令行工具执行以下命令：
npm install tabletop
完成后，即可在项目中使用该包。
加载表格数据
要加载 Google Sheets 表格数据，我们需要先创建一个新文件，并将以下代码复制到文件中：
-- -------------------- ---- -------
----- -------- - --------------------
---------------
---- -----------------------
--------- -------------- --------- -
------------------
--
------------ ----
---请注意，YOUR_SPREADSHEET_URL 需要被替换为您自己的表格 URL。如果您正在使用 Google Sheets，则可以在“共享”菜单中找到此 URL。
callback 函数是在数据加载完成后执行的函数。在此函数中，您可以访问加载的数据并采取任何必要的操作。在本示例中，我们只是将数据对象打印到控制台上。
请注意，我们将 simpleSheet 设置为 true。这是因为我们只需要加载简单的表格数据，而不是复杂的工作表或其他高级功能。如果您需要加载更高级的功能，请将此选项设置为 false。
数据格式
当数据加载完成后，您将获得一个 JavaScript 对象，其中包含表格中的所有数据。该对象具有以下属性：
name: 表格名称column_names: 列名称数组raw: 未处理的原始数据elements: 表格行的对象数组
以下是示例数据返回：
-- -------------------- ---- -------
-
----- ---------
------------- -------- ------ ---------
---- -
------ ----- ----- ------------------------
------ ------- ----- -------------------------
--
--------- -
-
----- ----- -----
---- -----
------ ----------------------
--
-
----- ----- -------
---- -----
------ ------------------------
-
-
-示例代码
以下是一个完整的示例，它演示了如何使用 tabletop.js 加载 Google Sheets 表格数据，并在网页上呈现该数据（使用 jQuery 进行 DOM 操作）：
-- -------------------- ---- -------
--------- -----
------
------
------------------ ---------------
------- -----------------------------------------------------------
------- ----------------------------------------------------------------------------------------
-------
------
------ -------------
-------
----
-------------
------------
--------------
-----
--------
---------------
--------
--------
----- -------- - --------------------
---------------
---- -----------------------
--------- -------------- --------- -
------------------
-- ---------
--------------------- --------------- ---- -
----------- ---------------
---------
---------------------------------
--------------------------------
----------------------------------
--
---
--
------------ ----
---
---------
-------
-------在此示例中，我们使用了 jQuery 库来操作 DOM。在 callback 函数中，我们使用 $.each() 函数
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34011