如何将HTML UI选中的供应商值填充到Google Sheet指定单元格？

我来帮你搞定这个问题！其实核心就是把HTML UI里用户选择的供应商数据，通过Google Apps Script的客户端-服务器通信机制传递到后端，再写入指定的POTemplate标签页B12单元格。下面是完整的实现方案：

第一步：编写HTML UI页面（带供应商选择和保存按钮） #

首先你的HTML页面需要加载Vendor Database里的供应商列表，然后添加保存按钮，点击时把选中的供应商传给后端脚本。示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h3>选择下单供应商</h3>
    <select id="vendorSelect">
      <!-- 这里会通过Apps Script动态填充供应商选项 -->
    </select>
    <button onclick="saveVendorChoice()">保存选择</button>

    <script>
      // 页面加载时从Vendor Database获取供应商列表
      window.onload = function() {
        google.script.run.withSuccessHandler(populateVendorSelect)
          .getVendorList();
      };

      // 填充下拉选择框
      function populateVendorSelect(vendors) {
        const select = document.getElementById('vendorSelect');
        vendors.forEach(vendor => {
          const option = document.createElement('option');
          option.value = vendor;
          option.textContent = vendor;
          select.appendChild(option);
        });
      }

      // 点击保存按钮时传递选中值到后端
      function saveVendorChoice() {
        const selectedVendor = document.getElementById('vendorSelect').value;
        if (!selectedVendor) {
          alert('请先选择供应商！');
          return;
        }
        google.script.run.withSuccessHandler(() => {
          alert('供应商选择已保存！');
          google.script.host.close(); // 可选：关闭侧边栏/对话框
        }).withFailureHandler(error => {
          alert('保存失败：' + error.message);
        }).saveSelectedVendor(selectedVendor);
      }
    </script>
  </body>
</html>

第二步：编写Google Apps Script后端代码 #

接下来在你的Sheet绑定的脚本文件里，添加两个核心函数：一个用来获取供应商列表，另一个用来把选中的供应商写入POTemplate的B12单元格：

// 获取Vendor Database标签页的供应商列表（假设供应商在A列，从A2开始）
function getVendorList() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const vendorSheet = ss.getSheetByName('Vendor Database');
  if (!vendorSheet) {
    throw new Error('未找到Vendor Database标签页！');
  }
  // 获取A列非空单元格的值（跳过表头A1）
  const vendorRange = vendorSheet.getRange('A2:A').getValues();
  return vendorRange.filter(row => row[0] !== '').map(row => row[0]);
}

// 保存选中的供应商到POTemplate的B12单元格
function saveSelectedVendor(selectedVendor) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const poTemplateSheet = ss.getSheetByName('POTemplate');
  if (!poTemplateSheet) {
    throw new Error('未找到POTemplate标签页！');
  }
  // 写入B12单元格
  poTemplateSheet.getRange('B12').setValue(selectedVendor);
}

// 可选：创建一个菜单来打开HTML UI（方便用户访问）
function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('供应商下单')
    .addItem('选择供应商', 'showVendorSelectionUi')
    .addToUi();
}

// 显示HTML UI（作为侧边栏）
function showVendorSelectionUi() {
  const html = HtmlService.createHtmlOutputFromFile('你的HTML文件名') // 替换成你的HTML文件名称
    .setTitle('选择下单供应商')
    .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(html);
}

关键注意事项 #

• 确保你的HTML文件和GS脚本文件在同一个Google Apps Script项目里，并且HTML文件名和showVendorSelectionUi里的文件名一致。
• 检查Vendor Database里的供应商是否在A列（如果在其他列，修改getVendorList里的范围，比如改成B2:B）。
• 测试时要授权脚本（第一次运行会弹出权限请求，需要允许）。
• 如果是多选供应商的需求，只需要把HTML里的<select>改成<select multiple>，然后在saveVendorChoice里获取选中的多个值，后端用setValue改成setValues或者用逗号拼接成字符串写入B12。

内容的提问来源于stack exchange，提问作者Eric K.