npm包simple-sheets-reader使用教程

阅读时长 5 分钟读完

在前端开发中,读取Google Sheets中的数据是一项非常常见的任务。而npm包simple-sheets-reader则提供了一个简单、易用的解决方案,可以轻松地将Google Sheets中的数据读入到前端网页中来。

安装

使用npm包管理器,运行以下命令进行安装:

基本使用

使用simple-sheets-reader的基本流程包括4个步骤:

  1. 获取Google Sheets表的ID
  2. 在Google Developers Console中创建一个新项目,并启用Google Sheets API
  3. 在Google Developers Console中创建API凭证,并下载公钥
  4. 在代码中使用simple-sheets-reader读取Google Sheets表的数据

下面,我们来逐一介绍这4个步骤。

步骤1:获取Google Sheets表的ID

在Google Sheets表中,ID是唯一标识该表的字符串。要获取Google Sheets表的ID,可以在浏览器的地址栏中找到它。例如,对于下面这个表格:

该表的ID为:

步骤2:创建一个新项目,并启用Google Sheets API

在Google Developers Console中,创建一个新项目,并将该项目绑定到Google Sheets API。具体步骤如下:

  1. 在Google Developers Console中创建一个新项目
  2. 为该项目启用Google Sheets API

完成上述步骤后,Google Developers Console会自动生成一个API凭证。下一步,我们需要下载该凭证。

步骤3:创建API凭证,并下载公钥

在Google Developers Console中,选择API凭证,创建新凭证,选择“服务帐户密钥”,并下载JSON格式的公钥文件。

步骤4:在代码中使用simple-sheets-reader读取数据

为了使用simple-sheets-reader,我们需要在代码中引入该npm包:

接下来,我们需要创建一个SimpleSheetsReader对象,并读取Google Sheets表中的数据:

-- -------------------- ---- -------
----- ------ - --- --------------------
  ------------ ----------------------------
  -------------- ------------------------------------
  ------ --------------
---

------------------------- -- -
  ------------------
---

在以上的代码中,我们传递了一个包含以下属性的配置对象:

  • credentials:指向API凭证的路径。
  • spreadsheetId:Google Sheets表的ID。
  • range:要读取的数据范围。

要读取表中的所有行和列,可以将range设置为'Sheet1',这将自动确定表的大小。

如果读取成功,我们将会得到一个二维数组,其中包含Google Sheets表中指定数据范围的所有值。

示例代码

下面是一个完整的例子,它使用simple-sheets-reader来读取Google Sheets表中的数据并将它们显示在前端网页中。

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  --------------------------- ------------
-------
------
  ---------------

  ------- --------------------------------------------------------------------------------------------------
  --------
    ----- ------ - --- --------------------
      ------------ ----------------------------
      -------------- ------------------------------------
      ------ --------------
    ---

    ------------------------- -- -
      ----- ----- - --------------------------------
      --- ---- - - -- - - ------------ ---- -
        ----- --- - -----------------------------
        --- ---- - - -- - - --------------- ---- -
          ----- ---- - -----------------------------
          ---------------- - -----------
          ----------------------
        -
        -----------------------
      -
    ---
  ---------
-------
-------

在上面的代码中,我们首先创建了一个SimpleSheetsReader对象,然后使用它来读取Google Sheets表中的数据。读取成功后,我们循环遍历数组中的数据,创建一个HTML表格,并将数据以行列形式显示在表格中。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600567aa81e8991b448e3f82

纠错
反馈