You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否基于Google Apps Script开发可扫描二维码的Web App?

在Google Apps Script Web App中实现二维码扫码并查询Google Sheet的方案

完全可行,GAS Web App的前端支持标准HTML/JavaScript,可以借助前端扫码库实现相机调用和二维码识别,再结合GAS后端操作Google Sheet完成查询。以下是具体实现步骤:

1. 前端扫码实现(HTML文件)

创建名为index.html的文件,嵌入前端扫码逻辑,使用ZXing-js库调用相机识别二维码,获取内容后调用GAS后端函数:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://unpkg.com/@zxing/library@latest"></script>
  </head>
  <body>
    <video id="video" width="300" height="200" style="border:1px solid #ccc"></video>
    <div id="result"></div>
    <button onclick="stopScan()">停止扫码</button>

    <script>
      const codeReader = new ZXing.BrowserMultiFormatReader();
      let scanning = true;

      function startScan() {
        codeReader.decodeFromVideoDevice(null, 'video', (result, err) => {
          if (result && scanning) {
            document.getElementById('result').textContent = `扫码结果: ${result.text}`;
            // 调用后端查询Sheet
            google.script.run.withSuccessHandler(displayResult)
                .querySheetByQrCode(result.text);
            stopScan();
          }
        });
      }

      function stopScan() {
        scanning = false;
        codeReader.reset();
      }

      function displayResult(sheetData) {
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML += `<br>Sheet查询结果: ${typeof sheetData === 'string' ? sheetData : JSON.stringify(sheetData)}`;
      }

      window.onload = startScan;
    </script>
  </body>
</html>

2. 后端Sheet查询逻辑(Code.gs文件)

在Code.gs中编写Web App入口函数和Sheet查询函数,接收二维码内容并返回匹配的条目:

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

function querySheetByQrCode(qrContent) {
  // 替换为你的Google Sheet ID和目标工作表名称
  const sheetId = '你的Sheet ID';
  const sheetName = 'Sheet1';
  const sheet = SpreadsheetApp.openById(sheetId).getSheetByName(sheetName);
  
  const allData = sheet.getDataRange().getValues();
  // 假设二维码内容匹配Sheet第一列的数据,可根据实际调整列索引
  const matchedEntry = allData.find(row => row[0] === qrContent);
  
  return matchedEntry ? matchedEntry : '未找到关联条目';
}

部署与注意事项

  • 部署Web App时,执行方式选择「我」,访问权限根据需求设置(公开使用选「任何人,甚至匿名」)。
  • 首次部署需完成授权流程,允许脚本访问你的Google Sheet。
  • 浏览器会请求相机权限,用户需允许后才能正常扫码;GAS Web App默认使用HTTPS,满足相机调用的安全要求。

内容的提问来源于stack exchange,提问作者Teed Ferguson

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.25 00:27:20