如何用Javascript读取Google Sheets？Tabletop.js失效解决方案

你遇到的404错误是Google于2021年8月正式下线旧版Google Sheets API v3导致的，Tabletop.js已于2018年停止维护，底层完全依赖该废弃API，因此原有方案直接失效。

不需要改用复杂的正式Google Sheets API，你可以直接用Google Sheets公开CSV导出端点实现相同功能，改造成本极低，完全适配你读两个不同工作表的需求：

前置准备 #

确认你的Google Sheets仍然保持「发布到网络」的状态，且需要读取的两个工作表都在发布范围内即可。

改造代码示例（对应你原有逻辑） #

不需要再引入tabletop.js，直接用纯JS实现数据读取：

<script type='text/javascript'>
    // 替换为你自己的表格ID，就是原URL里d/和/edit之间的字符串
    const SHEET_ID = '13XSjvsIgviUqd2zxxxxxxxxxsRO3OIf78Hyw';
    // 这里填你当前页面需要读取的工作表名称，另一个页面改这个参数就行
    const SHEET_NAME = 'EnrolledAll';

    async function init() {
        // 获取CSV数据
        const res = await fetch(`https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:csv&sheet=${SHEET_NAME}`);
        const csvText = await res.text();
        // 解析CSV为JSON对象，结构和Tabletop返回的几乎一致
        const rows = parseCSV(csvText);
        showInfo(rows);
    }

    // CSV解析函数，直接复用即可
    function parseCSV(csv) {
        const lines = csv.split('\n');
        const headers = lines[0].replace(/"/g, '').split(',');
        const result = [];
        for (let i = 1; i < lines.length; i++) {
            if (!lines[i].trim()) continue;
            const values = lines[i].replace(/",/g, '|||').replace(/"/g, '').split('|||');
            const row = {};
            headers.forEach((header, index) => {
                row[header.toLowerCase()] = values[index] || '';
            });
            result.push(row);
        }
        return result;
    }

    function showInfo(sheet) {
        // 以下逻辑和你原有代码完全一致，不需要改动
        console.log(sheet);
        var targetIG = document.getElementById('IGCode').innerHTML;
        var igRoster="";

        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>

多工作表适配 #

你两个页面需要读不同工作表的需求，只需要在对应页面的代码里修改SHEET_NAME变量为对应工作表名称即可，无需其他调整。

如果你后续需要更复杂的操作（比如筛选、分页、写入数据），可以考虑改用正式的Google Sheets API v4，需要先申请API密钥，然后通过API端点读取数据，流程比上述CSV方案复杂，仅在有进阶需求时推荐使用。

内容的提问来源于stack exchange，提问作者user1769675