如何从网页中的Google单元中读取数据？

Question

我有一个本地网页index.html，其中一个带有id="test"的HTML应该显示一个特定单元的内容，例如，来自这个谷歌电子表格的A3 ("10")。

我以网页的形式发表了它，但我不能百分之百肯定它是否是我计划做的最好的形式。

如何使用JavaScript在上面指定的元素中显示Google电子表格中选定的单元格？

我不能依赖PHP，因为我想将index.html文件放在我的计算机和手机上，而不实际托管它们。

基于Matthew的答案，我已经链接到tabletop.js，它位于我的JS文件夹中。此文件夹与索引文件的级别相同。

    <script type="text/javascript" src="JS/tabletop.js"></script>

然后，在JS的主脚本标记中，我包括：

function init() {
     Tabletop.init( { key: '1kFFysrHSapJXr-DxdYbuaMzkg5iBP60jR6OBFgzwSds',
               callback: function(data, tabletop) { window.alert("data") },
               simpleSheet: true } )
    };

看看它是否喷出了什么东西。但事实并非如此。即使是简单的“数据”警报。我做错了什么？

下面是我试图在JSFiddle中构建的一个很小的例子，但我认为我在如何链接到tabletop.js (在外部资源下)时遇到了其他问题.

Answer 1

如果您想使用javascript从您自己的网页中读取Google /Drive单元格，我建议使用Tabletop.js库：

<script type="text/javascript">
  window.onload = function() { init() };

  var public_spreadsheet_url = 'https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html';

  function init() {
    Tabletop.init( { key: public_spreadsheet_url,
                     callback: showInfo,
                     simpleSheet: true } )
  }

  function showInfo(data, tabletop) {
    alert("Successfully processed!")
    console.log(data);
  }
</script>

showInfo函数的数据参数将包含一个数组对象。数组的每一行对应于电子表格中的一行，单元格将位于以每个列标题作为名称的对象中。例如：

[ { name: "Carrot", category: "Vegetable", healthiness: "Adequate" }, 
  { name: "Pork Shoulder", category: "Meat", healthiness: "Questionable" }, 
  { name: "Bubblegum", category: "Candy", healthiness: "Super High"} ]

在编写文档时，Note似乎不正确。key参数只需要来自公共电子表格url的键值，而不是整个url。

Answer 2

这个问题已经过时了。我现在的工作方法是：

const spreadsheetId = 'xxxxxxYourSheetIdxxxxxx'
fetch(`https://docs.google.com/spreadsheets/d/${spreadsheetId}/gviz/tq?tqx=out:json`)
.then(res => res.text())
.then(text => {
    
    const jsonObj = JSON.parse(text.substr(47).slice(0, -2)).table.rows
    return jsonObj
    // I'm cutting off the first two rows (I think the letters A-Z and the categories) to get only clean table data

})
.then(json => {
    // console.dir(json) // see the returned JSON
    json.forEach(element => 
    {    
        // console.dir(element.c)  
        // Append to my own frontend 'events' collection:
        events.push(element.c)
    })
})

希望它对任何人都有帮助。这是个讨厌的工具。有严重的安全问题，在我的例子中，可写的G-工作表在前端可见。其中一些应该搬到后台去。无论如何，这是一个小项目，如果有人想破坏当地的艺术学校，我已经准备好了备份的内容。这是由于我在DB方面的无能而产生的&很快就会被更坚实的东西所取代。