在网站中嵌入来自 Google 表格的特定范围，以便网站用户可以对其进行编辑答案

【问题标题】：Embed specific range from Google Sheets in website so that it is editable by website users在网站中嵌入来自 Google 表格的特定范围，以便网站用户可以对其进行编辑
【发布时间】：2018-01-28 21:18:13
【问题描述】：

我想在网站中嵌入来自 Google Docs 电子表格的特定范围的单元格（或者如果这不能在没有标题和工具栏的情况下使用整个工作表），以便任何网站访问者都可以输入他们的数据。

我知道如何在 html 表格中嵌入特定范围的单元格，但这不允许网站用户编辑表格。

几年前有人问过类似的问题here，但建议的解决方案似乎不再有效。

【问题讨论】：

标签： iframe google-sheets embed

【解决方案1】：

我将其称为 htmlSpreadsheet，您可以将其用作对话框或部署为 webapp，doGet 已经可以使用了。它仍然是一个非常简单的应用程序。有很大的定制空间。

这是 code.gs 文件：

function onOpen()
{
  SpreadsheetApp.getUi().createMenu('HTML Spreadsheet')
    .addItem('Run Spreadsheet in Dialog', 'htmlSpreadsheet')
    .addToUi();
}

var SSID='SpreadSheetID';
var sheetName='Sheet1';

function htmlSpreadsheet(mode)
{
  var mode=(typeof(mode)!='undefined')?mode:'dialog';
  var br='<br />';
  var s='';
  var hdrRows=1;
  var ss=SpreadsheetApp.openById(SSID);
  var sht=ss.getSheetByName(sheetName);
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  s+='<table>';
  for(var i=0;i<rngA.length;i++)
  {
    s+='<tr>';
    for(var j=0;j<rngA[i].length;j++)
    {
      if(i<hdrRows)
      {
        s+='<th id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="10" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
      } 
      else
      {
        s+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="10" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
      }
    }
    s+='</tr>';
  }
  s+='</table>';
  //s+='<div id="success"></div>';
  s+='</body></html>';
  switch (mode)
  {
    case 'dialog':
      var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
      userInterface.append(s);
      SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Spreadsheet Data for ' + ss.getName() + ' Sheet: ' + sht.getName());
      break;
    case 'web':
      var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
      return userInterface.append(s).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
   }
}

function updateSpreadsheet(i,j,value)
{
  var ss=SpreadsheetApp.openById(SSID);
  var sht=ss.getSheetByName(sheetName);
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  rngA[i][j]=value;
  rng.setValues(rngA);
  var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] Has been updated', 'ridx': i, 'cidx': j};
  return data;
}

function doGet()
{
  var output=htmlSpreadsheet('web');
  return output;
}

这是 htmlss.html 文件：

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {

    });
    function updateSS(i,j)
    {
      var str='#txt' + String(i) + String(j);
      var value=$(str).val();
      $(str).css('background-color','#ffff00');
      google.script.run
         .withSuccessHandler(successHandler)
         .updateSpreadsheet(i,j,value)
    }
    function successHandler(data)
    {
      $('#success').text(data.message);
      $('#txt' + data.ridx + data.cidx).css('background-color','#ffffff');
    }
    console.log('My Code');
    </script>
    <style>
      th{text-align:left}
    </style>
  </head>
  <body>
  <div id="success"></div>

【讨论】：

感谢您的回复。我正在使用 Wordpress，所以很遗憾，我认为您的解决方案不适用于我的情况。有没有办法使用 Wordpress 做到这一点？
不是这样。只需部署为 webapp 并将其 iframe 到您的网站。 Here's an example of a similar situation. 这是我管理的网站。这是一个 wordpress 网站，存档会议记录和存档视频是已嵌入网站的 web 应用程序。
我喜欢这个！请注意，它不会更新最终用户包含公式的单元格，因此只是从用户的角度进行直接编辑而没有公式的好处，但它确实限制了用户的能力。它似乎还将单元格的格式更改为自定义日期格式的自动。我还没有尝试过其他格式如果有问题的工作表没有公式，那么一切都很好。不过，我不知道有一种方法可以知道哪些单元格具有引用给定单元格的公式，而无需遍历所有单元格。

【解决方案2】：

以下帖子会有所帮助： https://support.google.com/docs/answer/37579?hl=fr&ref_topic=2818998

还有一些附加值，以下是您可能想尝试的模板，其中 ------ 是您工作表的特定代码

<iframe style="border: 0;" src="https://docs.google.com/spreadsheets/-----/pubhtml?gid=--------&amp;range=C2:E&amp;chrome=false&amp;single=true&amp;widget=false&amp;headers=false" width="800" height="750" frameborder="0" scrolling="yes"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>

【讨论】：