我可以在我的网站上显示谷歌表格数据，而不使用嵌入 <iframe > 标签吗？这很糟糕答案

【问题标题】：Can I display google sheet data on my site, without using embed <iframe > tag? It's boor我可以在我的网站上显示谷歌表格数据，而不使用嵌入 <iframe > 标签吗？这很糟糕
【发布时间】：2021-11-17 17:05:10
【问题描述】：

我在谷歌上有一张工作表。我想在谷歌表格之外的 HTML 页面上显示它，例如## Heading ##free hosting 或其他！我在标签中使用嵌入，但表格看起来很乏味。我想通过代码显示数据！我试图连接到谷歌表，但我不能。这可能吗？还是我在做不可能的事？谁能给我解释一下？我可以用 excel 做到这一点吗！

【问题讨论】：

标签： html excel database google-sheets embed

【解决方案1】：

在您的 html 页面中，创建

<div id="json">json here</div>

然后添加此javascript以通过json端点检索数据（我留下了我的ID和GID，根据需要更改）

var id = '1n-rjSYb63Z2jySS3-M0BQ78vu8DTPOjG-SZM4i8IxXI';
var gid = '0';
var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
fetch(url)
  .then(response => response.text())
  .then(data => document.getElementById("json").innerHTML=myItems(data.substring(47).slice(0, -2))  
  );
function myItems(jsonString){
  var json = JSON.parse(jsonString);
  var table = '<table><tr>'
  json.table.cols.forEach(colonne => table += '<th>' + colonne.label + '</th>')
  table += '</tr>'
  json.table.rows.forEach(ligne => {
    table += '<tr>'
    ligne.c.forEach(cellule => {
        try{var valeur = cellule.f ? cellule.f : cellule.v}
        catch(e){var valeur = ''}
        table += '<td>' + valeur + '</td>'
      }
    )
    table += '</tr>'
    }
  )
  table += '</table>'
  return table
}

在这里测试https://codepen.io/mikesteelson/pen/wvevppe

【讨论】：