首页 > 解决方案 > 如何使用 Javascript 在网页上阅读 Google 表格?我正在使用桌面,但它上周停止工作

问题描述

我们的非营利组织有一个包含许多标签(表格)的 Google 表格文件。我们需要在 WordPress 网站的两个不同网页上显示两个工作表中选定的数据片段。

从几年前开始,我们将 Google 表格设置为发布到网络(并选择了需要发布的两张表格)。从那时起,我们一直在使用 tabletop.js 和一些简单的 Javascript 来检索和显示数据。

这是其中一页上的代码示例。对于这篇文章,我修改了 URL,因为该电子表格包含许多不应公开的姓名和电子邮件地址。

<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script type='text/javascript'> 
    // This is the address of the Google Sheet containing the IG database
    var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/13XSjvsIgviUqd2zxxxxxxxxxsRO3OIf78Hyw/edit?usp=sharing';

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

    function showInfo(data, tabletop) {
        var sheet = data.EnrolledAll.elements;
        console.log(sheet);
        var targetIG = document.getElementById('IGCode').innerHTML;
        var igRoster="";

        // Walk IG DB, building selected roster 
        for (i = 0; i < sheet.length; i++) {
            if (sheet[i].ig==targetIG) {
                igRoster=igRoster + "<li>" + sheet[i].name;
                if (sheet[i].class!="")
                    igRoster=igRoster + " (" + sheet[i].class + ")";
                igRoster=igRoster + "</li>";
            }
        }
        document.getElementById('IGRoster').innerHTML=igRoster;
    }
    window.addEventListener('DOMContentLoaded', init);
</script>

这按预期工作了几年,但上周(大约 2021 年 8 月 13 日)这停止了工作。Tabletop.init 现在在尝试检索 Google 表格数据时收到 404。浏览器控制台日志在尝试访问这样的 URL 时显示 404(显然由桌面和/或 Google 转换):

https://spreadsheets.google.com/feeds/worksheets/13XSjvsIgviUqd2zYUxxxxxxxx_3mTsRO3OIf78Hyw/public/basic?alt=json

我听说谷歌最近做了一些安全更改,并怀疑这可能是根本原因。

我需要使用 Google Sheets API,还是有更简单的 Tabletop 替代品?请注意,我需要来自两个不同工作表的数据,但每个网页只需要从其中一个工作表中读取数据。

标签: google-apps-scriptgoogle-sheets

解决方案


Tabletop.js 对 Google Sheets 的访问现在被 Google 拒绝 Sheets API v3 正式禁用。 https://github.com/jsoma/tabletop/issues/192#issuecomment-897435587

所以我将应用 Google Sheets API 从 Google Sheets 读取数据。他们的迁移指南在这里: https ://cloud.google.com/blog/products/g-suite/migrate-your-apps-use-latest-sheets-api

更新:我为 Google Sheets API 创建了一个 API 密钥,并将其与 Papa Parse 一起用于从 Google Sheet 读取数据。我终于意识到 API 密钥不必是附加到 Google 表格的同一个 Apps 脚本项目的一部分。它们可以是完全独立的不相关项目,您只需要一个 API 密钥就可以从我们的网页 javascript 中读取工作表。


推荐阅读