在前端开发中,读取Google Sheets中的数据是一项非常常见的任务。而npm包simple-sheets-reader则提供了一个简单、易用的解决方案,可以轻松地将Google Sheets中的数据读入到前端网页中来。
安装
使用npm包管理器,运行以下命令进行安装:
npm install simple-sheets-reader
基本使用
使用simple-sheets-reader的基本流程包括4个步骤:
- 获取Google Sheets表的ID
- 在Google Developers Console中创建一个新项目,并启用Google Sheets API
- 在Google Developers Console中创建API凭证,并下载公钥
- 在代码中使用simple-sheets-reader读取Google Sheets表的数据
下面,我们来逐一介绍这4个步骤。
步骤1:获取Google Sheets表的ID
在Google Sheets表中,ID是唯一标识该表的字符串。要获取Google Sheets表的ID,可以在浏览器的地址栏中找到它。例如,对于下面这个表格:
https://docs.google.com/spreadsheets/d/1fH43C3qzeUIeZw_Jhes_vQiPblKAyRjK/edit#gid=0
该表的ID为:
1fH43C3qzeUIeZw_Jhes_vQiPblKAyRjK
步骤2:创建一个新项目,并启用Google Sheets API
在Google Developers Console中,创建一个新项目,并将该项目绑定到Google Sheets API。具体步骤如下:
- 在Google Developers Console中创建一个新项目
- 为该项目启用Google Sheets API
完成上述步骤后,Google Developers Console会自动生成一个API凭证。下一步,我们需要下载该凭证。
步骤3:创建API凭证,并下载公钥
在Google Developers Console中,选择API凭证,创建新凭证,选择“服务帐户密钥”,并下载JSON格式的公钥文件。
步骤4:在代码中使用simple-sheets-reader读取数据
为了使用simple-sheets-reader,我们需要在代码中引入该npm包:
const SimpleSheetsReader = require('simple-sheets-reader');
接下来,我们需要创建一个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