在前端开发中，获取并处理数据是必不可少的过程。而 Google Spreadsheet 是非常常见的一种数据表格格式。然而，在前端中获取和处理这种数据需要使用一些特殊的库，而 erevna-google-spreadsheet-loader 就是其中之一。本文将介绍它的使用教程。
什么是 erevna-google-spreadsheet-loader？
erevna-google-spreadsheet-loader 是一个可以在前端中以 JSON 格式获取 Google Spreadsheet 数据的库。它基于 Google Spreadsheet API 构建，并提供了一个简单的接口。
开始使用
安装
使用 npm 安装：
npm install erevna-google-spreadsheet-loader
配置
在开始使用之前，我们需要先配置一些参数。首先，我们需要在 Google Developer Console 中创建一个项目。创建完成后，需要打开 Sheets API，并创建一个服务账户。
在服务账户页面中，我们可以创建一个用于访问 Spreadsheet 的密钥。我们需要将这个密钥下载下来，并将其放置在项目文件夹中，例如 ./config/spreadsheet.json。
接着，我们需要记录我们的 Google Spreadsheet 的 ID 和工作表名称。可以在任意一个工作表的 URL 后面找到 ID 信息。例如，对于这个工作表的 URL：
https://docs.google.com/spreadsheets/d/1CoooolrLXjEvUMyJlUyf47sdn2w/edit#gid=123456
我们可以在 1CoooolrLXjEvUMyJlUyf47sdn2w 后面找到 ID 信息。将其记录下来。接着，我们需要确定我们要读取的工作表的名称，例如 Sheet1。
最后，我们需要确定我们要加载哪些列。可以在 Google Spreadsheet 的顶部选择所需的列。在这个例子中，我们选择了 A、B 和 E 列。
代码
我们现在可以开始编写代码了。首先，我们需要创建一个新的 erevna-google-spreadsheet-loader 实例：
-- -------------------- ---- ------- ------ - ----------------------- - ---- ----------------------------------- ----- ------------- - ------------------------------- -- -- ----------- -- ----- ------------- - --------- -- ---------- ----- ------- - ----- ---- ----- -- ------ ----- ------ - - -------------- -------------- -------- -------- ---------------------------- -- ----- ------ - --- --------------------------------
然后，我们可以使用 loader.load() 方法来加载我们的数据。该方法返回一个 Promise，当数据加载完成时会得到解析为 JSON 格式的数据。
loader.load().then(data => {
console.log(data);
});如果你使用的是 React，你可以轻松将数据保存在组件的状态中：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- -----
--
-
------------------- -
----- ------------- - ------------------------------- -- -- ----------- --
----- ------------- - --------- -- ----------
----- ------- - ----- ---- ----- -- ------
----- ------ - -
--------------
--------------
--------
-------- ----------------------------
--
----- ------ - --- --------------------------------
----------------------- -- -
--------------- ---- ---
---
-
-------- -
-- ------------------ -
------ ----------------------
-
-- -------
-
-总结
在本文中，我们介绍了 erevna-google-spreadsheet-loader 这个 npm 包的使用方法，以及如何配置 Google Developer Console 中的参数，读取 Google Spreadsheet 中的数据，以及将数据保存在组件状态中。这个库是前端开发过程中非常有用的工具之一，学习使用它将有助于你处理 Google Spreadsheet 数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005625e81e8991b448df9e3