如何在Google Apps Script的Prompt窗口中添加HTML或图片？

原生Prompt窗口不支持HTML #

Google Apps Script里的Browser.msgBox()、SpreadsheetApp.getUi().prompt()这类原生弹窗都是纯文本渲染，完全不支持HTML，没法直接把HTML代码整合进去。

实现带图片弹窗的正确方式：用HtmlService创建自定义对话框 #

要实现带图片的弹窗，必须用HtmlService构建自定义HTML界面替代原生Prompt，具体步骤如下：

1. 创建HTML弹窗文件 #

在脚本编辑器中点击「文件」→「新建」→「HTML文件」，命名为ImageDialog.html，填入以下内容：

<!DOCTYPE html>
<html>
  <body style="padding: 15px;">
    <!-- 插入图片，使用公网可访问的URL或公开的云端硬盘图片链接 -->
    <img src="https://example.com/your-image.png" alt="弹窗图片" style="width: 200px; display: block; margin: 0 auto 15px;">
    <p>这里可以添加你的提示文字</p>
    <!-- 关闭按钮 -->
    <button onclick="google.script.host.close()" style="margin-right: 10px;">关闭</button>
    <!-- 如果需要交互，可添加提交按钮 -->
    <button onclick="handleSubmit()">提交</button>

    <script>
      // 处理提交逻辑（可选）
      function handleSubmit() {
        // 示例：获取用户输入（如果有输入框的话）
        const input = document.getElementById('userInput')?.value;
        // 调用GS端函数处理数据
        google.script.run.withSuccessHandler(() => {
          google.script.host.close();
        }).handleUserInput(input);
      }
    </script>
  </body>
</html>

2. 在GS脚本中调用自定义对话框 #

在你的.gs主脚本文件中添加触发函数：

function showImageDialog() {
  const ui = SpreadsheetApp.getUi();
  // 加载HTML文件并设置弹窗尺寸
  const htmlOutput = HtmlService.createHtmlOutputFromFile('ImageDialog')
    .setWidth(350)
    .setHeight(300);
  // 显示弹窗，第二个参数是弹窗标题
  ui.showModalDialog(htmlOutput, '带图片的提示');
}

运行showImageDialog()，就能看到带图片的弹窗了。

补充：处理用户输入（可选） #

如果需要像原生Prompt那样收集用户输入，可以在HTML里的<p>标签后添加输入框：

<input type="text" id="userInput" placeholder="请输入内容" style="width: 100%; margin-bottom: 15px;">

然后在GS脚本中添加对应的处理函数：

function handleUserInput(input) {
  // 示例：将输入内容写入当前表格的第一行
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.appendRow([new Date(), input]);
}

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