不使用<iframe>嵌入标签能否在网站上自定义展示Google Sheet数据？

Google Sheet 自定义外站展示方案 #

这个需求完全可实现，无需依赖默认iframe嵌入，你可以通过公开数据接口拉取表格内容后完全自定义样式，步骤如下：

• 第一步配置表格权限：打开目标Google Sheet，点击右上角「共享」按钮，将通用访问权限设置为「知道链接的任何人」，角色选择「查看者」后保存。
• 第二步获取表格ID：从浏览器地址栏的Google Sheet链接中提取d/和/edit之间的字符串，即为你的表格唯一ID。
• 第三步前端拉取渲染：无需复杂鉴权，直接通过公开导出接口拉取CSV格式数据，解析后自行渲染即可，示例代码如下：

// 替换为你自己的表格ID
const SHEET_ID = "替换为你提取的表格ID";
const EXPORT_URL = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/export?format=csv`;

async function loadSheetData() {
  const response = await fetch(EXPORT_URL);
  const csvContent = await response.text();
  // 简单解析CSV，复杂场景建议使用专业CSV解析库
  const dataRows = csvContent.split("\n").map(item => item.split(","));
  // 此处插入你的自定义渲染逻辑，可生成任意样式的表格、卡片、列表等组件
  console.log("拉取到的表格数据：", dataRows);
}
loadSheetData();

如果需要多工作表读取、条件筛选等复杂能力，可以在Google Cloud控制台启用Google Sheets API，创建只读API密钥后调用官方接口拉取数据即可，全程不需要用户授权操作。

Excel 同类需求实现方案 #

同类数据展示需求也可以用Excel完成，分两种场景：

• 本地Excel文件：将xlsx格式的Excel文件和HTML代码一起部署到托管站点，使用前端解析库读取Excel文件内容后自定义渲染即可。
• 在线版Excel（Microsoft 365 Excel Online）：和Google Sheet逻辑一致，先将在线表格设置为公开可查看，调用Microsoft Graph API的只读接口拉取数据后自定义渲染即可。

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