Angular 中的 Google Sheets API

Question

我试图找到如何在 Angular 中使用 Google Sheets API。文档页面上没有对 Angular 的引用。我已经尝试过这个，但它似乎不起作用。

有人可以指导我如何在我的 Angular 应用程序中使用 Google Sheets API 吗？

我目前正在使用 Angular 8

Answer 1

我专门为这个用例制作了一个 Angular 库！

使用ng-google-sheets-db，您可以轻而易举地从 Google 表格加载数据，并将Google 表格用作Angular 应用程序的（只读）后端！您可以查看Stackblitz 示例应用程序。

安装

ng add ng-google-sheets-db

或者

npm install ng-google-sheets-db

用法

谷歌表格

1. 创建一个谷歌表：
   • 第一行必须是标题。
   • 以下几行是您的条目，每行一个条目。
   • 您可能有一个活动列，您可以使用它启用或禁用行/条目。
   • 此处提供了Google Sheets 演示电子表格。
2. 分享您的工作表：
   • [文件] ？[分享] ？在“获取链接”的模式底部，单击 [更改为拥有链接的任何人] 以成为“查看者”。
   • 获取电子表格 ID（即1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA）：它是 Google 电子表格 URL 的一部分。
   • 获取工作表名称：可以在 Google 电子表格的底部找到工作表的名称。
3. 可选：如果您还没有为您的 Google 帐户启用两步验证可能是个好主意:wink:。

谷歌云平台 (GCP)

一个很好的概述指南是Workspace 开发人员入门。

1. 在Google Cloud Console 中创建一个新项目。
2. 启用 Google Sheets API：[API 和服务] ? [启用 API 和服务] ? 搜索“Google Sheets API”？[使能够]。
3. 创建API 密钥：[API 和服务] ? [证书] ？[+ 创建凭证] ? [API 密钥] ? [限制键] ? 在“应用程序限制”中选择“HTTP 引用（网站）”和“网站限制”，在“API 限制”中选择“限制密钥”并选择“Google Sheets API”？[节省]。
4. 获取生成的 API 密钥。

角

添加GoogleSheetsDbService到您的应用程序的模块作为提供者和 Angular 的HttpClientModule导入：

import { HttpClientModule } from '@angular/common/http';

import { API_KEY, GoogleSheetsDbService } from 'ng-google-sheets-db';

@NgModule({
  ...
  imports: [
    HttpClientModule,
    ...
  ],
  providers: [
    {
      provide: API_KEY,
      useValue: <YOUR_GOOGLE_SHEETS_API_KEY>,
    },
    GoogleSheetsDbService
  ],
  ...
})
export class AppModule { }

导入并注入组件的构造函数：

import { GoogleSheetsDbService } from 'ng-google-sheets-db';

@Component({
  ...
})
export class YourComponent implements OnInit {
  characters$: Observable<Character[]>;

  constructor(private googleSheetsDbService: GoogleSheetsDbService) { }

  ngOnInit(): void {
    this.characters$ = this.googleSheetsDbService.get<Character>('1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA', "Characters", characterAttributesMapping);
  }

属性映射

将attributesMapping在谷歌电子表格列映射到你的结果对象。

const attributesMapping = {
  id: "ID",
  name: "Name",
  email: "Email Address",
  contact: {
    _prefix: "Contact ",
    street: "Street",
    streetNumber: "Street Number",
    zip: "ZIP",
    city: "City",
  },
  skills: {
    _prefix: "Skill ",
    _listField: true,
  },
};

例如，Google 电子表格列电子邮件地址映射到结果对象属性email。

嵌套对象

contact是嵌套对象的示例。您可以将 a 定义_prefix为嵌套对象的所有列的前缀。请注意，_prefix可能需要尾随空格。

列表

skills是一个列表的例子。您需要为列表的所有列设置_listField和_prefix。在此示例中，所有以 _Skill _ 开头且数字递增的列都是列表的一部分，即Skill 1、Skill 2等。请注意，_prefix可能需要尾随空格。

它带有分步使用指南和演示应用程序！

Answer 2

检查这篇文章：http://leifwells.com/2016/06/09/ionic-2--angular-2-using-a-google-spreadsheet-as-a-data-source/

您不需要任何外部包，但需要对您的工作表执行 http 请求。

考虑到上述情况，你可以尝试这样的事情：

1. 将您的表格发布到网络：

   转到你的谷歌表格，然后选择File > Publish to the Web 选项，最终会给你一个 URL，里面有一个 id，这很重要。在我们的例子中，url 如下所示：

   https://docs.google.com/spreadsheets/d/15Kndr-OcyCUAkBUcq6X3BMqKa_y2fMAXfPFLiSACiys/pubhtml

   此 url 中的 id 是：

   15Kndr-OcyCUAkBUcq6X3BMqKa_y2fMAXfPFLiSACiys

2. 创建一个 Google 表格提供程序（使用第一个链接作为参考）：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { map } from 'rxjs/operators';

@Injectable()
export class GoogleDriveProvider {
  data: any = null;

  constructor(public http: Http) { }

  public getSheetData(): Observable<any> {
    const sheetId = '15Kndr-OcyCUAkBUcq6X3BMqKa_y2fMAXfPFLiSACiys';
    const url = `https://spreadsheets.google.com/feeds/list/${sheetId}/od6/public/values?alt=json`;

    return this.http.get(url)
      .pipe(
        map((res: any) => {
          const data = res.feed.entry;

          const returnArray: Array<any> = [];
          if (data && data.length > 0) {
            data.forEach(entry => {
              const obj = {};
              for (const x in entry) {
                if (x.includes('gsx$') && entry[x].$t) {
                  obj[x.split('$')[1]] = entry[x]['$t'];
                }
              }
              returnArray.push(obj);
            });
          }
          return returnArray;
        })
      );
  }
}

注意：该示例使用 Angular 8。