我们可以在 javascript 中使用 fetch 从谷歌表格或任何其他方式获取数据吗？答案

【问题标题】：Can we use fetch in javascript to get data from google sheets or any other way to do so?我们可以在 javascript 中使用 fetch 从谷歌表格或任何其他方式获取数据吗？
【发布时间】：2021-07-08 05:59:00
【问题描述】：

我想尝试将 google 表格连接到我的网站，但在此之前，我尝试搜索是否可以从 google 表格中获取（读取）数据，以便我可以使用 javascript 在我的网站中显示它。我想要实现的是获取数据，以便我可以在我的网站上显示它，但我很困惑是否真的有可能？

所以这就是我想要实现的目标：

用户填写我分享给用户的 Google 表单
数据将存储在谷歌表格中（因为这是谷歌表单的默认选项）
我想将存储的数据从谷歌表格中提取到我的网站，以便他们查看调查的其他回复

是否可以仅使用 javascript 和 google sheet 来实现？

有关信息，我已经阅读了一些源代码，但仍然对在 vanilla.js 中实现它感到困惑（没有任何框架的普通 javascript，例如 vue.js 或 react.js）：

如果您想尝试，这是我的电子表格公开示例：

https://docs.google.com/spreadsheets/d/e/2PACX-1vS7fJjjdC95htb0nYuIMMkNKQ8WIZz01wdEVq_mZ_L3XrTn_rzXT5aKKQX_WTUsOvTwALVwGwm8mE1t/pubhtml?alt=json

有人可以帮我解决这个问题吗？

【问题讨论】：

这取决于您到底想要完成什么。如果您想从非公开电子表格中检索内容，可以使用 Sheets API 通过 JavaScript 检索此数据。看看this quickstart。如果您只想将已发布到网络的电子表格嵌入您的网站，请关注these steps。这是否回答你的问题？如果没有，请考虑提供更多详细信息，我将能够对此进行扩展。
@lamblichus 感谢您的回复，从您的解释来看，我想要实现的是第一个，我想获取电子表格数据以便在我的网络中显示它，让我先查看快速入门，因为我很困惑我应该从哪里开始
@lamblichusthankyou 在尝试了几次之后花了很长时间才实现它，我找到了一种更简单的方法来实现我想要做的事情，它使用tabletop.js 你可以看到方法在我的回答中实现它

标签： javascript google-sheets

【解决方案1】：

经过多次试错，查了很多文档，终于可以用tabletop.js解决了，这很容易实现，我试过用@lamblichus注释来尝试快速启动，但需要很长时间实现它的方法，但是当我在论坛中偶然发现有人尝试使用 Tabletop.js 库时，是的，它比使用谷歌电子表格 API 更容易设置，这是库的链接：

Tabletop.js

在该指南中，通过设置电子表格设置的分步指南非常轻松地实现它，以便您可以将其提取到您的项目中。

这是我的代码示例：

<!DOCTYPE html>
<html>

<head>
  <title>PublicBoard Spreadsheet Test using Tabletop.js</title>
  <meta charset="utf-8" />

  <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
  <script type='text/javascript'>
    var response = [];

    var publicSpreadsheetUrl =
      'https://docs.google.com/spreadsheets/d/1VkFEE5o-auS4E6FIzVtUzwU2dCARruBxEOOl1gnZhnc/edit?usp=sharing';

    function init() {
      Tabletop.init({
        key: publicSpreadsheetUrl,
        callback: showInfo,
        simpleSheet: true
      })
    }

    function showInfo(data, tabletop) {
      alert('Successfully processed!')
      console.log(data);
    }

    window.addEventListener('DOMContentLoaded', init)
  </script>
</head>

<body>
  <p>PublicBoard Spreadsheet Test using Tabletop.js</p>
</body>

</html>

【讨论】：