如何将Google Sheets用作HTML文件的数据库实现数据读取展示功能

前置配置（仅首次需要操作） #

• 打开目标Google表格，点击右上角「共享」，设置权限为「知道链接的任何人可查看」
• 提取表格ID：表格URL中d/和/edit之间的字符串，示例URL https://docs.google.com/spreadsheets/d/abc123XYZ/edit#gid=0 中，表格ID为abc123XYZ
• 提取工作表GID：URL末尾gid=后的数字，默认第一个工作表GID为0

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Sheet数据拉取工具</title>
</head>
<body>
    <!-- 触发拉取的按钮 -->
    <button id="fetchBtn">点击加载数据</button>
    <br><br>
    <!-- 展示数据的textarea -->
    <textarea id="resultArea" rows="20" cols="80" placeholder="数据将展示在这里"></textarea>

    <script>
        // 仅需修改这里的两个配置项即可
        const SHEET_ID = '替换为你自己的表格ID';
        const GID = '替换为你自己的工作表GID';
        const fetchBtn = document.getElementById('fetchBtn');
        const resultArea = document.getElementById('resultArea');

        fetchBtn.addEventListener('click', async () => {
            try {
                // 请求表格公开数据接口
                const res = await fetch(`https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json&gid=${GID}`);
                const rawText = await res.text();
                // 处理Google返回的特殊格式，提取有效JSON
                const jsonStr = rawText.slice(47, -2);
                const sheetData = JSON.parse(jsonStr);
                // 表格行数据，可根据需求调整拼接规则
                const rows = sheetData.table.rows.map(row => {
                    // 每一行的单元格内容拼接，这里默认用制表符分隔，可自行修改分隔符
                    return row.c.map(cell => cell ? cell.v : '').join('\t');
                });
                // 所有行拼接成字符串写入textarea
                resultArea.value = rows.join('\n');
            } catch (err) {
                resultArea.value = '数据加载失败，请检查表格权限和配置项是否正确';
                console.error(err);
            }
        })
    </script>
</body>
</html>

使用说明 #

• 配置完成后，所有数据调整仅需在对应Google Sheets中修改，修改完成后刷新HTML页面重新点击加载按钮即可获取最新数据，无需修改任何代码
• 可根据业务需求调整JS中数据拼接的规则，比如指定只取某几列、调整分隔符、加自定义格式等

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