如何从 web 页面上的谷歌表返回数据？

Question

我一直在尝试找到一种仅显示存储在我的 web 页面上的谷歌表上的特定于单元格的数据的方法。 数据样本如下。

我不想在此处嵌入工作表。 我希望它在没有单元格边框的情况下看起来更美观且格式正确。

例如。 用户输入两种产品的名称，如“Wheet”和“Oats”。 单击提交按钮时，他必须在两个单独的表格中水平地看到谷歌表上这两种产品的单元格。

到目前为止，我有一个网页，它有两个输入和一个提交按钮，

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.form-inline {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline label {
  margin: 5px 10px 5px 0;
}

.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
}

.form-inline button:hover {
  background-color: royalblue;
}

@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>
</head>
<body>

<h2>Product Details</h2>

<form class="form-inline" action="/action_page.php">
  <label for="product1">Product1:</label>
  <input type="product1" id="product1" placeholder="Enter first Product name" name="product1">
  <label for="product2">Product2:</label>
  <input type="product2" id="product2" placeholder="Enter second Product name" name="product2">
  <button type="submit">Submit</button>
</form>

</body>
</html>

注意：这个必须显示的谷歌表格由许多人定期更新，因此页面必须相应地调整。 请提出一种方法。

另外，我不是很擅长编程，所以如果有一个开源工具需要更少的编码并且可以用来实现这一点。 请建议。 就像https://sketch2code.azurewebsites.net/将草图转换为网页代码一样。

Answer 1

应用程序脚本 Web 应用程序是允许连接客户端 Javascript 代码和服务器端应用程序脚本代码的接口

Apps 脚本具有许多方便的功能，用于访问和处理电子表格数据
Web 应用程序需要一个doGet() function 来创建 HTML Z78E6221F6393D1456Z81DBCE39
google.script.run是一个 Javascript API 允许 HTML 部分和脚本项目的服务器端 code.gs 部分之间的通信。
Web 需要部署应用以获得部署 URL
这个 URL 可以简单地在浏览器中打开或嵌入到已经存在的网页中

在给定电子表格中查找通过 Web 页面表单输入的值并将包含这些值的行返回到 Web 页面的示例代码：

代码.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function findValues(value1, value2){
  var searchRange = SpreadsheetApp.openById("SPREADSHEETID").getSheetByName("Sheet1").getDataRange().getValues();
  var productColumn = 1;
  var results = [];
  var products =searchRange.map(function(row){ return row[productColumn-1]});
  var firstIndex = products.indexOf(value1);
  if(firstIndex > -1){
    var firstRow = searchRange[firstIndex].filter(v => v);
    results.push(firstRow);
  }
  var secondIndex = products.indexOf(value2);
  if(secondIndex > -1){
    var secondRow = searchRange[secondIndex].filter(v => v);
    results.push(secondRow);
  }  
  if(results.length >0){
    results = JSON.stringify(results);
    Logger.log(results);
    return results;
  }
}

索引.html

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         body {font-family: Arial, Helvetica, sans-serif;}
         * {box-sizing: border-box;}
         .form-inline {  
         display: flex;
         flex-flow: row wrap;
         align-items: center;
         }
         .form-inline label {
         margin: 5px 10px 5px 0;
         }
         .form-inline input {
         vertical-align: middle;
         margin: 5px 10px 5px 0;
         padding: 10px;
         background-color: #fff;
         border: 1px solid #ddd;
         }
         .form-inline button {
         padding: 10px 20px;
         background-color: dodgerblue;
         border: 1px solid #ddd;
         color: white;
         cursor: pointer;
         }
         .form-inline button:hover {
         background-color: royalblue;
         }
         @media (max-width: 800px) {
         .form-inline input {
         margin: 10px 0;
         }
         .form-inline {
         flex-direction: column;
         align-items: stretch;
         }
         }
      </style>
   </head>
   <body>
      <div id="output"></div>
      <h2>Product Details</h2>
      <form class="form-inline">
         <label for="product1">Product1:</label>
         <input type="product1" id="product1" placeholder="Enter first Product name" name="product1">
         <label for="product2">Product2:</label>
         <input type="product2" id="product2" placeholder="Enter second Product name" name="product2">
         <input type="button" value="Submit" onclick="passValuesToGoogle()">
      </form>
      <script>
         function passValuesToGoogle(){
         var product1 = document.getElementById("product1").value;
         var product2 = document.getElementById("product2").value;
google.script.run.withSuccessHandler(displayRows).withFailureHandler(onFailure).findValues(product1, product2);
         }
         function onFailure(error) {
         var div = document.getElementById('output');
         div.innerHTML = "ERROR: " + error.message;
         }
         
         function displayRows(values){
         console.log("success");
         if(values != null){
         values = JSON.parse(values);
         var div = document.getElementById('output');
         div.innerHTML = values[0] + "<br>" + values[1];
         }
         }
      </script>
   </body>
</html>

请按照链接文档中描述的过程使用此代码部署 WebApp。

如何从 web 页面上的谷歌表返回数据？

问题描述

1 个解决方案

解决方案1
0 2020-08-26 13:43:52

应用程序脚本 Web 应用程序是允许连接客户端 Javascript 代码和服务器端应用程序脚本代码的接口

如何从 web 页面上的谷歌表返回数据？

问题描述

1 个解决方案

解决方案1 0 2020-08-26 13:43:52

应用程序脚本 Web 应用程序是允许连接客户端 Javascript 代码和服务器端应用程序脚本代码的接口

解决方案1
0 2020-08-26 13:43:52