独立JS文件可运行的listfiles函数嵌入HTML后失效排查请求

嘿，刚接触相关开发遇到这种问题太正常啦，别客气～咱们来一步步理清问题根源和解决办法：

核心原因：环境差异导致API无法调用 #

你在独立JS（应该是Google Apps Script的独立脚本文件）里运行时，代码是在Google的服务端环境执行的，这个环境有权限调用DriveApp这类服务端API，所以能正常输出日志结果。但把函数放进HTML的<script>标签后，这段代码是在用户本地浏览器的客户端环境运行的——浏览器根本没有权限直接访问Google Drive的服务端API，自然就没任何输出了。

正确的实现方式：服务端+客户端协作 #

要解决这个问题，得把函数拆分到服务端（.gs文件）和客户端（HTML）两部分，用Google Apps Script的google.script.run来做跨环境调用：

1. 服务端代码（放在.gs文件里） #

把原来的listfiles函数移到Google Apps Script的.gs脚本文件中，作为服务端函数：

function listfiles() {
  var Extras = "19ibxiuX-xcyNXGs4GBNR_W8zLXSz3mhS";
  var filetype = "text/csv";
  var filenameformat = /^Report-\w{3}-[AD]-\d{8}.csv$/; // 这里把[A|D]改成[AD]更规范哦
  var fileIterator = DriveApp.getFolderById(Extras).getFiles();
  var filenames = [];

  while (fileIterator.hasNext()) {
    var file = fileIterator.next();
    // 验证文件类型和文件名格式
    if (file.getMimeType() === filetype && filenameformat.test(file.getName())) {
      filenames.push(file.getName());
    }
  }
  return filenames; // 返回符合条件的文件名数组
}

2. 客户端HTML代码 #

在HTML里通过google.script.run调用服务端的listfiles函数，并用回调函数处理返回结果，把内容渲染到页面上：

<!DOCTYPE html>
<html>
<body>
  <p>全局函数(listfiles)返回特定格式的文件名：</p>
  <p id="demo"></p>

  <script>
    // 页面加载完成后调用服务端函数
    window.onload = function() {
      google.script.run
        .withSuccessHandler(function(result) {
          // 成功获取结果后，渲染到demo元素里
          var demoElement = document.getElementById('demo');
          if (result.length > 0) {
            demoElement.innerHTML = result.join('<br>');
          } else {
            demoElement.textContent = '没有找到符合条件的文件';
          }
        })
        .withFailureHandler(function(error) {
          // 处理调用失败的情况，比如权限问题
          document.getElementById('demo').textContent = '调用失败：' + error.message;
        })
        .listfiles(); // 调用服务端的listfiles函数
    };
  </script>
</body>
</html>

额外注意事项 #

• 确保你的脚本已经授权了访问Google Drive的权限，首次运行时会弹出权限请求，需要允许；
• google.script.run是异步调用，所以必须用withSuccessHandler来接收返回结果，不能直接同步赋值；
• 正则表达式里的[A|D]其实可以简化为[AD]，前者会把|当成一个可选字符，不符合你的预期哦。

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