如何在GitHub页面中使用基本的Google Sheets javascript脚本？
在GitHub页面中使用基本的Google Sheets JavaScript脚本涉及到几个步骤，包括设置Google Sheets API、获取API密钥、编写脚本以及将其嵌入到GitHub页面中。以下是详细的步骤和相关概念：
基础概念
- Google Sheets API: 这是一个允许开发者读取、写入、修改Google Sheets文档的接口。
- OAuth 2.0: 用于认证和授权，确保只有授权的应用程序可以访问用户的数据。
- JavaScript: 一种广泛用于网页开发的脚本语言。
相关优势
- 实时数据更新: 可以直接从Google Sheets获取最新数据并在网页上显示。
- 易于集成: 使用JavaScript可以轻松地将Google Sheets数据嵌入到任何网页中。
- 灵活性: 可以根据需要定制数据的显示方式和功能。
类型
- 读取数据: 从Google Sheets中获取数据并在网页上显示。
- 写入数据: 允许用户通过网页修改Google Sheets中的数据。
应用场景
- 动态网站内容: 如博客、新闻网站等，需要实时更新的数据。
- 数据分析展示: 将分析结果直接展示在网页上。
- 项目管理工具: 实时跟踪项目进度和状态。
实现步骤
步骤1: 设置Google Sheets API
- 访问Google Cloud Console。
- 创建一个新项目或选择一个现有的项目。
- 启用Google Sheets API。
- 配置OAuth同意屏幕。
- 创建凭据并下载JSON文件。
步骤2: 编写JavaScript脚本
以下是一个简单的示例，展示如何使用Google Sheets API读取数据并在网页上显示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Sheets Example</title>
</head>
<body>
<div id="data"></div>
<script>
function initClient() {
gapi.client.init({
'apiKey': 'YOUR_API_KEY',
'discoveryDocs': ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
'clientId': 'YOUR_CLIENT_ID',
'scope': 'https://www.googleapis.com/auth/spreadsheets.readonly'
}).then(function () {
return gapi.client.sheets.spreadsheets.values.get({
'spreadsheetId': 'YOUR_SPREADSHEET_ID',
'range': 'Sheet1!A1:D10'
});
}).then(function (response) {
var rows = response.result.values;
if (rows) {
var dataDiv = document.getElementById('data');
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var rowDiv = document.createElement('div');
rowDiv.innerHTML = row.join(', ');
dataDiv.appendChild(rowDiv);
}
} else {
dataDiv.innerHTML = "No data found.";
}
}, function (error) {
console.log('Error: ' + error);
});
}
function loadClient() {
gapi.load('client:auth2', initClient);
}
</script>
<script src="https://apis.google.com/js/platform.js?onload=loadClient" async defer></script>
</body>
</html>步骤3: 嵌入到GitHub页面
将上述HTML文件上传到你的GitHub仓库，并在GitHub Pages上部署。
常见问题及解决方法
问题1: 无法读取数据
原因: 可能是由于API密钥不正确或权限设置不正确。
解决方法: 检查API密钥是否正确，并确保在Google Cloud Console中为你的项目启用了正确的权限。
问题2: 安全性问题
原因: 直接在客户端代码中暴露API密钥可能会导致安全风险。
解决方法: 使用服务器端代理来处理API请求，或者使用OAuth 2.0进行用户认证。
推荐资源
通过以上步骤和资源，你应该能够在GitHub页面中成功使用基本的Google Sheets JavaScript脚本。
相关·内容
我尝试实现一段代码来在我的GitHub页面中显示来自谷歌电子表格的数据。我发现Sheetrock.js和JS Fiddle都可以工作，但是我不知道如何设置基本的javascript文件结构。我知道我可以将文件命名为___.js并从html文件中调用它们，但是Sheetrock.js信息不使用这种格式。我记得不久前我尝试过这个方法，在遇到同样的障碍后放弃了，所以我发了一篇文章，希望能拯救其他人，来自于
浏览 16提问于2019-01-03得票数 0
我们的非营利性组织有一个Google Sheets文件，其中包含许多选项卡(工作表)。我们需要在我们的WordPress网站的两个不同的网页上显示从两张工作表中选择的数据。从几年前开始，我们设置了Google Sheets以发布到web上(并选择了需要发布的两个工作表)。从那时起，我们一直使用tabletop.js和一些简单的Javascript来检索和显示数据。
浏览 29提问于2021-08-17得票数 1
我正在将Google Sheets插件“翻译”成Excel插件。我很难找到是否以及如何在Excel add-in中使用JavaScript以编程方式创建自定义函数(顺便说一句，这对于Google Sheets来说非常简单)。
这个是可能的吗？如果有，你能提供一个基本的例子吗？
浏览 0提问于2016-05-31得票数 2
我有一个Google文档，它与近30个人共享，我在所有单元格中添加了数据验证下拉列表，除我定义的值外，没有输入不同的值。你能解释一下我怎么做到的吗？
浏览 0提问于2020-11-15得票数 1
我在这里探索了在第一次运行我应该在电子表格中构建的脚本集时，用户的工作负载的可能性。其中一个函数需要Sheets，让用户手动启用它将是一个杀手。我已经阅读过它，但没有找到一个明确的答案，当用户第一次授权脚本运行时，通过脚本将这个高级服务添加到一起的可能性。谢谢你的意见！
浏览 28提问于2022-05-20得票数 1
回答已采纳
2回答
有什么方法可以用javascript和google电子表格来打开和可视化有人能告诉我这是否可能吗?为此，应该使用什么API命令？
浏览 2提问于2013-01-29得票数 0
回答已采纳
我在社区中找不到任何关于使用GSheets生成Mekko图表的线索。下面是如何在Excel中实现它：以下是数据和电子表格：
浏览 0提问于2020-11-15得票数 1
回答已采纳
在过去的几年里，我一直使用Alex的语法高亮器在我的博客上显示代码片段。它达到了目的，但是在博客中添加代码是件很痛苦的事情(我需要使用HTML并手动添加包装在<pre>标记上的代码)。但是，积极的是，我确信搜索引擎会爬行我所写的代码。
最近我偶然遇到了GitHub专家，很容易复制和粘贴我的代码，选择语言，并在我的网站上使用嵌入代码。然
浏览 0提问于2012-07-24得票数 6
回答已采纳
我不能找到广告应用程序接口支持在谷歌应用程序脚本，我可以写广告字脚本从广告帐户，但目前我正在处理多个帐户(几乎25)我必须做的是进入个人帐户和复制我的脚本在帐户和广告脚本有限制15脚本可以由一个用户一次运行，我想创建所有帐户的数据库在一个地方，这是可能通过Adword api在java和其他编程语言，但我相当熟悉谷歌应用程序脚本我想在应用程序脚本中使用广告应用程序接口，我如何使用谷
浏览 0提问于2013-07-12得票数 1
我有这样的订单编号和数量记录：# 5397 (5) # 5387 (15)，意思是5和15，总共20。预期的结果是20。我已经在Microsoft中实现了一个自定义函数：Longitud = Len(n1)If MidVal(Mid(n1, i + 1, 6))End IfDebug.Print Valor它在Excel中</e
浏览 0提问于2021-06-28得票数 0
回答已采纳
5回答
我已经按照下面列出的github页面上的基本演示教程进行了操作：当我运行它时，控制台中没有错误。下面是代码。我不知道为什么它不工作，这只是演示代码，我还没有尝试做任何棘手的事情。显示
<script src="//maps.google.c
浏览 1提问于2014-10-30得票数 0
我写了一个google sheets javascript add on。
我想使用它作为我自己的个人使用，而不是发表它供审查或向公众。如何在指定它的工作表上添加工作，而不必在后台打开脚本，或者必须将其发布到add on存储中？
浏览 0提问于2016-04-14得票数 0
回答已采纳
2回答
先道歉--我不是一个程序员，我对编码一无所知，我只是一个真正想要使用来支持微软Azure网站的人。目标：分析access数据并创建托管在Microsoft上的网站的轻松浏览的详细报告
我被告知登录Azure门户，然后通过SSH控制台远程连接web服务。在公司里似乎
浏览 2提问于2018-05-23得票数 1
我得到了import JSON script：https://gist.github.com/paulgambill/cacd19da95a1421d3164 并将其粘贴到google sheets中的google apps脚本中，然后我想导入这个Json：https://fapi.binance.com/fapi/v1/ticker/24hr 但是我不
浏览 14提问于2021-07-03得票数 1
回答已采纳
我有一些数据是实时更新到谷歌工作表作为一个整数，我插入到我的网页上的HTML，然后使用Javascript动画的数字计数到存储的数字。不幸的是，在计数器功能激活之前，没有收到来自Google sheets的数据，所以在页面加载时，我的计数器显示为0，但是当页面刷新时，一切正常工作，计数到存储在sheets中的数
浏览 2提问于2019-07-25得票数 0
我创建了一个交互式搜索电子表格，它根据用户输入和来自另一个工作表的数据过滤列。由于用户需要能够在搜索单元格中输入值，所以我必须让任何人都可以编辑电子表格，尽管我锁定了除了所需的单元格和“聊天”表之外的所有内容。问题是，它并没有阻止用户创建空页，而且在过去的几年里，在那里积累了数百张空白页。我不知道为什么会发生这种情况，它们是由机器人、恶意用户创建的，还是搜索的副产品(尽管在我测试时它们没有出现)。https://docs.google</em
浏览 0提问于2020-01-11得票数 0
回答已采纳
我正试着把这个网站的数据放到谷歌的表格里我以前在这个站点上使用过=importhtml或=importxml，但是我现在无法让它工作他们的网站上会有什么东西不允许把桌子拉出来吗？我过去使用的命令是
=IMPORTHTML("https://www.pgatour.com/stats/stat.194.html&
浏览 0提问于2018-02-05得票数 0
我正在尝试使用Google (在PHP中使用google/apiclient和OAuth 2.0)从电子表格中获取数据。此电子表格定义了一些“筛选视图”(在Data > Filter视图中定义)，例如，其中一个筛选器只显示Price列大于x的行。我正在试图找到一种方法来使用现有的过滤器视图来获取已经过滤的数据，但是我找不到它。有什么办法吗？
浏览 4提问于2021-05-20得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
