如何通过Google Web App Script获取用户输入创建自定义Google文档

看起来你已经找对了核心方向——通过前端收集用户输入，再把数据传递给后端脚本处理就能实现需求。我帮你梳理下完整可运行的方案，顺便修正几个小细节：

1. 前端页面（Index.html）：搭建用户输入界面 #

这里我们添加了输入框收集文档名称、歌曲标题和作者信息，同时增加了基础验证避免空提交：

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Fill in fields below to name Google Lyric Document and add the song title and writers.<br><br>
<input id="idNewDocName" type="text" placeholder="Google Doc Name" required><br><br>
<input id="idNewSongTitle" type="text" placeholder="Song Title" required><br><br>
<input id="idNewSongWriters" type="text" placeholder="Song Writers (e.g., © John Doe)"><br><br>
<button onclick="saveUserInput()">Create New Lyric Doc</button>
<script>
window.saveUserInput = function() {
  // 获取用户输入的值
  var docName = document.getElementById('idNewDocName').value;
  var songTitle = document.getElementById('idNewSongTitle').value;
  var songWriters = document.getElementById('idNewSongWriters').value || "© Unknown Writer";

  // 验证必填项
  if (!docName || !songTitle) {
    alert("请填写文档名称和歌曲标题！");
    return;
  }

  // 调用后端脚本并传递参数
  google.script.run
    .withSuccessHandler(openNewDoc)
    .createNewLandscapeSong({
      docName: docName,
      songTitle: songTitle,
      songWriters: songWriters
    });
}

function openNewDoc(results){
  // 成功创建后打开新文档
  window.open(results.url, '_blank').focus();
}
</script>
</body>
</html>

2. 后端脚本（Code.gs）：接收参数并创建文档 #

这里我们修改了核心函数，接收前端传来的参数，用用户输入替换硬编码内容，同时修正了原代码里的变量错误：

function doGet() {
  return HtmlService
    .createTemplateFromFile('Index')
    .evaluate()
    .setTitle("Create Song Lyric Document"); // 给Web App页面添加标题
}

function createNewLandscapeSong(objArgs) {
  // 解构获取前端传来的参数
  const { docName, songTitle, songWriters } = objArgs;

  // 创建文档并设置自定义名称
  const doc = DocumentApp.create(docName);
  const url = doc.getUrl();
  const body = doc.getBody();

  // 添加作者信息
  const paragraph = body.insertParagraph(0, "");
  const text = paragraph.appendText(songWriters);
  text.setFontSize(8);

  // 添加自定义歌曲标题
  body.insertParagraph(0, songTitle)
    .setHeading(DocumentApp.ParagraphHeading.HEADING3);

  // 添加歌词表格
  const rowsData = [['PUT FIRST VERSE/CHORUS HERE.', 'PUT SECOND VERSE/NEXT CHORUS/BRIDGE/ETC HERE.']];
  const style = {};
  const table = body.appendTable(rowsData);
  style[DocumentApp.Attribute.BORDER_WIDTH] = 0;
  table.setAttributes(style);

  // 返回文档信息给前端
  return { url: url, title: songTitle };
}

关键修改说明 #

• 前端通过document.getElementById获取输入框值，打包成对象传递给后端函数
• 后端用解构赋值提取参数，直接替换原来的固定文本
• 增加必填项验证，避免无效提交
• 修正了原代码中Logger和返回值里未定义的title变量问题
• 给Web App页面添加标题，提升用户体验

部署提示 #

重新部署Web App时，注意选择：

• 执行权限：以我（开发者）的身份执行
• 访问权限：根据需求选择（比如任何人，甚至匿名如果是公开使用场景）

这样用户就能通过输入框填写信息，一键创建带有自定义名称和内容的Google文档了！

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