简单的Javascript代码,用于显示Google电子表格中单个字段的数据

时间:2015-04-05 05:48:43

标签: javascript html google-sheets google-spreadsheet-api

首先,我不是专业程序员,这就是我在这里寻求帮助的原因,所以提前感谢您的时间和耐心。我需要一些网站代码,用于调用和显示已发布的Google电子表格中特定字段的信息,通过HTML,javascript或其他类似方法显示。

环顾四周,似乎有几种方法可以做到这一点,但我能找到的所有示例和技巧都超出了我的专业知识,坦白说,我应用其中几种方法的努力失败了。我搜索过以前的问题,但他们都引用了比我需要的更复杂的例子。

如果有人能举一个简单的例子,我会非常感激。 (越简越好。)与此同时,我将继续试验看我能做些什么。

1 个答案:

答案 0 :(得分:0)

这是How can I access Google Sheet spreadsheets only with Javascript?

的副本

但是因为这个例子对于初学者来说并不简单,所以这里的代码将使用上面答案中的代码显示电子表格的第二个单元格

  1. 转到https://github.com/mikeymckay/google-spreadsheet-javascript并下载文件google-spreadsheet.js
  2. 使用文本编辑器编辑该文件并进行更改
    • this.jsonCellsUrl = "http://this.jsonCellsUrl = "//
    • this.jsonListUrl = "http://this.jsonListUrl = "// 在您的网页中没有混合的http和https
  3. 更改下方的var url以指向工作表
  4. FIDDLE

    <!DOCTYPE html>
    <html>
    <head>
    <title>Spreadsheet example</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
    <script type='text/javascript' src='google-spreadsheet.js'></script>
    <script type='text/javascript'>  
    $(function() {
    
      var url = "https://spreadsheets.google.com/pub?key=0Ago31JQPZxZrdHF2bWNjcTJFLXJ6UUM5SldEakdEaXc&hl=en&output=html";
    
      var googleSpreadsheet = new GoogleSpreadsheet();
      googleSpreadsheet.url(url);
      googleSpreadsheet.load(function(result) {
        $('#results').html(result.data[1]); // show the 2nd (0-based) cell
      });
    });
    </script>
    </head>
    <body>
    Here is the result: <span id="results"></span>
    </body>
    </html>