在前端开发中,有很多重复性的工作需要我们去实现。例如访问 Google Sheet,通常需要手动写 API 接口请求,然后解析返回的数据,处理错误等。为了避免重复劳动,我们可以使用现成的 npm 包,让我们更专注于业务代码的实现。本文将介绍一个 npm 包 raincatcher-google-sheet-store,它可以帮助我们方便地访问 Google Sheet,并解析响应数据。
安装
我们首先需要在自己的项目中安装该 npm 包。在命令行中输入以下命令即可完成安装:
npm install raincatcher-google-sheet-store --save
安装完成后,在代码中引入该 npm 包:
const GoogleSheetStore = require("raincatcher-google-sheet-store");
使用
接下来,让我们看看如何使用 raincatcher-google-sheet-store 包来访问 Google Sheet。假设我们要访问的 Google Sheet 的 URL 为:https://docs.google.com/spreadsheets/d/1H_bgSLMhlCi-ztLvG7n_qTIKjbcQ7fJilhBlK05WYD8/edit#gid=0
准备工作
首先,我们需要从 Google Developers Console 建立一个对应的项目,并授权其访问 Google Sheet。
- 打开 https://console.developers.google.com/
- 建立一个项目
- 在项目中开启 Google Sheets API
- 在项目中的「APIs 和服务」> 「凭据」> 「创建凭据」中创建 OAuth 2.0 客户端 ID,选择「Web 应用程序」类型,填写回调地址,生成 client ID 和 client secret
访问 Google Sheet
- 在代码中,我们需要实例化一个 GoogleSheetStore 的对象,将 Google Sheet 的 URL、client ID 和 client secret 传入:
const sheetStore = new GoogleSheetStore({ spreadsheet_url: "https://docs.google.com/spreadsheets/d/1H_bgSLMhlCi-ztLvG7n_qTIKjbcQ7fJilhBlK05WYD8/edit#gid=0", google_auth_json: require("./google_auth.json") });
- 接着,我们就可以通过 GoogleSheetStore 对象访问 Google Sheet 的数据了。例如,我们可以通过 getSheet 函数取得第一个 Sheet 的数据:
(async () => { const sheet = await sheetStore.getSheet(1); console.log(sheet); })();
getSheet 函数接受一个参数 sheetIndex,表示要获取哪一个 Sheet 的数据。这里我们传入的是 1,表示获取第一个 Sheet。
- 获取到的数据格式如下:
-- -------------------- ---- ------- - - ------- -------- ------ --- --------- --- -- - ------- ------ ------ --- --------- --- -- -- --- -
写入数据
我们还可以通过 GoogleSheetStore 中的 setSheet 函数写入数据。例如,我们可以在第二个 Sheet 中添加一行数据:
(async () => { const result = await sheetStore.setSheet(2, { name: "Carl", age: 35, gender: "M" }); console.log(result); })();
setSheet 函数接受两个参数:sheetIndex 表示要写入哪一个 Sheet,data 表示要写入的数据。注意,写入数据时,data 的格式需要和读取时的格式相同。以上面的数据为例,正确的 data 格式应该为:
{ "name": "Carl", "age": 35, "gender": "M" }
综合示例
下面是一个综合应用示例,它可以读取多个 Sheets 数据,并将其合并为一个数组,然后写入一个新的 Sheet:
-- -------------------- ---- ------- ----- ---------- - --- ------------------ ---------------- ------------------------------------------------------------------------------------------------- ----------------- ----------------------------- --- ------ -- -- - -- -- ------ - ------ ----- ------ - ----- ----------------------- ----- ------ - ----- ----------------------- -- ---- ----- ---- - - ---------- --------- -- -- --- ----- - ----- ------ - ----- ---------------------- ------ -------------------- -----
小结
本文介绍了如何使用 raincatcher-google-sheet-store npm 包来方便地访问 Google Sheet。我们首先介绍了 npm 包的安装方法和如何引入它,然后详细讲解了如何使用 GoogleSheetStore 对象来读取、写入数据,以及如何将多个 Sheets 的数据合并为一个数组,并写入一个新的 Sheet 中。相信这些知识对前端开发者来说有很多指导意义。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055bff81e8991b448d99eb