如何在Google表格中动态传递可变范围产品值到Web表单查询字符串

问题背景 #

现有Google表格关联自定义Web表单超链接，点击时需传递订单号、客户名称、可变数量的产品作为查询参数到Web表单URL，但目前只能手动拼接产品参数，无法自动适配不同客户的产品数量差异。

解决方案 #

通过自定义表格函数自动收集对应行的所有产品并生成完整链接，同时优化Web Apps代码适配参数传递：

1. 添加表格自定义函数生成链接 #

打开Google表格的脚本编辑器，插入以下函数用于自动生成包含产品参数的URL：

function generateFormLink(orderNo, clientName, productRange) {
  // 收集当前行非空的产品单元格
  const products = [];
  for (let cell of productRange) {
    if (cell && cell.toString().trim() !== "") {
      products.push(encodeURIComponent(cell));
    }
  }
  // 替换为你的Web表单部署URL
  const baseUrl = "https://script.google.com/macros/s/[你的部署ID]/exec";
  return `${baseUrl}?orderno=${encodeURIComponent(orderNo)}&client=${encodeURIComponent(clientName)}&products=${products.join(",")}`;
}

2. 在表格中调用函数生成超链接 #

在需要生成链接的单元格（如E2）中输入公式：

=HYPERLINK(generateFormLink(A2,B2,C2:C),"打开表单")

• A2：订单号所在单元格
• B2：客户名称所在单元格
• C2:C：当前行从C列开始的产品范围（自动忽略空单元格）

3. 优化Web Apps代码适配参数 #

以下是优化后的代码，增加空值处理逻辑：

Code.gs

function doGet(e){
  const tmpl = HtmlService.createTemplateFromFile('form');
  
  tmpl.orderno = e.parameter.orderno || "";
  tmpl.clientname = e.parameter.client || ""; 
  // 处理产品参数为空的情况
  const products = e.parameter.products ? e.parameter.products.split(",").filter(p => p.trim() !== "") : [];
  tmpl.productsHtmlString = getProductsHtmlString(products);

  return tmpl.evaluate();
}

function getProductsHtmlString(arr){
  if(arr.length === 0){
    return "<div class='productrow'>暂无产品信息</div>";
  }
  const productsHtmlArray = [];

  for(let i = 0; i < arr.length; i++){
    productsHtmlArray.push(`<div class="productrow"><input id="product${i+1}" type="text" class="validate" disabled value="${arr[i]}"><label for="product${i+1}" class="active">Product</label></div>`);
  }

  return productsHtmlArray.join("");
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

form.html

<head>
  <?!= include('stylesheet'); ?>
</head>
<body>
    
  <div class="row">
    <input id="orderno" type="text" disabled value="<?= orderno; ?>" class="validate">
    <label for="orderno" class="active">Order Number</label>
  </div>

  <div class="row">
    <input id="clientname" type="text" disabled value="<?= clientname; ?>" class="validate">
    <label for="clientname" class="active">Client Name</label>
  </div>

  <div id="orderdetails">
    Product Details
    <?!= productsHtmlString; ?>
  </div>
</body>

stylesheet.html

<style>
  .row{
    margin-top: 7.5px;
    margin-bottom: 7.5px;
  }
  .productrow {
    margin: 10px 0;
    padding: 5px;
    border-bottom: 1px solid #eee;
  }
</style>

关键说明 #

• generateFormLink函数自动遍历指定产品范围，收集非空值并编码，避免特殊字符导致参数传递错误
• 新增空产品列表的处理逻辑，防止页面显示异常
• 表格公式可批量下拉，自动生成每行对应的表单链接

内容的提问来源于stack exchange，提问作者arniem