如何将Google Sheet单个单元格内容便捷发布至PHP/HTML/JS/CSS网站？

算力阿峰

2026-7-18

最简实现方案：前端JS直接读取发布的表格数据

步骤1：配置Google Sheet

打开目标表格，选中要展示的单元格所在工作表
点击顶部菜单栏「文件」→「发布到网页」
在弹出窗口中，「发布内容和设置」选择单个工作表（指定目标工作表），「格式」选逗号分隔值(CSV)
点击「发布」，复制生成的CSV公开链接（注意：此链接可被任何人访问，确保内容适合公开）

步骤2：前端嵌入代码

在你的HTML页面中，添加以下代码，直接请求CSV数据并将目标单元格内容嵌入文本：

<p>目前有<span id="target-cell"></span>只流浪犬正在寻找新家</p>

<script>
// 替换成你复制的CSV发布链接
const csvUrl = 'https://docs.google.com/spreadsheets/d/e/XXX/pub?output=csv';

// 示例：读取A1单元格内容，若目标是B3则调整行和列索引
fetch(csvUrl)
  .then(res => res.text())
  .then(csvText => {
    const rows = csvText.split('\n');
    // 取第1行（索引0）的第1个单元格（索引0），B列则用[1]
    const cellValue = rows[0].split(',')[0].trim();
    document.getElementById('target-cell').textContent = cellValue;
  })
  .catch(err => {
    console.error('加载数据失败:', err);
    document.getElementById('target-cell').textContent = '未知';
  });
</script>

特殊情况处理

如果单元格内容包含逗号，CSV会自动用引号包裹，此时需要调整解析逻辑：

// 处理带引号的CSV单元格
function parseCsvRow(row) {
  const matches = row.match(/"([^"]*)"|([^,]+)/g);
  return matches ? matches.map(item => item.replace(/^"|"$/g, '')) : [];
}

// 使用时替换为：
const cellValue = parseCsvRow(rows[0])[0].trim();